如何为本地非JavaScript文件添加TypeScript类型声明？

针对你用Vite插件加载非JS/TS文件、需要为不同内容的文件提供对应TypeScript类型声明的需求，推荐以下几种可行方案：

1. 自动生成类型声明脚本（推荐） #

编写Node.js脚本批量扫描目标文件，根据文件内容生成对应的.d.ts文件，统一放到项目的类型目录下（比如src/types/generated）。

示例脚本逻辑：

// scripts/generate-types.js
const fs = require('fs');
const path = require('path');

const targetDir = './src/assets/custom-files'; // 你的非JS/TS文件目录
const outputDir = './src/types/generated';

// 确保输出目录存在
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

// 遍历目标目录生成类型声明
fs.readdirSync(targetDir).forEach(file => {
  const filePath = path.join(targetDir, file);
  const fileContent = fs.readFileSync(filePath, 'utf8');
  
  // 根据你的插件转换逻辑推导类型，此处以JSON结构为例
  const relativePath = path.relative('./src', filePath);
  const typeDeclaration = `declare module '${relativePath}' {
  export default ${JSON.stringify(fileContent)} as const;
}`;
  
  const outputPath = path.join(outputDir, `${file}.d.ts`);
  fs.writeFileSync(outputPath, typeDeclaration);
});

在tsconfig.json中配置typeRoots让TypeScript识别生成的类型：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

将脚本加入package.json的scripts方便运行：

{
  "scripts": {
    "generate-types": "node scripts/generate-types.js"
  }
}

2. 通配符声明+类型断言（临时快速方案） #

先给目标扩展名的文件声明基础unknown类型，导入时通过类型断言指定具体类型：

// src/types/custom-files.d.ts
declare module '*.your-ext' {
  const content: unknown;
  export default content;
}

导入时使用断言：

import config from './config.your-ext';
const typedConfig = config as { apiUrl: string; timeout: number };

3. Vite插件结合TS语言服务插件（进阶自动化方案） #

扩展你的Vite插件，实现TypeScript语言服务插件，动态根据文件内容返回类型信息。该方案无需生成额外文件，完全实时推导，但实现复杂度较高。

核心思路：

• 利用Vite的configureServer钩子获取文件内容
• 实现TS语言服务插件的getCompletionsAtPosition、getQuickInfoAtPosition等方法，根据文件内容返回对应类型

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