前言

Vue3.x 即將來襲，使用 TypeScirpt 重構，TypeScript 將成為 vue 社區的標配，出于一名程序員的焦慮，決定現在 Vue2.6.x 踩一波坑。

vue 官方文檔已經簡略地對 typescript 的支持進行了介紹，我們使用 Vue Cli3 直接生成項目

創建項目

❓為什么使用 Vue Cli3 構建項目

官方維護，后續升級減少兼容性問題

使用以下配置進行項目的生成：

╭─~/otherEWokspace╰─➤ vue create ts-vuex-demoVue 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 Pre-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 fallback in production) Yes? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 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 dedicated 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" ]}