5分钟使用vue-cli2将typescript添加到项目中

前端

2023-10-31 09:32:46

我们最近将基于 vue-cli2 构建的项目中的 webpack3 升级到 webpack4，顺势还加入了typescript。

如今很多脚手架会在项目生成时提示您是否需要安装 typescript。比如 vue-cli3+。

但是，有些项目和需求注定与流行趋势格格不入，坚持使用较老版本的脚手架，这些项目仍有很多需求和问题需要解决，这就要求工程师们继续使用旧版脚手架。

所以今天，我会花五分钟时间，分享如何使用 vue-cli2 将 TypeScript 添加到您的项目中。

前提：本文假定您已具有基本的 vue-cli2 知识，并且您的项目已使用 webpack3。

安装 TypeScript
```
npm install --save-dev typescript
```

配置 tsconfig.json

在项目根目录下创建 tsconfig.json 文件，并添加以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": [
    "src"
  ]
}

在 webpack 中添加 TypeScript 支持

在 webpack.config.js 中添加以下内容：

module.exports = {
  // ...其他配置
  resolve: {
    extensions: ['.js', '.vue', '.ts']
  },
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ]
  }
};