TypeScript 集成

相关源文件

• documentation/docs/03-template-syntax/03-each.md
• documentation/docs/03-template-syntax/18-class.md
• packages/svelte/elements.d.ts
• packages/svelte/scripts/generate-version.js
• packages/svelte/src/ambient.d.ts
• packages/svelte/src/compiler/index.js
• packages/svelte/src/compiler/legacy.js
• packages/svelte/src/compiler/phases/1-parse/read/expression.js
• packages/svelte/src/compiler/phases/1-parse/read/script.js
• packages/svelte/src/compiler/phases/1-parse/state/element.js
• packages/svelte/src/compiler/phases/1-parse/state/tag.js
• packages/svelte/src/compiler/phases/2-analyze/css/css-warn.js
• packages/svelte/src/compiler/phases/2-analyze/index.js
• packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
• packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
• packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
• packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
• packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
• packages/svelte/src/compiler/phases/3-transform/index.js
• packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
• packages/svelte/src/compiler/phases/scope.js
• packages/svelte/src/compiler/phases/types.d.ts
• packages/svelte/src/compiler/types/index.d.ts
• packages/svelte/src/compiler/types/legacy-nodes.d.ts
• packages/svelte/src/compiler/types/template.d.ts
• packages/svelte/src/compiler/validate-options.js
• packages/svelte/src/index-client.js
• packages/svelte/src/index.d.ts
• packages/svelte/src/internal/client/dev/console-log.js
• packages/svelte/src/legacy/legacy-client.js
• packages/svelte/tests/parser-modern/samples/comment-before-function-binding/input.svelte
• packages/svelte/tests/parser-modern/samples/comment-before-function-binding/output.json
• packages/svelte/tests/runtime-legacy/shared.ts
• packages/svelte/tests/runtime-runes/samples/each-without-as/_config.js
• packages/svelte/tests/runtime-runes/samples/each-without-as/main.svelte
• packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/_config.js
• packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/main.svelte
• packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/_config.js
• packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/main.svelte
• packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js
• packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/server/index.svelte.js
• packages/svelte/tests/snapshot/samples/text-nodes-deriveds/index.svelte
• packages/svelte/tests/types/bindings.svelte
• packages/svelte/tests/types/component.ts
• packages/svelte/tests/validator/samples/comment-before-function-binding/errors.json
• packages/svelte/tests/validator/samples/comment-before-function-binding/input.svelte
• packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json
• packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/input.svelte
• packages/svelte/types/index.d.ts

本页面介绍了 Svelte 如何与 TypeScript 集成，涵盖了类型定义、组件类型接口以及 TypeScript 在编译过程中如何处理。有关错误和警告系统的更多信息，请参阅 错误和警告系统。

概述

Svelte 通过全面的类型定义提供一流的 TypeScript 支持，使开发人员能够创建类型安全的组件。Svelte 中的 TypeScript 集成涵盖了几个关键领域：

1. Svelte API 的类型定义
2. 组件的 props、事件和插槽类型接口
3. 编译过程中的 TypeScript 处理
4. Svelte 组件中对 TypeScript 的支持
5. Runes 模式下对 TypeScript 的支持

类型定义架构

Svelte 的 TypeScript 定义结构上支持 Svelte 4 的类式组件和 Svelte 5 的函数式组件。

来源：packages/svelte/types/index.d.ts1-523 packages/svelte/src/index.d.ts1-356 packages/svelte/elements.d.ts1-35 packages/svelte/src/ambient.d.ts1-10

组件类型接口

Svelte 提供了几个用于类型化组件的接口。其中最重要的两个是：

1. Component<Props, Exports, Bindings> - 用于 Svelte 5 组件（函数式）
2. SvelteComponent<Props, Events, Slots> - 用于 Svelte 4 组件（类式，已弃用）

组件接口

Component 接口是类型化 Svelte 5 组件的主要方式。

使用示例

实用类型

Svelte 提供了实用类型来从组件中提取信息：

1. ComponentProps<Component> - 从组件中提取 props 类型
2. Snippet<Parameters> - 用于 Svelte 的 snippet 功能的类型

来源：packages/svelte/types/index.d.ts138-172 packages/svelte/types/index.d.ts231-239 packages/svelte/types/index.d.ts272-296

Svelte 组件中的 TypeScript

在组件文件中使用 TypeScript

当 `