一赵讯、改動點(diǎn)
1. 安裝依賴
- 如果不使用基于類的組件（使用基本組件）略過這步
vue-class-component ：官方維護(hù)的裝飾器
vue-property-decorator ：基于vue-class-component的裝飾器格嗅，社區(qū)維護(hù)npm install --save vue-class-component vue-property-decorator - 必須安裝
npm install --save-dev ts-loader typescript - 其他（eslint相關(guān)）
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
2. 修改webpack配置（vue.config.js）
configureWebpack: (config) => {
config.resolve.extensions.push('.ts'); // 添加ts擴(kuò)展文件：引用ts文件的時(shí)候不用寫后綴名
config.module.rules.push({ // 使用ts-loader對ts/tsx文件打包編譯
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/], // ts編譯器tsc不能識別.vue文件译秦，所以在 .vue文件后加.ts后綴
},
});
}
3. 根目錄下新建tsconfig.json文件（或者使用tsc --init自動生成）
compilerOptions用于確定如何編譯ts文件
使用官方/默認(rèn)配置即可米愿。
-
自定義配置參考：
"compilerOptions": { "target": "es5", // 指定ECMAScript目標(biāo)版本 "module": "commonjs", // 指定生成哪個(gè)模塊系統(tǒng)代碼 "allowJs": true, // 允許編譯js文件 "sourceMap": true, // 是否生成map文件 "strict": true, // 啟用所有嚴(yán)格類型檢查選項(xiàng) "noUnusedLocals": true, "baseUrl": ".", // 工作根目錄 "paths": { // 和webpack中resolve.alias配置一樣 "@/*": [ "src/*" ] }, "esModuleInterop": true, // 支持使用esm的方式引入commonjs包 "experimentalDecorators": true, // 啟用試驗(yàn)性的es裝飾器（如果要使用裝飾器的話） "skipLibCheck": true, // 忽略所有的聲明文件的類型檢查。 "forceConsistentCasingInFileNames": true. // 禁止對同一個(gè)文件的不一致的引用(將強(qiáng)制區(qū)分大小寫)擦酌。 }-
path路徑查找注釋：minimatch闺鲸，用來模式匹配字符串的庫。
- *匹配 0 個(gè)或多個(gè)字符赛糟，不包含目錄分隔符
- **/遞歸匹配任意子目錄
-
4. 修改.eslintrc.js文件：詳見（二派任、重構(gòu)問題/踩坑-Q2）
5. src根目錄下創(chuàng)建聲明文件支持引入.vue文件(必須)
// shims-vue.d.ts
//通配符聲明模塊
declare module '*.vue' {
import Vue from 'vue'; // import寫里面，不要寫外面（原因待補(bǔ)充）
export default Vue;
}
6. 支持this訪問vue原型上定義的功能(非必須)
// type.d.ts
import { default as Axios } from '@/plugins/axios.js'
declare module 'vue/types/vue'{
interface Vue {
$axios: Axios;
}
}
二璧南、重構(gòu)問題/踩坑
Q1：import Vue from 'vue' => Cannot find module ‘vue’.
原因
解決：tsconfig.json配置
"target": "es5",
"module": "es6",
修改為
"target": "es5",
"module": "commonjs",
Q2：.vue文件使用ts語法eslint報(bào)錯(cuò)
解決：修改.eslintrc文件(目前只針對特定重構(gòu)目錄使用ts解析掌逛，后面有更合適的配置會修改)
待解決：怎么對不同目錄下的文件分別使用不同的配置。
- （解決方式：在子目錄下配置自己的eslintrc文件司倚。層疊配置使用離要檢測的文件最近的 .eslintrc文件作為最高優(yōu)先級豆混，然后才是父目錄里的配置文件。配置沖突時(shí)动知，子目錄配置會覆蓋根目錄配置）eslint-Configuration Cascading and Hierarchy
overrides: [{
files: [
'**/financial_manage/**/*.ts',
'**/financial_manage/**/*.tsx',
'**/financial_manage/**/*.vue',
],
plugins: ['@typescript-eslint'],
parserOptions: {
parser: '@typescript-eslint/parser',
},
}],
Q3：使用this訪問定義在vue原型上的功能
解決：在type.d.ts文件進(jìn)行模塊補(bǔ)充（在shims-vue.d.ts聲明會使之前對.vue的聲明皿伺、自定義模塊的聲明等全部失效。）盒粮。重點(diǎn)是模塊補(bǔ)充和其他的分開兩個(gè)文件寫鸵鸥，也可以在shims-vue.d.ts中聲明原型上的方法屬性，在type.d.ts對.vue聲明ts識別處理vue文件丹皱。聲明文件名遵循xxx.d.ts就可以脂男。
原因：暫時(shí)不知道（待補(bǔ)充）
Q4：ts文件引入js報(bào)錯(cuò)
解決：
- 方法一：tsconfig.json設(shè)置allowJs:true
- 方法二：聲明文件中聲明模塊
- 方法三：使用require導(dǎo)入
三、tsconfig.json文件配置項(xiàng)
1. target种呐、module、lib
- ES版本：ES6 == ES2015 ES7 == ES2016 ES8 == ES2017 ESNext(泛指) == es最新版本的下一版本
- target：指定ECMAScript目標(biāo)版本
默認(rèn)值：ES3
選值："ES5"弃甥， "ES6"/ "ES2015"爽室， "ES2016"， "ES2017"或 "ESNext" - module: 指定生成哪個(gè)模塊系統(tǒng)代碼
默認(rèn)值：target === "ES6" ? "ES6" : "commonjs"
選值："None"淆攻， "CommonJS"阔墩， "AMD"， "System"瓶珊， "UMD"啸箫， "ES6"或 "ES2015" - lib：編譯過程中需要引入的標(biāo)準(zhǔn)庫文件的列表
默認(rèn)值： - target ES5：DOM，ES5伞芹，ScriptHost
- target ES6：DOM忘苛，ES6蝉娜，DOM.Iterable，ScriptHos - types：要包含的類型聲明文件名列表
默認(rèn)：所有可見的"@types"包會在編譯過程中被包含進(jìn)來扎唾；如果指定了types召川，只有被列出來的包才會被包含進(jìn)來
node_modules/@types中全局聲明文件意義的時(shí)候，盡量不要單獨(dú)設(shè)置types胸遇，可能會產(chǎn)生一些例如es語法無法匹配到標(biāo)準(zhǔn)庫的bug
