分享vue + vuex + typescript的一次项目代码重写
俗话说一个项目，用代码重写十次，每次肯定收益匪浅。后续还会持续重构ssr等。
在vue里使用ts，一般分为两种情况：
- 在vue-cli 3.0以下的老项目中。
- 在最新的vue-cli 3.0中。
vue-cli 3.0
在最新的vue-cli 3.0中使用typescript，可以说是非常方便了，因为添加了对ts的支持，用vue create 项目时，选第二项自定义配置添加对ts的支持就行了，另外别忘了把ts-lint语法检测也加上。至于如何安装vue-cli 3.0，去官方文档看下就知道了。如果你想把这种配置作为默认配置，文档也给出了相应的配置如下，这样你直接点第一个选项就会自动配置了。
被保存的 preset 将会存在用户的 home 目录下一个名为
.vuerc的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入
~/.vuerc。
项目初始化完后，就可以开箱即用了。看它的package.json文件，typescirpt 以及ts-loader帮你配置好了，还有vue-class-component，vue-property-decorator(点击进入github地址查看文档)这两个添加vue对ts支持的插件也安装好了，后者是前者的拓展版，一般选择后面那个即可，tsconfig.json和.d.ts文件也配置好了，差不多例子也会帮你写好了。当然例子所涉及的是远远不够的，可以去这两个插件的github仓库看下文档，使用起来非常简单，差不多是把以前vue那种黑盒子的写法去掉了一层包装加上了一层语法修饰器。详细的配置就放到下面的vue-cli 3.0以下步骤中写吧，也不用这么累赘了，毕竟下面的需要手动去配置。
vue-cli 3.0以下
首先初始化一个vue-cli 2.0的项目，文档也给出了相应的方法：
Vue CLI 3 和旧版使用了相同的
vue命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的vue init功能，你可以全局安装一个桥接工具：npm install -g @vue/cli-init # `vue init` 的运行效果将会跟 `[email protected]` 相同 vue init webpack my-project
没什么特殊要求，一路回车就好了，初始完项目，打开package.json文件看下其依赖，是不是特别的多，在看下script下的dev命令，是基于webpack-dev-server，也就是还是使用webpack加vue-loader就构成了vue-cli 2.0，所以插件需要一个一个装，并自动配置在package.json里。接下来就安装各种依赖了。
npm install typescript ts-loader --save-dev装好之后，如何配置的教程，在ts-loader的npm包文档和ts的官方文档中写的很详细，下面我说说我自己重构项目所用到的吧！
先要把ts-loader配置进webpack中，去webpack.config.js用vue-cli2.0也就是build文件夹里找到webpack.base.conf.js：
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'], // 这里加入.ts文件的解析,如果使用了tsx，一并加上
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},然后添加ts-loader：
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
}
},由于使用了语法检测，所以还需要这个文件里配置，再把入口文件改成.ts，去src目录下面把main.js改成main.ts：
const createLintingRule = () => ({
test: /\.(js|vue|ts|tsx)$/, // 配置好ts，tsx的语法检测支持
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})entry: {
app: './src/main.js' //改成.ts
},接下来要把项目重新运行起来，就要去ts官方文档看看了。同上讲下项目所涉及到的。
TypeScript使用tsconfig.json文件管理工程配置，所以需要在vue-cli第一层文件中加上这个文件。
文件的配置在ts官网项目配置也是做了很耐心的讲解，下面我讲下我所写的吧。
// tsconfig.json
{
// 需要编译的文件
"include": [
"src/**/*"
],
// 需要忽略编译的文件
"exclude": [
"node_modules"
],
// 编译器
"compilerOptions": {
// 包含的类型声明文件路径列表
"typeRoots": [
"node_modules/@types"
],
// 以严格模式解析
"strict": true,
// 允许从没有设置默认导出的模块中默认导入
"allowSyntheticDefaultImports": true,
// 启用装饰器
"experimentalDecorators": true,
// 禁用函数参数双向协变检查。
"strictFunctionTypes": false,
// 允许编译javascript文件
"allowJs": true,
// 采用的模块系统
"module": "esnext",
// 编译输出目标 ES 版本
"target": "es5",
// 如何处理模块
"moduleResolution": "node",
// 在表达式和声明上有隐含的any类型时报错
"noImplicitAny": true,
// 编译过程中需要引入的库文件的列表。
"lib": [
"dom",
"es5",
"es6",
"es7",
"es2015.promise"
],
"sourceMap": true,
// 给错误和消息设置样式，使用颜色和上下文。
"pretty": true
}
}
compilerOptions选项可以按照它给那个列表按需求加入，比如添加一些代码常量检测之类的。
如果你的项目里要使用一些npm包，第三方插件之类的，要为它们在ts中创建申明文件，比如你使用了vue。则需要创建个vue.vue-shims.d.ts。
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}详细使用可以看下文档。
然后把上面提到的vue-class-component，vue-property-decorator(点击进入github地址查看文档)这两个插件装好就可以了，编写规则在它们的github仓库有说明，后者是前者的拓展版，一般选择后面那个即可。
到这里基本上就能疯狂的撸ts代码了，是不是感觉很刺激，个人还是推荐直接用vue-cli 3.0，先别说对ts的支持，整个项目看起来也是非常的干净。
下面我贴几部分用ts写的.vue文件作为参考吧！详细的还请各位大爷移步github仓库查看。