Vue 项目添加 TypeScript 支持

前言

如果原有项目 webpack 版本低于 4 ,建议直接用 vue-cli 新建项目然后把项目文件迁移过去

原有项目添加 TypeScript

1. 添加 TypeScript 及代码检查

   npm install typescript ts-loader tslint tslint-loader -D

2. 初始化 TypeScript 及代码检查配置
   详细配置

   • TypeScript
   • Tslint

   • 注: 推荐使用 Eslint 进行代码检查,这里是因为我操作的项目eslint 版本较低不支持 ts 代码检查

     ./node_modules/.bin/tsc --init
     ./node_modules/.bin/eslint --init

3. 修改 webpack 配置
   添加 .ts .tsx 用于搜索 ts 文件的扩展名

   resolve: {
       extensions: ['.ts', '.tsx', '.js', '.vue', '.json']
   }

   对于 ts 文件添加 loader 配置

   { // 加入对文件的ts识别
       test: /.ts$/,
       enforce: 'pre',
       loader: 'tslint-loader'
   },
   {
       test: /.tsx?$/,
       loader: 'ts-loader',
       options: {
         appendTsSuffixTo: [/.vue$/],
       }
   },

4. 添加 vue 对 ts 的支持

   npm install vue-property-decorator vue-class-component -S

5. 改造 vue 文件
   只需要在 script 标签加上 lang="ts"
   并且引入 vue-property-decorator

   具体用法参考 vue-property-decorator 在 npm 的介绍以及TypeScript文档

新项目添加 TypeScript

如果项目是vue-cli创建的可以直接使用vue add @vue/typescript 添加,具体可参考vue typescript 插件

1. 安装 vue-cli,已有 vue 脚手架 可以忽略直接进行下一步
   安装：

   npm install -g @vue/cli
   # OR
   yarn global add @vue/cli

2. 创建一个项目

   vue create my-project

3. 选择自定义配置
   
4. 选中 TypeScript
   
5. 选择代码风格格式化检测工具
   
6. 等待完成
   
7. 同样的具体用法

   参考 vue-property-decorator 在 npm 的介绍以及TypeScript文档