Vue2.5项目使用TypeScript typed class启动报错如何解决？

错误原因 #

当前Vue2.5项目未配置TypeScript编译能力，你写的.ts文件中使用的类型标注语法（比如id:number）不属于原生JavaScript语法，webpack仅通过eslint-loader处理后无法识别这类语法，因此抛出解析错误。

方案1：老项目新增TS支持 #

需要安装相关依赖并修改配置，步骤如下：

• 安装所需npm包

  npm install typescript @vue/cli-plugin-typescript vue-class-component vue-property-decorator @typescript-eslint/parser @typescript-eslint/eslint-plugin @vue/eslint-config-typescript -D
  

• 根目录新增tsconfig.json配置文件

  {
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true,
      "jsx": "preserve",
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "forceConsistentCasingInFileNames": true,
      "sourceMap": true,
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      },
      "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
    },
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
    "exclude": ["node_modules"]
  }
  

• 修改ESLint配置文件
  将.eslintrc的解析器替换为TS专用解析器，同时扩展TS校验规则：

  {
    "parser": "vue-eslint-parser",
    "parserOptions": {
      "parser": "@typescript-eslint/parser",
      "ecmaVersion": 2020
    },
    "extends": ["plugin:vue/essential", "eslint:recommended", "@vue/typescript"]
  }
  

• 新增vue.config.js配置
  让webpack识别ts文件后缀：

  module.exports = {
    configureWebpack: {
      resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
      }
    }
  }
  

• 优化League类代码
  可以给构造函数入参也补充类型标注，提升类型校验完整性：

  interface ILeagueData {
    id: number;
    title: string;
    country_name: string;
    type: string;
    used: boolean;
  }
  
  export class League {
    id: number;
    title: string;
    country_name: string;
    type: string;
    used: boolean;
  
    constructor(data?: ILeagueData) {
      if (data) {
        this.id = data.id;
        this.title = data.title;
        this.country_name = data.country_name;
        this.type = data.type;
        this.used = data.used;
      } else {
        this.id = 0;
        this.title = '';
        this.country_name = '';
        this.type = '';
        this.used = false;
      }
    }
  }
  

方案2：新项目直接启用TS支持 #

新建项目时执行vue create 项目名，创建流程中选择「手动选择特性」，勾选TypeScript选项即可，生成的项目会自动完成所有TS相关配置，无需手动修改。

无依赖替代方案（无需引入TS） #

如果不想引入整套TS编译体系，仅需要IDE的类型提示能力，可以直接用JSDoc标注类型，不需要安装任何额外依赖，直接在.js文件中即可实现：

/**
 * @typedef {Object} ILeagueData
 * @property {number} id
 * @property {string} title
 * @property {string} country_name
 * @property {string} type
 * @property {boolean} used
 */

export class League {
  /** @type {number} */
  id;
  /** @type {string} */
  title;
  /** @type {string} */
  country_name;
  /** @type {string} */
  type;
  /** @type {boolean} */
  used;

  /**
   * @param {ILeagueData} [data]
   */
  constructor(data) {
    if (data) {
      this.id = data.id;
      this.title = data.title;
      this.country_name = data.country_name;
      this.type = data.type;
      this.used = data.used;
    } else {
      this.id = 0;
      this.title = '';
      this.country_name = '';
      this.type = '';
      this.used = false;
    }
  }
}

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