TypeScript开发Vue应用
# # TypeScript开发Vue应用
本文旨在帮助读者如何在Vue应用中配置TypeScript，使得使用TypeScript强类型验证开发Vue应用。
# # 快速开发
如果想一键快速搭建TypeScript的Vue环境，github (opens new window) (opens new window)有人对vue-cli添加了typescript模板，可直接用来开发。vue-cli官方也正在开发类似的模板。如果对配置TypeScript有兴趣或者对现有应用改造，请接着看下文。
vue-cli3工具中直接集成了Vue + TypeScript选项，推荐使用。
vue create xxx
1
2
2
以下为个人从基础的Webpack，到自定义搭建TypeScript应用的过程。
# # 1. 初始化项目
笔者使用vue-cli的master版本为基础，建立webpack项目。
vue init webpack my-project
1
2
2
# # 2. 引入TypeScript包
既然需要用到typescript，那就要加入一些core包和第三方支持包。
// 安装vue的官方插件
npm i vue-class-component vue-property-decorator --save
// ts-loader typescript 必须安装，其他的相信你以后也会装上的
npm i ts-loader typescript tslint-loader --save-dev
1
2
3
4
5
6
2
3
4
5
6
# # 3. 配置webpack
找到
./build/webpack.base.conf.js将文件
main.js改为main.ts,webpack.base.conf.js入口后缀也改下resove.extensions加入.ts
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {
'@': resolve('src')
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- 添加module.rules,使得webpack能解析.ts
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
- TypeScript 默认并不支持 *.vue 后缀的文件，创建
src/typing/vue-shim.d.ts文件, typescript会自动加载解析.d.ts后缀文件。
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
1
2
3
4
5
2
3
4
5
- 改造.vue文件，尝试改为ts写法。将
App.vue改为如下：
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
name: 'app'
})
export default class App extends Vue {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# # 4. ESLint支持TypeScript
TSLint不再被官方推荐，而使用[ESLint + Plugin]方式(https://github.com/typescript-eslint/typescript-eslint)替换。
# # 1. ESLint插件 - TypeScript
安装插件 + 配置（parse解析器），使得ESLint能约束TypeScript代码。官方github详细步骤 (opens new window) (opens new window)
- 必须包括的插件（必备）：（这里的插件只约束Lint格式，TypeScript源码编译还得依赖babel插件支持）
"typescript" // 必备
"@typescript-eslint/parser" // 该解析器可以利用ESLint的默认解析器，并且可以代替ESLint的默认解析器espree
"@typescript-eslint/eslint-plugin" // 特定于ESLint的插件，当与结合使用时@typescript-eslint/parser，可以运行特定于TypeScript的插入规则
1
2
3
4
2
3
4
- extends配置插件（可选）：提前设置的规则集合
"@vue/eslint-config-airbnb"
"@vue/eslint-config-standard"
"@vue/eslint-config-typescript"s
1
2
3
4
2
3
4
# # 2. ESLint配置
大部分于ESLint规则配置相似，最关键的：需要指定解析器："parser": "@typescript-eslint/parser"
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
// 可选配置文件
"plugin:vue/essential",
"@vue/standard",
"@vue/typescript"
],
"rules": {
// 具体规则，可替换上述配置文件的规则，优先级最高
"no-unused-vars": "off",
"no-console": "off",
"comma-dangle": "off",
"semi": "off",
"no-param-reassign": "off",
// @typescript-eslint/eslint-plugin插件：支持特定于ts的规则
"@typescript-eslint/no-var-requires": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/member-delimiter-style": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-use-before-define": "off",
"@typescript-eslint/camelcase": "off",
"@typescript-eslint/semi": "off"
},
"parserOptions": {
// 必备插件,识别ts语法
"parser": "@typescript-eslint/parser"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# # 参考文章
编辑 (opens new window)