How do you import a Svelte component in a Typescript file?

在TypeScript项目中导入Svelte组件和在JavaScript项目中导入的方式大致相同，但你需要确保TypeScript能正确识别.svelte文件。以下是如何做到这一点的步骤：

步骤1: 初始化项目

首先，确保你的项目支持TypeScript。如果是新项目，你可以使用Svelte模板，并添加TypeScript支持：

bash
npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js

如果是已存在的项目，你可以手动添加TypeScript支持，包括安装必要的依赖：

bash
npm install -D typescript svelte-preprocess @tsconfig/svelte @types/node

步骤2: 配置TypeScript

在项目根目录添加或修改tsconfig.json文件，包含对Svelte文件的支持：

json
{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
  "compilerOptions": {
    "module": "es2020",
    "target": "es2017"
  }
}

在你的rollup.config.js或webpack.config.js中配置svelte-preprocess支持TypeScript：

javascript
import sveltePreprocess from 'svelte-preprocess';

export default {
  // ...
  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
      // 其他选项
    }),
    // 其他插件
  ],
  // ...
}

步骤3: 导入Svelte组件

现在，你可以在任何TypeScript文件里导入Svelte组件了。假设你有一个名为MyComponent.svelte的Svelte组件，你可以这样导入：

typescript
import MyComponent from './MyComponent.svelte';

// 使用MyComponent组件的代码

示例：

假设你有一个App.svelte主组件，里面需要导入另一个名为HelloWorld.svelte的组件：

HelloWorld.svelte:

svelte
<script lang="ts">
  export let name: string;
</script>

<h1>Hello {name}!</h1>

App.svelte:

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

<main>
  <HelloWorld name="World"/>
</main>

通过这些步骤，你就可以在使用TypeScript的Svelte项目中顺利导入和使用Svelte组件了。这样做能充分利用TypeScript提供的类型安全和其他高级功能，提高开发效率和项目的可维护性。