Vue调用自定义Plan对象报错：找不到模块声明文件

方法一：添加类型声明文件（推荐） #

在Plan.js所在的model目录下，新建一个Plan.d.ts文件，写入以下内容：

// 定义Plan对象的类型接口
export interface PlanType {
  SK: string;
  selectPlan: string;
  selectPlanOthers: string;
  total: string;
  howTo: string;
  details: string;
  emailTo: string;
}

// 声明模块导出的Plan对象符合上面的类型
declare module './Plan' {
  export const Plan: PlanType;
}

保存后，TypeScript就能识别到模块的类型，报错会自动消失。

方法二：导入时使用类型断言 #

如果不想单独写声明文件，可以在导入时直接给Plan添加类型断言：

import Plan from './../model/Plan';

// 断言Plan的类型
const myPlan = Plan as {
  SK: string;
  selectPlan: string;
  selectPlanOthers: string;
  total: string;
  howTo: string;
  details: string;
  emailTo: string;
};

之后使用myPlan来操作对象即可，不过这种方式每次导入都要写一遍断言，适合临时场景。

方法三：将JS文件改为TS文件 #

直接把Plan.js重命名为Plan.ts，修改文件内容为TypeScript格式，自带类型定义：

export const Plan: {
  SK: string;
  selectPlan: string;
  selectPlanOthers: string;
  total: string;
  howTo: string;
  details: string;
  emailTo: string;
} = {
  SK: '',
  selectPlan: '',
  selectPlanOthers: '',
  total: '',
  howTo: '',
  details: '',
  emailTo: '',
};

修改后直接导入即可，无需额外处理类型。

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