Svelte+TypeScript does not generate type errors for extraneous props passed to components if they contain a dash (-)

[WilHall]

Describe the bug

Passing an undeclared prop to a component, e.g. <TextComponent unknownProp="foop" />, causes a type error. This behavior appears to work even if the prop name is an HTML attribute name such as role or title. However, when the prop name contains a dash (-) character (such as in the case of aria-* props like aria-live or aria-hidden) no type error is thrown.

Reproduction

This issue can be reproduced using the below example components:
App.svelte

<script lang="ts">
	import TestComponent from './TestComponent.svelte'
</script>

<TestComponent text="Hello, world!" unknown-prop="Unknown" unknownProp="Unknown" />

TestComponent.svelte

<script lang="ts">
export let text;
</script>

<p>{text}</p>

Expected behaviour

Type checking the reproduction example (via svelte-check):

• Validates the TestComponent prop text as valid (expected)
• Validates the TestComponent prop unknownProp as invalid (expected)
• Validates the TestComponent prop unknown-prop as valid (unexpected)

The expected behavior would be that both unknownProp and unknown-prop are type checked as invalid, since the component only declares a text prop.

System Info

• OS: macOS Monterey
• IDE: nvim v0.8.0
• svelte@3.50.1
• svelte-check@2.9.1
• svelte-preprocess@4.10.7

Which package is the issue about?

svelte-check

Additional Information, eg. Screenshots

No response

[jasonlyu123]

This only happens in the old (JSX) transformation and it is a limitation in Typescript with JSX type check. If you use the new transformation (see #1352 for how to turn it on; it will be the new default, soon), it will work as expected.