Component with generic type - type is not constrained

[patrickiel]

Describe the bug

Generic type parameter in a component is not properly constrained, allowing any type to be passed when using the component, potentially leading to type safety issues. This allows invalid types to be passed without triggering type errors.

Expected Behavior

• The generic type parameter should be properly constrained
• Enforced type safety when using the component
• Invalid types should trigger type errors during development

Reproduction

https://svelte.dev/playground/0aaba3651e6b4cf183a0cf73d539dbb4?version=5.19.4
(same behaviour in VSCode with the extension "Svelte for VS Code")

• Define a component with a generic type parameter
• Attempt to use the component with various types
• Observe that any type is accepted without constraint

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 7700X 8-Core Processor
    Memory: 14.39 GB / 31.10 GB
  Binaries:
    Node: 23.6.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.99)
    Internet Explorer: 11.0.26100.1882

Severity

annoyance

[rChaoz]

This is a TS-specific issue and should be caught by TS, not Svelte. And it is, for example do npm run check in this repro.

Svelte itself does not (and should not) catch any type errors, you can also see that you can pass a number to a prop of type string.

If you have the Svelte extension enabled in your IDE, it should also catch the type-error, provided it's working correctly (try putting a let a: number = "abc" in your Svelte component to check this). If it's not, that's an issue for https://github.com/sveltejs/language-tools.

[7nik]

Note, though REPL supports TS, the typings is ignored.

The problem is that GroupToggleItem infers T from the type of item, but in your code they are literals, just strings and not Theme.
You can type the component via const ThemeToggleItem = GroupToggleItem<Theme>

[dummdidumm]

What you are describing here is not possible to achieve without helping TypeScript understand what type GroupToggleItem should receive - there's no connection on a type level here. What @7nik just described is a valid way to achieve this - there's no other way than "helping" TypeScript understand what the generic relation ship is here. Therefore closing.