SvelteKit项目：如何放置可通过$lib/types导入的自定义类型定义？

直接解决$lib/types导入的方案 #

要让import type {ExampleType} from '$lib/types'生效，你需要在src/lib/目录下创建对应的类型文件/文件夹：

• 方案1：创建单文件类型定义
  在src/lib/下新建types.ts，写入类型定义：

  // src/lib/types.ts
  export type ExampleType = {
    // 你的类型字段，比如：
    title: string;
    content: string;
    // ...其他自定义字段
  };
  

• 方案2：创建类型文件夹（推荐多类型场景）
  在src/lib/下新建types/目录，里面创建index.ts作为入口文件：

  // src/lib/types/index.ts
  export type ExampleType = {
    // 类型定义
  };
  

  后续新增类型可以放在types/下的子文件里，再通过index.ts统一导出，方便管理。

为什么之前app.d.ts的尝试没用？ #

app.d.ts是用来定义全局可访问类型的，不需要导入就能直接使用，和你用$lib/types导入的方式不匹配：
如果要通过app.d.ts使用ExampleType，应该这样写：

// src/app.d.ts
declare global {
  namespace App {
    type ExampleType = {
      // 类型定义
    };
  }
}

// 必须加这行，让文件被识别为模块
export {};

之后在组件里直接用const example: App.ExampleType = { ... }即可，无需导入。

更优的自定义类型管理方式 #

根据类型的使用范围，可以选择不同的组织方式：

• 集中式管理：适合跨组件通用的类型，用上面提到的src/lib/types/文件夹统一存放，通过$lib/types批量导入，结构清晰。
• 就近式管理：如果ExampleType仅属于Example.svelte组件，可以在组件同目录下新建Example.types.ts，组件内直接导入：

  // src/lib/Example.types.ts
  export type ExampleType = { /* ... */ };
  

  组件中导入：import type { ExampleType } from './Example.types'，类型和组件耦合度高，便于维护。
• 全局类型：通用程度极高的类型（比如全局状态类型），放在app.d.ts的App命名空间下，无需导入直接使用，减少重复代码。

注意事项 #

• 修改类型文件后如果VSCode仍报错，可通过快捷键Ctrl+Shift+P打开命令面板，执行TypeScript: Restart TS Server，比重启开发服务器更高效。
• SvelteKit默认已在tsconfig.json中配置$lib指向src/lib/，无需额外修改路径配置。

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