Vue.js 3.0 與 TypeScript 的強(qiáng)強(qiáng)聯(lián)合

Vue.js 3.0 將為 TypeScript 用戶(hù)帶來(lái)改進(jìn)的支持，包括對(duì)基於類(lèi)的組件的原生支持以及更好的類(lèi)型推斷。但您現(xiàn)在就可以使用 Vue 的命令行工具 Vue CLI 開(kāi)始使用 TypeScript 編寫(xiě) Vue 應(yīng)用。

基於類(lèi)的組件與 TypeScript 的優(yōu)勢(shì)

Vue.js 中的基於類(lèi)組件可以使用 TypeScript 類(lèi)編寫(xiě)，這可以提供更好的類(lèi)型檢查和可維護(hù)性?？梢允褂?vue-property-decorator 包中的 @Component 裝飾器聲明這些類(lèi)。

vue-property-decorator 包提供的其他裝飾器可以進(jìn)一步增強(qiáng)基於類(lèi)的組件。這些包括用於將 props 聲明為類(lèi)屬性的 @Prop，用於從類(lèi)方法發(fā)出事件的 @Emit，以及用於創(chuàng)建觀察者的 @Watch。

TypeScript 與 Vue.js 的優(yōu)勢(shì)

TypeScript 與Vue.js 結(jié)合使用具有多種優(yōu)勢(shì)，包括靜態(tài)類(lèi)型檢查以?xún)嵲绨l(fā)現(xiàn)錯(cuò)誤，更好的自動(dòng)完成、導(dǎo)航和重構(gòu)服務(wù)，以及為複雜應(yīng)用程序提供更結(jié)構(gòu)化和可擴(kuò)展的代碼庫(kù)。

去年九月，Evan You（Vue.js 的創(chuàng)建者）宣布了該庫(kù)下一個(gè)主要版本的計(jì)劃。 Vue 3.0 將為 TypeScript 用戶(hù)帶來(lái)改進(jìn)的體驗(yàn)，包括對(duì)基於類(lèi)的組件的原生支持，以及在編寫(xiě)代碼時(shí)對(duì)類(lèi)型推斷的更好支持。

好消息是，您無(wú)需等到 3.0 版本發(fā)布（預(yù)計(jì)在 2019 年第三季度）就可以開(kāi)始使用 TypeScript 編寫(xiě) Vue 應(yīng)用。 Vue 的命令行工具 Vue CLI 提供了使用預(yù)配置的 TypeScript 構(gòu)建工具啟動(dòng)項(xiàng)目的選項(xiàng)，並包含官方支持的 vue-class-component 模塊，允許您將 Vue 組件編寫(xiě)為 TypeScript 類(lèi)。

本文假設(shè)您已熟悉 Vue 和 TypeScript 的基礎(chǔ)知識(shí)。讓我們來(lái)看看您今天如何開(kāi)始利用靜態(tài)類(lèi)型和基於類(lèi)的組件。

創(chuàng)建 Vue TypeScript 項(xiàng)目

開(kāi)始使用 TypeScript 的一個(gè)障礙可能是配置必要的構(gòu)建工具。值得慶幸的是，Vue CLI 為我們解決了這個(gè)問(wèn)題。我們可以用它為我們創(chuàng)建一個(gè)項(xiàng)目，其中 TypeScript 編譯器已設(shè)置並準(zhǔn)備就緒。

讓我們簡(jiǎn)要介紹一下使用 TypeScript 支持創(chuàng)建新 Vue 項(xiàng)目的過(guò)程。

從終端/命令行（並假設(shè)您已安裝 Node.js）運(yùn)行以下命令以全局安裝 Vue CLI：

npm install -g @vue/cli

接下來(lái)，讓我們創(chuàng)建一個(gè)新項(xiàng)目，指定項(xiàng)目名稱(chēng)：

vue create vue-typescript-demo

這也將是安裝項(xiàng)目的子文件夾的名稱(chēng)。按 Enter 後，系統(tǒng)會(huì)提示您選擇默認(rèn)預(yù)設(shè)或手動(dòng)選擇要安裝的選項(xiàng)。

選擇手動(dòng)選項(xiàng)，您將看到進(jìn)一步的選項(xiàng)集。必要的選項(xiàng)當(dāng)然是 TypeScript，但您可能還想選擇 Vuex，因?yàn)樯葬嵛覀儗⒉榭匆恍┨囟?Vuex 的裝飾器。

選擇項(xiàng)目選項(xiàng)後，下一個(gè)屏幕將詢(xún)問(wèn)您是否要使用類(lèi)樣式組件語(yǔ)法。對(duì)此說(shuō)“是”。然後，系統(tǒng)會(huì)詢(xún)問(wèn)您是否要“與 TypeScript 一起使用 Babel 用於自動(dòng)檢測(cè)的 polyfills”。對(duì)於您將支持舊瀏覽器的項(xiàng)目來(lái)說(shuō)，這是一個(gè)好主意。根據(jù)需要回答其餘問(wèn)題，安裝過(guò)程應(yīng)該開(kāi)始。

關(guān)於編輯器/IDE 支持的說(shuō)明

許多代碼編輯器和 IDE 現(xiàn)在都支持 TypeScript。在付費(fèi)解決方案中，JetBrains 軟件（例如 WebStorm、PhpStorm）對(duì) Vue 和 TypeScript 都具有出色的支持。如果您正在尋找免費(fèi)的替代方案，我推薦的是 Microsoft 的 Visual Studio Code：結(jié)合 Vetur 擴(kuò)展，它提供了出色的自動(dòng)完成和類(lèi)型檢查。

基於類(lèi)的組件

讓我們首先看看如何使用類(lèi)編寫(xiě) Vue 組件。雖然此功能不限於 TypeScript，但使用基於類(lèi)的組件有助於 TS 提供更好的類(lèi)型檢查，並且在我看來(lái)，它使組件更簡(jiǎn)潔、更易於維護(hù)。

讓我們看看語(yǔ)法。如果您按照上一節(jié)中的步驟操作並使用 Vue CLI 創(chuàng)建了一個(gè)新項(xiàng)目，請(qǐng)進(jìn)入項(xiàng)目目錄，進(jìn)入 src 子文件夾，然後打開(kāi) App.vue。我們?cè)谶@裡感興趣的是 <script> 部分，因?yàn)樗桥c標(biāo)準(zhǔn) Vue 單文件組件 (SFC) 唯一不同的部分。

npm install -g @vue/cli

請(qǐng)注意，<script> 標(biāo)籤本身俱有設(shè)置為 ts 的 lang 屬性。這對(duì)於構(gòu)建工具和您的編輯器正確解釋代碼為 TypeScript 非常重要。

為了聲明基於類(lèi)的組件，您需要?jiǎng)?chuàng)建一個(gè)擴(kuò)展 Vue 的類(lèi)（此處它從 vue-property-decorator 包而不是 vue 模塊直接導(dǎo)入）。

類(lèi)聲明需要以 @Component 裝飾器開(kāi)頭：

vue create vue-typescript-demo

您可能已經(jīng)註意到來(lái)自 App.vue 組件的代碼中，裝飾器也可以接受一個(gè)對(duì)象，該對(duì)象可用於指定組件、props 和過(guò)濾器選項(xiàng)：

import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}

數(shù)據(jù)屬性

在聲明基於對(duì)象的組件時(shí)，您將熟悉必須將組件的數(shù)據(jù)屬性聲明為返回?cái)?shù)據(jù)對(duì)象的函數(shù)：

@Component
class MyComponent extends Vue {}

……而對(duì)於基於類(lèi)的組件，我們可以將數(shù)據(jù)屬性聲明為普通的類(lèi)屬性：

@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}

計(jì)算屬性

使用類(lèi)作為組件的另一個(gè)優(yōu)點(diǎn)是聲明計(jì)算屬性的更簡(jiǎn)潔的語(yǔ)法，使用 getter 方法：

{
  data: () => ({
    todos: [],
  })
}

同樣，您可以通過(guò)使用 setter 方法創(chuàng)建可寫(xiě)的計(jì)算屬性：

@Component
class TodoList extends Vue {
  todos: [];
}

方法

組件方法可以以類(lèi)似的簡(jiǎn)潔方式聲明，作為類(lèi)方法：

npm install -g @vue/cli

在我看來(lái)，聲明方法、數(shù)據(jù)屬性和計(jì)算屬性的簡(jiǎn)單語(yǔ)法使得編寫(xiě)和閱讀基於類(lèi)的組件比原始的基於對(duì)象的組件更好。

裝飾器

我們可以更進(jìn)一步，使用 vue-property-decorator 包提供的附加裝飾器。它為編寫(xiě)基於類(lèi)的組件提供了六個(gè)附加裝飾器：

• @Emit
• @Inject
• @Model
• @Prop
• @Provide
• @Watch

讓我們來(lái)看看您可能覺(jué)得最有用的三個(gè)。

@Prop

您可以使用 @Prop 裝飾器將您的 props 聲明為類(lèi)屬性，而不是將 props 配置對(duì)像傳遞給 @Component 裝飾器。

vue create vue-typescript-demo

與其他裝飾器一樣，@Prop 可以接受各種參數(shù)，包括類(lèi)型、類(lèi)型數(shù)組或選項(xiàng)對(duì)象：

import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}

與TypeScript 一起使用時(shí)，您應(yīng)該為您的prop 名稱(chēng)添加非空運(yùn)算符（!），以告訴編譯器prop 將具有非空值（因?yàn)門(mén)S 不知道這些值在初始化組件時(shí)將被傳遞到組件中）：

@Component
class MyComponent extends Vue {}

請(qǐng)注意，如上所示，如果您願(yuàn)意，完全可以將裝飾器和屬性聲明放在一行上。

@Emit

另一個(gè)方便的裝飾器是 @Emit，允許您從任何類(lèi)方法發(fā)出事件。發(fā)出的事件將使用方法的名稱(chēng)（camelCase 名稱(chēng)將轉(zhuǎn)換為 kebab-case），除非將替代事件名稱(chēng)傳遞給裝飾器。

如果方法返回值，則該值將作為事件的有效負(fù)載發(fā)出，以及傳遞給方法的任何參數(shù)。

@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}

上面的代碼將發(fā)出一個(gè) add-todo 事件，其有效負(fù)載為 this.newTodo 的值。

@Watch

使用此裝飾器創(chuàng)建觀察者非常簡(jiǎn)單。它接受兩個(gè)參數(shù)：被觀察的屬性的名稱(chēng)和一個(gè)可選的選項(xiàng)對(duì)象。

{
  data: () => ({
    todos: [],
  })
}

總結(jié)

我希望本文向您展示了開(kāi)始使用 TypeScript 編寫(xiě) Vue 應(yīng)用並不一定很費(fèi)力。通過(guò)使用 CLI 啟動(dòng)新項(xiàng)目，您可以快速設(shè)置必要的構(gòu)建工具。包含對(duì)基於類(lèi)的組件的支持以及附加的裝飾器將使您能夠立即編寫(xiě)簡(jiǎn)潔、慣用的 TypeScript！

想從頭開(kāi)始學(xué)習(xí) Vue.js 嗎？使用 SitePoint Premium 獲取涵蓋基礎(chǔ)知識(shí)、項(xiàng)目、技巧和工具以及更多內(nèi)容的完整 Vue 書(shū)籍合集。立即加入，每月只需 9 美元，或試用我們的 7 天免費(fèi)試用版。

關(guān)於使用 TypeScript 的基於類(lèi)的 Vue.js 的常見(jiàn)問(wèn)題解答 (FAQ)

使用 TypeScript 與 Vue.js 的好處是什麼？

TypeScript 提供靜態(tài)類(lèi)型，這在開(kāi)發(fā)大型應(yīng)用程序時(shí)可能是一個(gè)顯著的優(yōu)勢(shì)。它有助於在開(kāi)發(fā)過(guò)程的早期捕獲錯(cuò)誤，使代碼更健壯且更易於維護(hù)。 TypeScript 還提供更好的自動(dòng)完成、導(dǎo)航和重構(gòu)服務(wù)，使開(kāi)發(fā)過(guò)程更高效。與 Vue.js 一起使用時(shí)，TypeScript 允許更結(jié)構(gòu)化和可擴(kuò)展的代碼庫(kù)，從而更易於管理和開(kāi)發(fā)複雜的應(yīng)用程序。

如何使用 TypeScript 設(shè)置 Vue.js 項(xiàng)目？

使用 TypeScript 設(shè)置 Vue.js 項(xiàng)目涉及幾個(gè)步驟。首先，如果您尚未安裝 Vue CLI，則需要安裝它。然後，使用 Vue CLI 創(chuàng)建一個(gè)新項(xiàng)目，並在創(chuàng)建過(guò)程中選擇 TypeScript 作為功能。 Vue CLI 將為您設(shè)置 TypeScript 配置。然後，您可以開(kāi)始使用 TypeScript 編寫(xiě) Vue 組件。

Vue.js 中的基於類(lèi)組件是什麼？

Vue.js 中的基於類(lèi)組件是使用 ES6 類(lèi)定義組件的一種方法。這種方法可以使您的組件更易於閱讀和理解，尤其對(duì)於來(lái)自面向?qū)ο缶幊瘫尘暗拈_(kāi)發(fā)人員而言?；额?lèi)的組件也與 TypeScript 配合良好，允許您利用 TypeScript 的功能，如靜態(tài)類(lèi)型和接口。

如何使用 TypeScript 在 Vue.js 中定義基於類(lèi)的組件？

要在 Vue.js 中使用 TypeScript 定義基於類(lèi)的組件，您需要使用 vue-class-component 裝飾器。此裝飾器允許您將組件編寫(xiě)為 ES6 類(lèi)。在類(lèi)中，您可以像在常規(guī) Vue 組件中一樣定義數(shù)據(jù)、方法和生命週期掛鉤。

我可以在基於類(lèi)的組件中使用 Vue.js 指令嗎？

是的，您可以在基於類(lèi)的組件中使用 Vue.js 指令。語(yǔ)法與常規(guī) Vue 組件中的語(yǔ)法相同。您可以在模板中使用 v-model、v-if、v-for 等指令。

如何在基於類(lèi)的組件中使用 props？

在基於類(lèi)的組件中，您可以使用 @Prop 裝飾器定義 props。此裝飾器允許您指定 prop 的類(lèi)型以及它是否必需或具有默認(rèn)值。

如何在基於類(lèi)的組件中使用計(jì)算屬性？

在基於類(lèi)的組件中，您可以將計(jì)算屬性定義為類(lèi)中的 getter 方法。 getter 方法的結(jié)果將被緩存，並且僅在其依賴(lài)項(xiàng)更改時(shí)重新計(jì)算。

如何在基於類(lèi)的組件中使用觀察者？

在基於類(lèi)的組件中，您可以使用 @Watch 裝飾器定義觀察者。此裝飾器允許您指定要觀察的屬性以及屬性更改時(shí)要調(diào)用的方法。

我可以在基於類(lèi)的組件中使用 mixin 嗎？

是的，您可以在基於類(lèi)的組件中使用 mixin。您可以將 mixin 定義為一個(gè)類(lèi)，然後使用 @Mixins 裝飾器將其包含在您的組件中。

如何將 Vue.js 組合式 API 與 TypeScript 一起使用？

Vue.js 組合式 API 與 TypeScript 配合良好。您可以在 setup 方法內(nèi)定義您的反應(yīng)式數(shù)據(jù)和函數(shù)，並使用 TypeScript 為其設(shè)置類(lèi)型。這使您可以利用 TypeScript 的靜態(tài)類(lèi)型和自動(dòng)完成功能，使您的代碼更健壯且更易於開(kāi)發(fā)。

以上是開(kāi)始在打字稿中寫(xiě)入基於類(lèi)的vue.js應(yīng)用的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！