如何配置SvelteKit自动生成的tsconfig.json中的include路径？

文件结构 #

- src
- foo
  - script.ts
- tsconfig.json
- .svelte-kit
  - tsconfig.json
    ...

需求与困境 #

想让/foo下的TypeScript文件像/src下的文件一样被处理（能直接使用/src中的类型）。直接修改.svelte-kit/tsconfig.json添加"../foo/**/*.ts"到include数组能实现，但SvelteKit重新生成配置时修改会丢失；在根目录tsconfig.json中添加include路径会覆盖.svelte-kit/tsconfig.json的设置，导致类型检查失效，因为嵌套TS配置无法追加include或exclude。

解决方案 #

方法1：正确配置根目录tsconfig.json的继承与include #

SvelteKit生成的.svelte-kit/tsconfig.json是根配置的基础，你可以在根tsconfig.json中继承它，同时保留默认的include项并追加foo目录，这样就不会覆盖原有配置：

{
  "extends": "./.svelte-kit/tsconfig.json",
  "include": [
    // 保留SvelteKit默认需要检查的文件
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.js",
    "src/**/*.svelte",
    // 追加foo目录下的TS文件
    "foo/**/*.ts"
  ]
}

这样TypeScript会同时处理src和foo下的文件，foo/script.ts就能正常引用src中的类型了。

方法2：通过别名配置优化导入（可选） #

如果需要在src中也能方便导入foo下的文件，可以配合Vite别名和TS路径映射：

1. 修改svelte.config.js，添加Vite别名：

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

export default {
  preprocess: vitePreprocess(),
  kit: {
    vite: {
      resolve: {
        alias: {
          '$foo': './foo'
        }
      }
    }
  }
};

2. 在根tsconfig.json的compilerOptions中添加路径映射：

{
  "extends": "./.svelte-kit/tsconfig.json",
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.js",
    "src/**/*.svelte",
    "foo/**/*.ts"
  ],
  "compilerOptions": {
    "paths": {
      "$foo/*": ["./foo/*"]
    }
  }
}

之后不管是src还是foo下的文件，都可以用import { xxx } from '$foo/xxx'来导入，类型检查也能正常工作。

内容的提问来源于stack exchange，提问作者Era