面试题：Svelte与TypeScript集成中如何处理组件属性类型

Question

在Svelte与TypeScript集成的项目里，假设你有一个自定义组件，需要接收一个字符串类型且不能为空的属性 `name`，请描述如何使用TypeScript来定义这个组件属性的类型，并在Svelte组件中正确使用它。

Answer 1

1. 使用TypeScript定义属性类型：
   • 可以在一个.d.ts文件（比如components.d.ts）中定义一个接口来描述组件属性类型。

   // components.d.ts
   import type { SvelteComponentTyped } from'svelte';
   
   export interface MyComponentProps {
       name: string;
   }
   
   export default class MyComponent extends SvelteComponentTyped<MyComponentProps> {}
   

2. 在Svelte组件中正确使用：
   • 在Svelte组件（比如MyComponent.svelte）中使用这个类型定义。

   <script lang="ts">
       import type { MyComponentProps } from './components.d.ts';
       const props: MyComponentProps = $props;
       const { name } = props;
       if (!name) {
           throw new Error('name property cannot be empty');
       }
   </script>
   
   <div>
       <p>{name}</p>
   </div>
   

   • 另一种方式是在Svelte组件内直接定义类型。

   <script lang="ts">
       type MyComponentProps = {
           name: string;
       };
       const props: MyComponentProps = $props;
       const { name } = props;
       if (!name) {
           throw new Error('name property cannot be empty');
       }
   </script>
   
   <div>
       <p>{name}</p>
   </div>