Svelte组件访问未定义属性时应触发TypeScript类型错误

方案1：全局开启noImplicitAny编译选项 #

直接在项目的tsconfig.json里启用这个TypeScript核心选项，它会对所有隐式推断为any的场景抛出错误，包括访问组件上不存在的属性：

{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

保存后重启TypeScript服务，再访问myComponent.somethingNotDefined就会触发预期的类型错误。

方案2：给组件实例定义严格的局部类型约束 #

如果不想全局修改编译选项，可以手动给组件实例指定更严格的类型，绕过Svelte默认生成的宽松类型（带[key: string]: any索引签名）：

<script lang="ts">
    import MyComponent from './MyComponent.svelte';
    import type { SvelteComponentTyped } from 'svelte';

    // 先定义组件对外暴露的API类型
    type MyComponentPublicAPI = {
        doSomething: (input: string) => string;
    };

    // 用交叉类型合并基础组件类型和自定义API类型
    let myComponent: SvelteComponentTyped<{}, {}, {}> & MyComponentPublicAPI;

    function someFunction() {
        myComponent.doSomething('some-string'); // 类型推断正常
        myComponent.somethingNotDefined; // 这里会直接抛出类型错误：属性不存在
    }
</script>

<MyComponent bind:this={myComponent}></MyComponent>

为什么默认情况下不报错？ #

Svelte自动生成的组件类型继承自SvelteComponent基类，这个基类带有[key: string]: any的索引签名，允许任意属性访问并推断为any。上面的两种方案要么通过编译选项禁用隐式any，要么手动覆盖了这个宽松的索引签名，从而实现严格的类型检查。

内容的提问来源于stack exchange，提问作者RigoTamas