Vue3.x 即将来袭，使用 TypeScirpt 重构，TypeScript 将成为 vue 社区的标配，出于一名程序员的焦虑，决定现在 Vue2.6.x 踩一波坑。
vue 官方文档已经简略地对 typescript 的支持进行了介绍，我们使用 Vue Cli3 直接生成项目
创建项目
❓为什么使用 Vue Cli3 构建项目
官方维护，后续升级减少兼容性问题
使用以下配置进行项目的生成：
Babel 对 Ts 进行转译
TSLint 对 TS 代码进行规范，后续会使用 prettier 对项目进行编码的统一
默认安装 Vuex 和 Router , Router 使用 history 模式
使用 Jest 进行单元测试
╭─~/otherEWokspace ╰─➤ vue create ts-vuex-demo Vue CLI v3.6.3 ┌───────────────────────────┐ │ Update available: 3.9.3 │ └───────────────────────────┘ ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS P re-processors, Linter, Unit ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript for auto-detected polyfills? Yes ? Use history mode for router? (Requires proper server setup for index fallb ack in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are suppor ted by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: TSLint ? Pick additional lint features: (Press <space> to select, <a> to toggle all , <i> to invert selection)Lint on save ? Pick a unit testing solution: Jest ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In de dicated config files ? Save this as a preset for future projects? Yes ? Save preset as: ts-vue-demo
看一下新项目的层级目录
╭─~/otherEWokspace/ts-vuex-demo ‹master› ╰─➤ tree -L 2 -I node_modules . ├── README.md ├── babel.config.js ├── jest.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ ├── components │ ├── main.ts │ ├── router.ts │ ├── shims-tsx.d.ts │ ├── shims-vue.d.ts │ ├── store.ts │ └── views ├── tests │ └── unit ├── tsconfig.json └── tslint.json
tsconfig.json
对 lib 、 target 、 module 进行解释
{ "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", // 开启对 jsx 的支持 "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "types": [ "webpack-env", "jest" ], "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules" ] }
target --- 被 tsc 编译后生成 js 文件代码风格
module --- 被 tsc 编译后生成 js 文件的模块风格
lib --- 原 ts 文件支持的代码库
我们来看一下示例：
// index.ts export const Greeter = (name: string) => `Hello ${name}`;
"module": "commonjs", "target": "es5"
// index.js "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Greeter = function (name) { return "Hello " + name; };
"module": "es2015", "target": "es5"
// index.js export var Greeter = function (name) { return "Hello " + name; };
"module": "es2015", "target": "es6"
// index.js export const Greeter = (name) => `Hello ${name}`;
"module": "commonjs", "target": "es6"
// index.js "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Greeter = (name) => `Hello ${name}`;
如果lib没有指定默认注入的库的列表。默认注入的库为：
针对于 target:ES5：DOM，ES5，ScriptHost
针对于 target:ES6：DOM，ES6，DOM.Iterable，ScriptHost
tslint
类似于 eslint ，对 ts 代码进行检测。
vscode 需要安装，并在 vscode 的用户配置中加入以下配置，用来在保存时自动解决 ts 的错误。
// settings.json "editor.codeActionsOnSave": { "source.fixAll.tsLint": true }
❗️ vue cli3 已经安装了tslint依赖
使用，对项目进行代码风格的统一和规范
npm i tslint-config-prettier -D
添加 tslint.json extends 字段如下：
"extends": ["tslint:recommended", "tslint-config-prettier"]
设置 vscode
勾选 tslintIntegration ，使 prittier 支持格式化 ts 文件
"editor.formatOnSave": true 保存时自动格式化
也可以使用 shift + option + f 进行格式化