【Svelte】第十八节：TypeScript 支持

👽第18节：TypeScript 支持

📌 引言

随着前端项目的复杂度提升，类型安全成为保障代码质量和团队协作效率的关键因素。Svelte 从版本 3.30 开始原生支持 TypeScript，并在 SvelteKit 中提供了完善的集成方案。通过启用 TypeScript，开发者可以获得更好的类型提示、错误检查和代码重构能力。

本节课老曹将系统讲解如何在 Svelte 和 SvelteKit 中启用 TypeScript，包括组件类型定义、变量约束、函数参数校验、第三方库类型兼容等内容。你还将学习如何配置项目结构以支持 .ts 文件与 Svelte 组件中的 lang="ts" 类型声明，以及在真实项目中如何利用 TypeScript 提升开发体验与代码可维护性。

📘 课程内容详解

⚡1. 在 Svelte 项目中启用 TypeScript

创建新项目时启用（推荐）：

npm create svelte@latest my-app

选择如下选项即可启用 TypeScript 支持：

• ✅ Add TypeScript?
• ✅ Add TypeScript for Svelte?

已有项目手动添加：

npm install -D typescript svelte-check @sveltejs/vite-plugin-svelte @sveltejs/adapter-auto

创建 tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "es2017",
    "module": "esnext",
    "lib": ["dom", "es2017"],
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

修改 vite.config.js：

import { defineConfig } from 'vite';
import svelte from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()]
});

🚀2. 在 Svelte 组件中使用 lang="ts"

Svelte 支持在 <script> 标签中使用 lang="ts" 来启用 TypeScript 类型检查。

<script lang="ts">
  let count: number = 0;

  function increment() {
    count++;
  }
</script>

<button on:click={increment}>
  点击了 {count} 次
</button>

类型推断示例：

<script lang="ts">
  const user = {
    id: 1,
    name: 'Alice',
    email: 'alice@example.com'
  };

  // TypeScript 自动推断为:
  // const user: { id: number; name: string; email: string }
</script>

💻3. 组件间类型定义与传递 props

你可以使用 TypeScript 接口或类型别名来定义组件的 props。

定义接口：

// src/lib/types.ts
export interface User {
  id: number;
  name: string;
  email?: string;
}

使用接口定义组件 props：

<!-- src/lib/UserCard.svelte -->
<script lang="ts">
  export let user: User;
</script>

<div class="user-card">
  <h3>{user.name}</h3>
  {#if user.email}
    <p>Email: {user.email}</p>
  {/if}
</div>

父组件中使用：

<script lang="ts">
  import UserCard from './UserCard.svelte';
  import type { User } from '../lib/types';

  const currentUser: User = {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com'
  };
</script>

<UserCard {currentUser} />

🐋4. 函数参数与返回值类型约束

<script lang="ts">
  function formatName(user: { firstName: string; lastName: string }): string {
    return `${user.firstName} ${user.lastName}`;
  }

  const fullName = formatName({ firstName: '李', lastName: '四' });
</script>

🤡5. 使用泛型提高复用性

<script lang="ts">
  function identity<T>(arg: T): T {
    return arg;
  }

  const output = identity<string>('Hello');
</script>

🦁6. 处理事件与类型绑定

Svelte 的自定义事件也可以使用 TypeScript 进行类型定义。

<!-- ChildComponent.svelte -->
<script lang="ts">
  import type { CustomEvent } from 'svelte';

  const dispatch = createEventDispatcher<{
    submit: CustomEvent<{ value: string }>
  }>();

  function onSubmit() {
    dispatch('submit', { value: '提交成功' });
  }
</script>

<button on:click={onSubmit}>提交</button>

父组件监听事件并获取类型提示：

<script lang="ts">
  function handleSubmit(event: CustomEvent<{ value: string }>) {
    alert(event.detail.value);
  }
</script>

<ChildComponent on:submit={handleSubmit} />

🐱7. 第三方库的类型支持

确保安装第三方库的同时也安装其类型定义文件（通常为 @types/xxx 或由库自带）。

例如安装 Axios 及其类型：

npm install axios
npm install -D @types/axios

在组件中使用：

<script lang="ts">
  import axios from 'axios';

  async function fetchUser(id: number) {
    const res = await axios.get(`https://api.example.com/users/${id}`);
    console.log(res.data);
  }
</script>

🐟8. 在 SvelteKit 中使用 TypeScript 的最佳实践

✅a. 页面组件中定义 load 函数类型

// src/routes/user/[id]/+page.ts
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ params }) => {
  const res = await fetch(`https://api.example.com/users/${params.id}`);
  const user = await res.json();

  return {
    user
  };
};

✅b. 使用 $types 自动生成类型

SvelteKit 支持根据路由自动生成类型定义，只需在文件中导入：

import type { PageLoad } from './$types';

✅c. 配置 svelte-check 实现编译时类型检查

npm install -D svelte-check

添加脚本：

{
  "scripts": {
    "typecheck": "svelte-check --tsconfig ./tsconfig.json"
  }
}

运行命令进行类型检查：

npm run typecheck

🔍 总结

本节课深入讲解了如何在 Svelte 和 SvelteKit 中启用 TypeScript，涵盖从基础环境搭建到组件类型定义、函数参数校验、事件绑定、泛型复用、第三方库集成等完整流程。你现在应该能够：

• 在 Svelte 项目中启用 TypeScript 并配置 tsconfig.json
• 在 .svelte 组件中使用 lang="ts" 启用类型检查
• 使用接口（interface）和类型别名（type）定义组件 props
• 编写类型安全的函数与事件处理逻辑
• 集成第三方库并确保类型一致性
• 在 SvelteKit 中使用 $types 实现页面类型自动推导
• 使用 svelte-check 进行编译时类型检查

下一节课我们将进入 项目实战 阶段，构建一个完整的 Todo 应用或博客系统，包含 CRUD 功能、登录认证、API 对接等真实业务场景，帮助你综合运用前面所学知识，打造可上线的 Svelte 应用。

❓高频面试题（含参考答案）

1. 如何在 Svelte 中启用 TypeScript？

   • 使用 npm create svelte 创建项目时选择 TypeScript 支持，或手动添加 tsconfig.json 并安装依赖。

2. Svelte 组件中如何使用 TypeScript？

   • 在 <script> 标签中添加 lang="ts"，然后编写类型安全的代码。

3. 什么是 lang="ts"？它的作用是什么？

   • 告诉 Svelte 编译器当前脚本使用 TypeScript 语法，启用类型检查。

4. 如何在组件中定义 props 的类型？

   • 使用 export let propName: Type; 或接口定义。

5. Svelte 是否支持泛型？

   • 是的，可在函数和组件中使用泛型 <T> 提高复用性。

6. 如何在 Svelte 中使用第三方 TypeScript 库？

   • 安装库本身及其类型定义文件（如 @types/xxx），然后在组件中导入使用。

7. SvelteKit 如何支持 TypeScript？

   • 内置支持，可通过 $types 自动生成页面类型定义。

8. 什么是 svelte-check？为什么需要它？

   • svelte-check 是一个静态类型检查工具，用于在构建前发现 TypeScript 错误。

9. 如何在事件中使用 TypeScript？

   • 使用 CustomEvent 类型定义事件参数，并在组件中使用 createEventDispatcher。

10. TypeScript 对 Svelte 项目的意义是什么？

    • 提升代码安全性、可读性、可维护性，适合大型项目与团队协作。

🎯 下一节预告：第19节 项目实战

主要内容：

• 构建一个完整的 Todo 应用或博客系统
• 实现 CRUD 功能（创建、读取、更新、删除）
• 登录认证与用户权限管理
• API 数据对接（RESTful / GraphQL）
• 表单验证与状态同步
• 使用 Svelte Store 管理全局状态
• 部署上线与性能优化建议

准备好动手打造你的第一个完整 Svelte 项目了吗？🚀🧩