我不想生命被時(shí)光遺忘,只能努力學(xué)習(xí).
一、 安裝依賴
- typescript@3.2.1
- ts-loader@5.3.1
- vue@2.5.17
- vue-loader@15.4.2
- vue-template-compiler@2.5.17
- vue-property-decorator@7.2.0
- webpack@4.26.1
- webpack-cli@3.1.2
這些庫大體作用
- vue-class-component：強(qiáng)化 Vue 組件，使用 TypeScript/裝飾器 增強(qiáng) Vue 組件
-
vue-property-decorator：在
vue-class-component上增強(qiáng)更多的結(jié)合 Vue 特性的裝飾器 -
ts-loader：TypeScript 為 Webpack 提供了
ts-loader，其實(shí)就是為了讓webpack識(shí)別 .ts .tsx文件
關(guān)于vue-property-decorator的詳細(xì)用法可以看我另一篇
vue-property-decorator用法
二、配置webpack
入口文件, 注意后綴是.ts
entry: {
index: './src/index.ts'
}
添加webpack對(duì).ts和.tsx的解析
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
ts-loader會(huì)檢索當(dāng)前目錄下的tsconfig.json 文件，根據(jù)里面定義的規(guī)則來解析.ts文件（就跟.babelrc的作用一樣）
三、添加 tsconfig.json
在根目錄下創(chuàng)建tsconfig.json文件
下面是一份參考的tsconfig.json配置
{
// 編譯選項(xiàng)
"compilerOptions": {
// 輸出目錄
"outDir": "./output",
// 是否包含可以用于 debug 的 sourceMap
"sourceMap": true,
// 以嚴(yán)格模式解析
"strict": true,
// 采用的模塊系統(tǒng)
"module": "esnext",
// 如何處理模塊
"moduleResolution": "node",
// 編譯輸出目標(biāo) ES 版本
"target": "es5",
// 允許從沒有設(shè)置默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入
"allowSyntheticDefaultImports": true,
// 將每個(gè)文件作為單獨(dú)的模塊
"isolatedModules": false,
// 啟用裝飾器
"experimentalDecorators": true,
// 啟用設(shè)計(jì)類型元數(shù)據(jù)（用于反射）
"emitDecoratorMetadata": true,
// 在表達(dá)式和聲明上有隱含的any類型時(shí)報(bào)錯(cuò)
"noImplicitAny": false,
// 不是函數(shù)的所有返回路徑都有返回值時(shí)報(bào)錯(cuò)。
"noImplicitReturns": true,
// 從 tslib 導(dǎo)入外部幫助庫: 比如__extends，__rest等
"importHelpers": true,
// 編譯過程中打印文件名
"listFiles": true,
// 移除注釋
"removeComments": true,
"suppressImplicitAnyIndexErrors": true,
// 允許編譯javascript文件
"allowJs": true,
// 解析非相對(duì)模塊名的基準(zhǔn)目錄
"baseUrl": "./",
// 指定特殊模塊的路徑
"paths": {
"jquery": [
"node_modules/jquery/dist/jquery"
]
},
// 編譯過程中需要引入的庫文件的列表
"lib": [
"dom",
"es2015",
"es2015.promise"
]
}
}
自己使用的配置
{
"compilerOptions": {
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"experimentalDecorators": true
},
"include": [
"./src/**/*"
]
}
讓 ts 識(shí)別 .vue
由于 TypeScript默認(rèn)并不支持*.vue 后綴的文件，所以在 vue項(xiàng)目中引入的時(shí)候需要?jiǎng)?chuàng)建一個(gè)vue-shim.d.ts文件，放在項(xiàng)目項(xiàng)目對(duì)應(yīng)使用目錄下，例如 src/vue-shim.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
意思是告訴 TypeScript *.vue 后綴的文件可以交給 vue模塊來處理。
而在代碼中導(dǎo)入*.vue文件的時(shí)候，需要寫上.vue后綴。原因還是因?yàn)?TypeScript 默認(rèn)只識(shí)別*.ts文件，不識(shí)別*.vue文件：
四、改造 .vue 文件
下面內(nèi)容需要掌握es7的裝飾器(decorator)
vue-property-decorator
vue-property-decorator 是在 vue-class-component 上增強(qiáng)了更多的結(jié)合 Vue 特性的裝飾器，新增了這 7 個(gè)裝飾器：
@Emit@Inject@Model@Prop@Provide@Watch
詳見官方文檔
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
@Component
export class MyComponent extends Vue {
@Prop()
propA: number = 1
@Prop({ default: 'default value' })
propB: string
@Prop([String, Boolean])
propC: string | boolean
@Prop({ type: null })
propD: any
@Watch('child')
onChildChanged(val: string, oldVal: string) { }
}
相當(dāng)于
export default {
props: {
propA: Number,
propB: {
type: String,
default: 'default value'
},
propC: [String, Boolean],
propD: { type: null }
}
methods: {
onChildChanged(val, oldVal) { }
},
watch: {
'child': {
handler: 'onChildChanged',
immediate: false,
deep: false
}
}
}
在 .vue 文件中使用
- 在
script標(biāo)簽上加上lang="ts", 意思是讓webpack將這段代碼識(shí)別為typescript而非javascript - 修改vue組件的構(gòu)造方式( 跟
react組件寫法有點(diǎn)類似, 詳見官方 )， 如下圖 - 用
vue-property-decorator語法改造之前代碼
