Vue3 TypeScript项目导入本地JS文件数组报TS7016错误如何解决？

问题原因 #

该报错的本质是 TypeScript 无法识别无类型声明的 .js 文件导出内容，不管是第三方包还是本地文件，只要没有对应的类型定义，同时项目开启了隐式 any 检查，就会触发 TS7016 错误。另外你定义的 HttpResponse 接口包含必填的 description 字段，但你导出的数组对象均未携带该字段，解决导入报错后也会触发类型不匹配错误。

解决方案 #

方案1（最推荐）：直接将JS文件改为TS文件加类型标注 #

这是成本最低、类型安全性最高的方案：

1. 将 httpResponses.js 重命名为 httpResponses.ts
2. 导入已定义的 HttpResponse 接口，给导出数组加类型，同时补全缺失的 description 字段，或调整接口字段为可选：

// 调整后的 interface.ts 可选字段写法（如果不需要必填description）
export interface HttpResponse {
  code: number;
  message: string;
  description?: string; // 加问号表示可选
}

// 调整后的 httpResponses.ts
import type { HttpResponse } from './interface'

export const httpResponses: HttpResponse[] = [
  {
    code: 301,
    message: "Moved Permanently",
    description: "资源被永久移动到新地址"
  },
  {
    code: 401,
    message: "Unauthorized",
    description: "请求未携带身份凭证或凭证无效"
  }
]

方案2：保留JS文件，新增同名类型声明文件 #

如果必须保留 .js 后缀的文件，在 httpResponses.js 同级目录新建 httpResponses.d.ts 声明文件，内容如下：

import type { HttpResponse } from './interface'
export declare const httpResponses: HttpResponse[]

TypeScript 会自动识别同名 .d.ts 文件作为对应JS文件的类型描述，即可解决导入报错。

方案3（不推荐）：关闭隐式any检查或跳过当前行检查 #

如果只需要临时绕开报错不需要类型保障，可以二选一：

• 在 tsconfig.json 中设置 "noImplicitAny": false，全局关闭隐式any校验，会损失大量类型安全提示，不建议。
• 在导入语句上方加单行注释 // @ts-ignore，跳过当前行的类型检查，只影响当前导入语句。

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