Svelte + TypeScript 模板说明

本模板可帮助你在 Vite 中快速上手使用 Svelte 和 TypeScript 进行开发。

推荐的 IDE 设置

VS Code + Svelte 扩展。

需要官方 Svelte 框架？

请查看 SvelteKit，它同样由 Vite 驱动。凭借其无服务器优先的方法，你可以将其部署到任何地方，并适配各种平台，开箱即用地支持 TypeScript、SCSS 和 Less，并且可以轻松添加对 mdsvex、GraphQL、PostCSS、Tailwind CSS 等的支持。

技术考量

为何使用此模板而非 SvelteKit？

• SvelteKit 自带路由解决方案，这可能不是某些用户的首选。
• 它首先是一个框架，恰好底层使用了 Vite，而不是一个 Vite 应用。

此模板尽可能精简，以便你快速上手 Vite + TypeScript + Svelte，同时兼顾了 HMR 和智能感知方面的开发者体验。它展示了与其他 create-vite 模板相当的能力，是初学者尝试 Vite + Svelte 项目的良好起点。

如果你日后需要 SvelteKit 提供的扩展功能和可扩展性，此模板的结构与 SvelteKit 相似，便于迁移。

为什么使用 global.d.ts 而不是在 jsconfig.json 或 tsconfig.json 中设置 compilerOptions.types？

设置 compilerOptions.types 会排除配置中未明确列出的所有其他类型。使用三斜线指令可以保持 TypeScript 默认接受整个工作区类型信息的设置，同时额外添加 svelte 和 vite/client 的类型信息。

为什么包含 .vscode/extensions.json？

其他模板通过 README 间接推荐扩展，而此文件允许 VS Code 在打开项目时提示用户安装推荐的扩展。

为什么在 TS 模板中启用 allowJs？

虽然 allowJs: false 确实能防止在项目中使用 .js 文件，但它不能防止在 .svelte 文件中使用 JavaScript 语法。此外，它会强制设置 checkJs: false，带来两方面的缺点：既无法保证整个代码库是 TypeScript，又会使现有 JavaScript 的类型检查变得更差。而且，混合代码库也有一些合理的用例。

为什么 HMR 不能保留我的本地组件状态？

HMR 状态保留存在许多隐患！由于 svelte-hmr 和 @sveltejs/vite-plugin-svelte 的行为常常出人意料，因此它们默认禁用了此功能。你可以阅读此处了解详情。

如果你有需要在组件中保留的重要状态，请考虑创建一个外部 store，这样它就不会被 HMR 替换。

// store.ts
// 一个极其简单的外部 store
import { writable } from 'svelte/store'
export default writable(0)