weixin_39990558
weixin_39990558
2020-12-29 12:58

Typescript: Reactive assignments do not infer data type

Describe the bug Subject.

To Reproduce Have these enabled in tsconfig.json:


"noImplicitAny": true,
"strictNullChecks": true,

and create a component with the following code:

html
<script lang="typescript">
  export let data: { someKey: string | null };

  $: show = !!data.someKey;
</script>

{#if show}hey{/if}

This simple code raises two TS errors: Variable 'show' implicitly has type 'any' in some locations where its type cannot be determined. for the show variable in the script tag and Variable 'show' implicitly has an 'any' type for the same variable in the template.

Expected behavior Seems to be safe enough to infer the data type as boolean.

System (please complete the following information): OS: Mac OS 10.15.3 IDE: VS Code Plugin/Package: Svelte for VS Code (the new official one)

Additional context

Currently the parser does not allow neither this

typescript
$: show = !!data.someKey as boolean;

nor that

typescript
$: show: boolean = !!data.someKey;

The only possible (and quite simple!) solution is to duplicate the variable, which is completely fine but may not be obvious for some of svelte users.

typescript
let show: boolean;
$: show = !!data.someKey;
// No errors after that

该提问来源于开源项目:sveltejs/language-tools

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

10条回答

  • weixin_39619451 weixin_39619451 4月前

    This is something we cannot change I think, but it should be documented.

    点赞 评论 复制链接分享
  • weixin_39966020 weixin_39966020 4月前

    I have some experiment with implementing infer type for reactive assignment. Maybe you can give it a try following this step to see there is any problem.

    点赞 评论 复制链接分享
  • weixin_39990558 weixin_39990558 4月前

    Thanks for your work! Svelte has been the best for me for a long time, but now with this project I just cannot imagine what would make me leave this ecosystem ❤️

    Back to topic. Great! To me it is completely ok, but I also think it needs some documentation. I've converted a whole bunch of components to Typescript and encountered some quirks that were difficult to handle (the most difficult one was to find out how I should import interfaces and types in the component, took me a while to figure that out). I would be happy to help with documentation, but I do not see any in the repo. Can you point me to the place?

    点赞 评论 复制链接分享
  • weixin_39966020 weixin_39966020 4月前

    I also think we should have some typescript documentation. not just like how to type a svelte event handler. There's some svelte specific syntax got transformed to do type check, like what we did in #259, for example. It could be better if we have documentation about it.

    点赞 评论 复制链接分享
  • weixin_39966020 weixin_39966020 4月前

    most of the docs is in packages/svelte-vscode

    点赞 评论 复制链接分享
  • weixin_39990558 weixin_39990558 4月前

    Yeah, I saw it but there's basically no documentation on usage. I'm not sure if I should add it to typescript setup or to the root readme file.

    点赞 评论 复制链接分享
  • weixin_39966020 weixin_39966020 4月前

    Because it is also related to svelte-check. I personally would prefer it to be in root docs folder in a dedicated file.

    点赞 评论 复制链接分享
  • weixin_39619451 weixin_39619451 4月前

    I agree. We have the folder docs at the root, maybe we should put it in there and also move some preprocessor docs there. Multiple packages rely on those docs so this feels like the right place.

    点赞 评论 复制链接分享
  • weixin_39966020 weixin_39966020 4月前

    Maybe we could convert some of the examples in official docs to typescript

    点赞 评论 复制链接分享
  • weixin_39619451 weixin_39619451 4月前

    Fixed through #335

    点赞 评论 复制链接分享

相关推荐