引用类型声明文件

TypeScript 类型声明文件可通过多种方式引入项目。

compilerOptions.types

{
  "compilerOptions": {
    "types": [
      "vite/client",
      "node",
      "@types/node"
    ]
  }
}

注意：types 配置后只加载指定的类型声明，自动发现被禁用。

三斜线指令

/// <reference types="vite/client" />
/// <reference types="node" />

// 代码...

vite-env.d.ts 文件

/// <reference types="vite/client" />

// 自定义类型声明
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent
  export default component
}

全局类型声明

// env.d.ts
interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_APP_TITLE: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

扩展模块类型

// 扩展 .svg 文件类型
declare module '*.svg' {
  const content: string
  export default content
}

// 扩展图片文件类型
declare module '*.png' {
  const src: string
  export default src
}

类型声明文件位置

src/
├── vite-env.d.ts    # Vite 环境类型
├── env.d.ts         # 环境变量类型
└── types/
    ├── global.d.ts  # 全局类型
    └── modules.d.ts # 模块扩展类型

配置 include

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/vite-env.d.ts"
  ]
}

要点总结

• types 限制自动加载的类型声明
• 三斜线指令手动引用类型文件
• vite-env.d.ts 扩展 Vite 类型
• 可扩展模块类型声明