开发工具 vscode
众所周知，vue2+Typescript的开发体验很不好，不过为了尝鲜，咱还是可以搭一个小工程玩一玩，下面就是搭建工程的步骤，以及遇到的一系列坑点。
1. 创建一个vue工程
vue init webpack 项目名称<项目名字不能用中文>
现在我们就有一个vue项目了，下面我们就需要安装各种插件，让他支持Typescript.
2. 安装必要的插件
安装vue的官方插件
npm i vue-class-component vue-property-decorator --save
vue-class-component支持类风格的vue代码编写-
vue-property-decorator依赖于vue-class-component并对其进行强化,新增了如下7个装饰器和一个函数：@Emit@Inject@Model@Prop@Provide@Watch-
@Component(从vue-class-component继承) -
Mixins(vue-class-component提供的mixins帮助函数)
// ts-loader typescript 必须安装
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
-
ts-loaderTypescript的加载器，如果你是webpack3,请装3版本，比如3.5.0,如果你是webpack4，请装3以上的版本 -
typescript显而易见 -
tslint检查Typescript代码工具 -
tslint-loadertslint加载器 -
tslint-config-standardJavaScript标准样式的TSLint配置
3. 配置webpack
修改webpack.base.conf.js文件
entry: {
app: './src/main.js'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src')
}
}
修改为
entry: {
app: './src/main.ts' // main.js->main.ts
},
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'], // 增加.ts
alias: {
'@': resolve('src')
}
}
module.rules里增加如下配置
{
test: /\.ts$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader'
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
4. 添加vue的声明文件
Typescript默认不支持.vue结尾的文件，所以我们在import vue对象时会找不到，为了能正确引用，我们需要创建一个垫片。
根目录下添加vue.shim.d.ts文件，内容如下
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
接下来需要添加进tsconfig.json文件的include中，这样就能正确找到vue对象了。
5. 添加tsconfig.json文件
tsconfig.json存在的目录即为Typescript项目的根目录，tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。
生成命令
tsc --init
上面命令的前提是你全局安装了Typescript，如果没有，请先执行这条命令
npm update -g typescript
tsconfig.json初始化配置为
修改tsconfig.json文件
{
"include":[
"src/**/*",
"vue.shim.d.ts"
],
"exclude":["node_modules"],
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": [
"dom",
"es5",
"es2015.promise"
],
"allowJs": true,
"strict": true,
"baseUrl": "./",
"paths": {
"@/*":["src/*"]
},
"esModuleInterop": true,
"experimentalDecorators": true,
}
}
由于json文件不允许写注释，另辟一处，介绍一下各个属性的意思
{
"include":[], // 编译包含哪些文件
"exclude":[], // 编译排除哪些文件
"compilerOptions": { // 编译选项
"target": "es5", // 指定ECMAScript目标版本'ES3' (默认)，'ES5'，或'ES6'
"module": "commonjs", // 指定生成哪个模块系统代码
"lib": [ // 编译过程中需要引入的库文件的列表
"dom",
"es5",
"es2015.promise"
],
"allowJs": true, // 允许编译javascript文件。
"strict": true, // 严格模式
"baseUrl": "./", // 解析非相对模块名的基准目录。
"paths": { // 模块名到基于baseUrl的路径映射的列表
"@/*":["src/*"]
},
"esModuleInterop": true, // 支持CommonJS和ES模块之间的互操作性
"experimentalDecorators": true, // 实验性启用ES7装饰器支持。
}
}
6. 修改src下.js文件为.ts
初始化的vue项目会在src目录下有一个main.js文件，在src/router目录下有一个index.js文件，我们将其修改为ts文件
main.js -> main.ts
index.js -> index.ts
7. 运行yarn start
项目运行成功，但是会报错,不怕，你马上就要成功了！
这里是因为我们书写时省略了后缀名，而Typescript只能识别
.ts结尾的文件，
.vue结尾的文件，所以我们需要给他们加上
.vue后缀名即可
import App from './App' -> import App from './App.vue'
然后，我们再运行一遍，就不会报错了。但是这时候，我们的代码还都只是js代码，下面我们就把他们改写为ts代码。
8. 修改.vue文件
- 利用vue-class-component插件
原HelloWorld.vue中的js代码
修改为
到这里，我们的架子就已经初步搭建完成，当然这离完全体还有一段距离，不过，先让我们爽一爽，我们为它增加上生命周期，计算属性，方法等。
大家可以自己试一试，看看效果。
- 利用vue-property-decorator
然后，我们在上面的基础上再来修改一下我们的ts代码
// 可以看到这里Vue和Component都可以从vue-property-decorator插件中获取
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
// 初始化数据
msg = 123
// 生命周期钩子
mounted () {
this.greet()
}
// 计算属性
get computedMsg () {
return 'computed ' + this.msg
}
// 方法
greet () {
alert('greeting: ' + this.msg)
}
}
ok，现在我们已经可以初步编写我们的ts代码了，但是，有时候还会报一些其他错误，这多半是我们装的插件不够。。。
9. 添加其他额外插件
大家还记得TS里的修饰符么，当我们为一个变量添加修饰符时，就会报语法错误，这是因为js是不支持这种写法的，而我们原来的工程里只安装了eslint,所以为了兼容这种写法，我们需要给eslint增加tslint功能，那么怎么增加呢？
添加以下两个插件
npm i @typescript-eslint/parser --save-dev
npm i @typescript-eslint/eslint-plugin --save-dev
修改.eslintrc.js文件
parserOptions: {
parser: 'babel-eslint'
},
为
parserOptions: {
parser: '@typescript-eslint/parser'
},
至此，大功告成，大家已经可以愉快地编写ts代码了
10. 其他常见问题
- 引入第三方库
Typescript中引入第三方库除了要引用库本身外，还需引用库的声明文件
比如我想引入lodash库，那么我就要执行以下两条命令
npm i --save lodash
npm i --save @types/lodash
以@types开头的就表示声明文件
大多数情况下，类型声明包的名字总是与它们在npm上的包的名字相同，但是有@types/前缀， 如果你需要的话，你可以在 https://aka.ms/types这里查找你喜欢的库。
当然，你引用的库很可能暂时没有声明文件，如果你还想用他的话就需要自己写声明文件了，不过这不在本章的讨论范围类，大家可以自己研究下。
- 不支持下划线语法
有时候，接口返回的字段会是这样的
access_token
但是呢，我们的eslint默认要求所有变量遵循驼峰原则，即accessToken,这样的话，我们的编辑器就会报错，那么怎么解决呢？
我们找到根目录下的.eslintrc.js文件，他是负责eslint配置的，我们给他的rules对象增加一条属性
'camelcase':0
这样就关闭了eslint的驼峰检测了
ok，以上就是这篇要说的全部内容，如果，你已迫不及待，就打开vscode搭建一遍吧。
以下是一个已经搭建好的小demo
vue+typescript demo
参考链接/推荐阅读
- typescript官网 tsconfig章节
- vue + typescript 项目起手式
- 增强eslint的tslint插件