如何在VSCode中让JS文件像TS文件一样显示类型并规避类型注解报错

要解决这个问题，核心是让VSCode用TypeScript的类型检查机制处理JavaScript文件，同时用符合JS规范的方式添加类型注解，具体步骤如下：

1. 配置项目类型检查规则 #

在项目根目录创建jsconfig.json（纯JS项目）或tsconfig.json（混合JS/TS项目），开启JS文件的类型检查：

纯JS项目用jsconfig.json #

{
  "compilerOptions": {
    "checkJs": true, // 开启JS文件的类型检查
    "strict": false, // 按需开启严格模式，新手建议先设为false
    "target": "ESNext" // 根据项目实际环境调整目标版本
  },
  "include": ["**/*.js"] // 指定要检查的JS文件范围
}

混合JS/TS项目用tsconfig.json #

{
  "compilerOptions": {
    "allowJs": true, // 允许TS编译器处理JS文件
    "checkJs": true, // 开启JS文件的类型检查
    "strict": false,
    "target": "ESNext"
  },
  "include": ["**/*.js", "**/*.ts"]
}

配置完成后，VSCode会自动读取这个文件，不再抛出"Type annotations can only be used in TypeScript files."的错误，同时开始解析JS文件中的类型信息。

2. 用JSDoc添加类型注解 #

JavaScript文件不能直接使用TypeScript的: type语法，需要用JSDoc注释来定义类型，VSCode会识别这些注释并提供和TS一致的类型提示：

变量类型 #

/** @type {string} */
let username = "Alice";

/** @type {number[]} */
let scores = [90, 85, 95];

函数参数与返回值 #

/**
 * 计算两个数的和
 * @param {number} a 第一个加数
 * @param {number} b 第二个加数
 * @returns {number} 两个数的和
 */
function add(a, b) {
  return a + b;
}

自定义类型 #

如果你的types.js是用来定义公共类型的，可以用@typedef来声明：

// types.js
/**
 * @typedef {Object} User
 * @property {number} id 用户ID
 * @property {string} name 用户名
 * @property {boolean} isActive 是否激活
 */

// 在其他文件中引用
/** @type {import('./types.js').User} */
const currentUser = { id: 1, name: "Bob", isActive: true };

3. 调整VSCode校验设置（可选） #

如果依然存在校验报错，可以在VSCode的settings.json中调整：

{
  "javascript.validate.enable": false, // 关闭VSCode自带的JS校验
  "typescript.validate.enable": true // 启用TS校验来处理JS文件
}

这样配置后，VSCode就会像处理TypeScript文件一样，为你的JS文件提供类型补全、错误提示和重构支持。

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