Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte 5: Typescript's non-null assertion operator doesn't work when passing direct props. #2248

Closed
HighFunctioningSociopathSH opened this issue Jan 6, 2024 · 1 comment
Labels
bug Something isn't working Fixed Fixed in master branch. Pending production release.

Comments

@HighFunctioningSociopathSH
Copy link

Describe the bug

The non-null assertion operator or for short (!) doesn't work when passing direct props to a component.
Note that it works fine when used inside a callback passed as a prop.

Reproduction

let's say we have the following simple component that expects a prop.

<svelte:options runes />

<script lang="ts">
  import type { Snippet } from "svelte";
  let { string, children } = $props<{ string: string; children: Snippet }>();
  $inspect(string);
</script>

{@render children()}

And then in our page, we render it like so

<svelte:options runes />
<script lang="ts">
	import SimpleComponent from "$components/test/test.svelte";
	let simpleString: string | undefined = $state("just some value");
</script>

<SimpleComponent string={simpleString!}>hello</SimpleComponent>

Now here typescript will tell us that simpleString can be undefined and thus not assignable to the string prop which is of type string only. But I know that simpleString has a default value so I want to use the non-null assertion operator but it doesn't seem to work in this specific case. It is simply ignored

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 6.09 GB / 15.63 GB
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 9.7.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.91)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: ^5.0.0-next.29 => 5.0.0-next.29

Severity

annoyance

@dummdidumm dummdidumm transferred this issue from sveltejs/svelte Jan 8, 2024
@dummdidumm dummdidumm added the bug Something isn't working label Jan 8, 2024
@dummdidumm
Copy link
Member

dummdidumm commented Jan 10, 2024

Simplified version:

<script lang="ts">
    import { SvelteComponent } from 'svelte';

	class SimpleComponent extends SvelteComponent<{ children?: any; string: string; }, any, any> {}
	let simpleString: string | undefined = 'hello' as any; 
</script>

<SimpleComponent string={simpleString!}>hello</SimpleComponent>

Not sure why this is happening, the generated output preserves the !, so it should work, and if I paste the generated output into a .ts file I see no error - strange.

Edit: It is missing when setting emitOnTemplateError to true, which is the case for the language server.

@dummdidumm dummdidumm added the Fixed Fixed in master branch. Pending production release. label Jan 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Fixed Fixed in master branch. Pending production release.
Projects
None yet
Development

No branches or pull requests

2 participants