如何在Svelte 3.52中运行Typescript？原bat文件方案已失效

架构老林

2026-8-13

在Svelte 3.52中运行TypeScript的可行方案

现有项目适配步骤

如果是已有的Svelte项目，按以下步骤配置TypeScript支持：

安装核心依赖

npm install --save-dev typescript svelte-preprocess @tsconfig/svelte

配置tsconfig.json
在项目根目录创建或修改该文件：

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "$lib": ["src/lib"],
      "$lib/*": ["src/lib/*"]
    }
  },
  "include": ["src/**/*.d.ts", "src/**/*.svelte", "src/**/*.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

添加Node端TypeScript配置tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"] // 若用Rollup，替换为rollup.config.ts
}

配置Svelte预处理器
修改svelte.config.js：

import preprocess from 'svelte-preprocess';

export default {
  preprocess: preprocess({
    typescript: true
  })
};

启用组件内TypeScript
将Svelte组件的脚本块声明改为<script lang="ts">，示例：

<script lang="ts">
  let count: number = 0;
  const increment = (): void => {
    count++;
  };
</script>

<button on:click={increment}>Count: {count}</button>

启动项目
执行常规启动命令即可：

npm run dev

Rollup项目额外配置

如果你的项目使用Rollup而非Vite，需额外安装Rollup的TypeScript插件并修改配置：

npm install --save-dev @rollup/plugin-typescript

更新rollup.config.js：

import typescript from '@rollup/plugin-typescript';

export default {
  // ...其他已有配置
  plugins: [
    // ...其他已有插件
    typescript({
      sourceMap: true,
      inlineSources: true,
      tsconfig: './tsconfig.json'
    })
  ]
};