在Vue 中使用Typescript的示例代碼

更新時(shí)間：2018年09月10日 09:28:06 作者：stone-lyl

這篇文章主要介紹了在Vue 中使用Typescript的示例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Vue 中使用 typescript

什么是typescript

typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語法。它很像JavaScript都強(qiáng)類型版本，除此之外，它還有一些擴(kuò)展的語法，如interface/module等。

typescript 在編譯期會去掉類型和特有語法，生成純粹的JavaScript。

Typescript 5年內(nèi)的熱度隨時(shí)間變化的趨勢，整體呈現(xiàn)一個(gè)上升的趨勢。也說明ts越來越?受大家的關(guān)注了。

安裝typescript

npm install -g typescript
tsc greeter.ts

舉個(gè)栗子

左右對比可以看出typescript 在編譯期會去掉類型和特有語法，生成純粹的JavaScript。

greeter.ts

interface Person {
 firstName: string;
 lastName: string;
}
function greeter(person: Person) {
 return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
greeter.js
function greeter(person) {
 return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Jane", lastName: "User" };

為什么需要使用它？

優(yōu)勢：

靜態(tài)類型檢查
IDE 智能提示
代碼重構(gòu)
可讀性

1. 靜態(tài)類型檢查

靜態(tài)類型檢查首要優(yōu)點(diǎn)就是能盡早的發(fā)現(xiàn)邏輯錯(cuò)誤，而不是上線之后才發(fā)現(xiàn)。

1.1 類型分析

傳參過程字段錯(cuò)誤，或類型錯(cuò)誤使用。（進(jìn)行參數(shù)標(biāo)注后，在編碼過程中即可檢查出錯(cuò)誤。)

1.2 類型推斷：函數(shù)的返回值可通過ts類型推斷得出.這一步驟是在編譯時(shí)進(jìn)行

在編譯時(shí)進(jìn)行類型分析

example：

eg1: 我在使用ts寫vue-router 的動(dòng)態(tài)路徑參數(shù)時(shí)就發(fā)現(xiàn)了一個(gè)問題, 動(dòng)態(tài)路徑參數(shù) 以冒號開頭 path: '/user/:id',我們會誤認(rèn)為id為一個(gè)number,如果使用ts你將得到提示我們應(yīng)該傳入一個(gè)string類型的id. 傳入一個(gè)number類型的id可能并不會出錯(cuò),js會對它進(jìn)行隱式類型轉(zhuǎn)換,但是傳入一個(gè)string會使它更安全和規(guī)范.

eg2: 個(gè)人使用后的效果

interface Person {
 firstName: string;
 lastName: string;
}
function greeter(person: Person): string {
 return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: 1223, lastname: "User" };
greeter(user);

2.智能補(bǔ)全

在編寫代碼時(shí)ide就會提示函數(shù)簽名.

interface Person {
 firstName: string;
 lastName: string;
}
/**
 * 問候語句
 * @param {Person} person
 * @returns {string}
 */
function greeter(person: Person): string {
 return "Hello, " + person.firstName + " " + person.lastName;
}
/**
 * hello word!
 *
 * @param {string} word
 * @returns {string}
 */
function Hello(word: string): string {
 return "hello," + word;
}
export { greeter, Hello };

直接將這個(gè)ts文件引入到其他ts文件中，不僅補(bǔ)全了所有的參數(shù)類型，還告訴你需要填入一個(gè)參數(shù)，并且你只有填入一個(gè)Person類型的對象才不會報(bào)錯(cuò)。(智能補(bǔ)全和參數(shù)校驗(yàn)）

3.在重構(gòu)上

動(dòng)態(tài)一時(shí)爽,重構(gòu)火/葬/場.

typescript 在重構(gòu)上的優(yōu)勢，我們主要從三方面說明。

1.重命名符號，可將一切引用的地方都進(jìn)行修改。

在vs code 中如果我們想修改函數(shù)、變量或者類的名稱,我們可以使用重命名符號的功能,在當(dāng)前項(xiàng)目中正確的修改所有的引用.這個(gè)既可以在ts中使用,也可以在js中使用，而它的底層實(shí)現(xiàn)都是依靠ts 的語法分析器實(shí)現(xiàn)的。

2.自動(dòng)更新引用路徑（vs code）。

在重構(gòu)的過程中，我們可能需要移動(dòng)文件的路徑，這往往會導(dǎo)致其他地方的import失效，這時(shí)候vs code提供了自動(dòng)更新引用路徑的功能。它的底層實(shí)現(xiàn)也是依靠ts 的語法分析器實(shí)現(xiàn)的。

3.校驗(yàn)函數(shù)簽名。

有時(shí)候我們會重構(gòu)類或函數(shù)的簽名，如果有引用到的地方忘記修改，除了運(yùn)行時(shí)候能發(fā)現(xiàn)，其他時(shí)候往往難以察覺，且 ESLint 也只能是排查簡單的問題，所以出了BUG會非常麻煩。而 TypeScript 不一樣，在編碼時(shí)就能及時(shí)的發(fā)現(xiàn)哪里錯(cuò)了，哪里應(yīng)該改動(dòng)但沒有修改。

[函數(shù)簽名 MDN][5]

4. 可讀性

可讀性上，TypeScript 明顯占優(yōu)，查看開源代碼時(shí)，如果注釋不是很完善，往往會看的云里霧里，而 TypeScript 在同等條件下，至少有個(gè)類型，能讓自己更容易明白代碼的參數(shù)、返回值和意圖。

TS+Vue初探

配置

在正式開發(fā)之前，我們需要了解一些基本的配置。

1.tsconfig.json 是 ts 項(xiàng)目的編譯選項(xiàng)配置文件. 在 ts 項(xiàng)目中如果你不添加這份文件，ts 會使用默認(rèn)的配置. 掃描二維碼獲取配置項(xiàng)目。

ts-loader：Webpack 的TypeScript 加載器，就是為了讓 webpack 編譯 .ts .tsx文件。
TSLint：.ts .tsx文件的代碼風(fēng)格檢查工具。（作用類似于ESLint）
vue-shim.d.ts：由于 TypeScript 默認(rèn)并不支持 *.vue 后綴的文件，所以在 vue 項(xiàng)目中引入的時(shí)候需要?jiǎng)?chuàng)建一個(gè) vue-shim.d.ts 文件，放在項(xiàng)目根目錄下，例如 src/vue-shim.d.ts。

在Vue里面寫TS的方式

圖中內(nèi)容應(yīng)寫在script中的lang="ts" 。

上圖：使用 Vue.extend的基礎(chǔ)用法。

下圖：基于類的Vue組件

通過對比我們發(fā)現(xiàn)，上面的編碼方式更接近我們平時(shí)JS的寫法，但是我們并不能感受到ts的類型檢查和類型推斷。

下面張圖的寫法更有助于我們得到ts的類型檢查。這需要我們引入 vue-class-component ，雖然template中還是不能得到補(bǔ)全，但是script 中的內(nèi)容得到了更好的補(bǔ)全。下面我們了解一下vue-class-component的作用。

vue-class-component & vue-property-decorator

vue-class-component 強(qiáng)化 Vue 組件，使用裝飾器語法使 Vue 組件更好的跟TS結(jié)合使用。

vue-property-decorator在 vue-class-component 的基礎(chǔ)上增加了更多與 Vue 相關(guān)的裝飾器，使Vue組件更好的跟TS結(jié)合使用。

這兩者都是離不開裝飾器的，（decorator）裝飾器已在ES提案中。Decorator是裝飾器模式的實(shí)踐。裝飾器模式呢，它是繼承關(guān)系的一個(gè)替代方案。動(dòng)態(tài)地給對象添加額外的職責(zé)。在不改變接口的前提下，增強(qiáng)類的性能。下面我們以鋼鐵俠為例講解如何使用 ES7 的 decorator。

以鋼鐵俠為例，鋼鐵俠本質(zhì)是一個(gè)人，只是“裝飾”了很多武器方才變得那么 NB，不過再怎么裝飾他還是一個(gè)人，它本質(zhì)是沒有被改變的。所以，裝飾器沒有改變其繼承關(guān)系，但也同樣能夠?yàn)樗砑雍芏鄥柡Φ募寄堋：唵蔚恼f，裝飾器是在不修改一個(gè)類的繼承關(guān)系的前提下，為一個(gè)類修改或添加成員。

裝飾器主要接收的三個(gè)參數(shù)：

target 要在其上定義屬性的對象。

key 要定義或修改的屬性的名稱。

descriptor 將被定義或修改的屬性描述符。

下面我們通過代碼中我們?yōu)橐粋€(gè)人添加了飛行的功能：

typescript VS JavaScript

了解了上面的基礎(chǔ)知識，現(xiàn)在我將同一段代碼分別使用js 和 ts來書寫，現(xiàn)在我們來對比他們之間的差別。

1.Props (Properties)

使用js，我們有很多中方式來定義組件的 Props，但是大多都摻雜了 Vue 的私有特征，與 ES 格格不入，例如左邊的代碼，明明我們是把這個(gè)對象的 prop 屬性定義成為了一個(gè)包含兩個(gè) string 元素的對象，但是我們卻可以直接通過這個(gè)對象來訪問 "name" 字段，這很明顯是不符合 ES 語義的。
再來看看右邊的 TS 選手，通過 Prop 裝飾器把指定的字段標(biāo)記為了 Prop，既保留了 ES 語法的語義，而且還能與 Vue 完美的配合，更棒的是，我們可以在編碼的過程中享受 TS 對 Prop 字段的靜態(tài)類型檢查。

2.Method 和 data

再來看看 Method，JS 中定義 method 還是有我們上面提到的那個(gè)不符合 ES 語義的毛病。而在 TS 中，method 不需要額外的裝飾器——實(shí)例方法就會自動(dòng)成為 Vue 組件的 method。類似的還有 data ，使用 TS 的語法，實(shí)例字段即可自動(dòng)成為 Vue 組件的 data。

3.Computed

在傳統(tǒng)的使用 JS 編寫的 Vue 代碼中，如果要定義計(jì)算屬性，我們需要在 computed 屬性中定義相應(yīng)的函數(shù)。而這在 ES 中其實(shí)早就已經(jīng)有了對應(yīng)語義的語法——getter，所以在使用了 vue-class-component 的 vue 組件中，我們可以直接使用 getter 來定義計(jì)算屬性，不管是在語法上還是在語義上，相比普通的 JS 都略勝一籌
總結(jié)：我們使用vue-class-component讓vue組件的定義更加符合ES語義，使得TS能夠更好的進(jìn)行語法分析，并基于此進(jìn)行類型檢查。

業(yè)務(wù)場景中使用TS + Vue

1. 在Vue項(xiàng)目中定義data和props

這樣的寫法，讓我產(chǎn)生了兩個(gè)疑惑。

1.1 為什么使用的寫法

@Prop(Number!:) propA!: number

而不是

@Prop(Number) propA: number

1.2 為什么Prop需要前后寫兩次類型？

自我自答環(huán)節(jié)：

答1.1：因?yàn)槲覀兌ㄒ粋€(gè)Phone這個(gè)類，沒有對phone、condition這些字段通過constructor進(jìn)行初始化，所以需要在屬性上使用顯式賦值斷言來幫助類型系統(tǒng)識別類型，這樣能夠讓屬性會被間接地初始化。

答1.2：前面括號里面的類型標(biāo)注是Vue提供的類型檢查。冒號后面的是為TS提供的類型標(biāo)注。

2. 編寫一個(gè)函數(shù)

這里我們將使用到j(luò)s的接口，它經(jīng)常用于定義復(fù)雜的參數(shù)類型和返回值類型。

上面的例子，我們需要為opts這個(gè)參數(shù)定義類型，方便后面編碼時(shí)的使用，這時(shí)我們就需要編寫一個(gè)接口來對它進(jìn)行類型定義。這個(gè)接口里面包括三個(gè)必須屬性和一個(gè)可選屬性。必須屬性在對象初始化的時(shí)候必須賦值，但是有時(shí)候某個(gè)對象中的屬性可以被忽略的，不一定會被需要。我們可以將它設(shè)置為可選項(xiàng)。

隨著業(yè)務(wù)的發(fā)展，一些參數(shù)的字段會變的越來越多，越來越復(fù)雜?？赡苣阆胗袥]有什么一勞永逸的方法，讓接口更加簡單，甚至讓它自動(dòng)的適應(yīng)業(yè)務(wù)的變化。于是我想出了這樣的代碼：

上面的代碼：定義了一個(gè)鍵為string，他的值為number或string類型的接口，并且該接口的所有字段都是可選的，你甚至可以傳入一個(gè)空對象。所以我們可以使用上面的接口可以代替下面的接口,但是反之不行.

然而我們不應(yīng)該去繞開這些檢查，因?yàn)檫@樣ts就不會為你檢查使用接口的對象應(yīng)該存在那些屬性或者方法了。使用ts的意義就被大大減弱了。

3. 編寫第三方依賴

在日常的開發(fā)過程中，我們經(jīng)常會遇到將第三方依賴引入到 TS 項(xiàng)目中沒有類型檢查的問題，這往往是因?yàn)檫@些項(xiàng)目沒有提供類型定義文件。這個(gè)時(shí)候，我們可以手動(dòng)為這些第三方庫編寫類型定義文件，類型定義文件在編譯后會被完全忽略，所以并不會對現(xiàn)有代碼產(chǎn)生影響。以上面這個(gè)較為復(fù)雜的函數(shù)為例，它的作用是將傳入的所有的參數(shù)的所有字段合并到一個(gè)新的對象中并返回，盡管他的功能比較簡單，但是為它編寫類型定義還是需要一些 TS 的技巧。

1. 外部模塊聲明：首先我們需要?jiǎng)?chuàng)建一個(gè)拓展名為 .d.ts 的文件，并在其中聲明一個(gè)模塊，聲明的模塊名稱需要跟我們在其他文件中引入的路徑相同。

2. 類型參數(shù)——泛型：首先讓我們考慮最簡單的情況，當(dāng)傳入一個(gè)參數(shù)的時(shí)候，extend 函數(shù)應(yīng)該返回與參數(shù)類型相同的對象，但是我們在編寫函數(shù)的時(shí)候并不知道用戶會傳入何種類型的參數(shù)，所以我們可以定義一個(gè)類型參數(shù) T1，這時(shí)，extend 就被稱為泛型函數(shù)，T1 也被稱做泛型參數(shù)。在上面的例子中，extend 函數(shù)接受一個(gè)類型為 T1 參數(shù)并返回一個(gè)類型為 T1 的值，T1 需要用戶手動(dòng)傳入，還好 TS 足夠聰明，在絕大多數(shù)情況下，TS 可以根據(jù)參數(shù)類型來自動(dòng)推斷類型參數(shù)，免去了我們輸入類型參數(shù)的繁瑣步驟。只接受一個(gè)參數(shù)的 extend 函數(shù)并沒有很復(fù)雜，我們可以繼續(xù)考慮一些更復(fù)雜的情況。

這次讓我們定義一個(gè)接受三個(gè)參數(shù)的 extend 函數(shù)，同時(shí)它也接受三個(gè)泛型參數(shù)，而它返回值類型呢，則是 T1, T2, T3 的交叉類型。交叉類型讓我們可以把現(xiàn)有的多種類型疊加到一起成為一種類型，它包含了所需的所有類型的特性，相當(dāng)于對這些類型的成員求并集。例如， T1 & T2 & T3 這個(gè)類型的對象同時(shí)擁有了這三種類型的成員。在這里，交叉類型就滿足了我們對 extend 函數(shù)返回值類型的要求。值得注意的是，實(shí)際的 extend 函數(shù)可以接受不定個(gè)數(shù)的參數(shù)，也就是說，我們?yōu)樗帉懙念愋投x也需要同時(shí)兼容接受不定個(gè)數(shù)參數(shù)的情況，這就需要 TS 提供的函數(shù)重載功能。

3. 重載：在大多數(shù)靜態(tài)類型編程語言中，編譯器允許存在參數(shù)類型、個(gè)數(shù)不同的多個(gè)同名函數(shù)，這個(gè)特性被稱為函數(shù)重載。TS 支持函數(shù)重載的特性，所以我們可以定義多個(gè)接受不同數(shù)量參數(shù)的 extend 方法，在用戶調(diào)用時(shí)，TS 會自動(dòng)的在這些同名函數(shù)中選擇正確的重載定義。有了函數(shù)重載的幫助，我們可以在使用 extend 的大多數(shù)場景下享受到類型檢查的好處，只有在參數(shù)個(gè)數(shù)超過4個(gè)的時(shí)候，TS 才無法推斷出返回值類型。需要注意的是在 JS 中，運(yùn)行時(shí)并不提供函數(shù)重載的能力，我們無法定義多個(gè)同名函數(shù)，即使他們接受的參數(shù)數(shù)量并不相同，為了實(shí)現(xiàn)函數(shù)重載的效果，開發(fā)人員需要手動(dòng)在單個(gè)函數(shù)中對參數(shù)的類型、數(shù)量做出判斷。