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

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

基于類的組件與 TypeScript 的優(yōu)勢(shì)

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

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

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

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

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

好消息是，您無(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 類。

本文假設(shè)您已熟悉 Vue 和 TypeScript 的基礎(chǔ)知識(shí)。讓我們來(lái)看看您今天如何開(kāi)始利用靜態(tà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)目名稱：

vue create vue-typescript-demo

這也將是安裝項(xià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è)屏幕將詢問(wèn)您是否要使用類樣式組件語(yǔ)法。對(duì)此說(shuō)“是”。然后，系統(tǒng)會(huì)詢問(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)完成和類型檢查。

基于類的組件

讓我們首先看看如何使用類編寫(xiě) Vue 組件。雖然此功能不限于 TypeScript，但使用基于類的組件有助于 TS 提供更好的類型檢查，并且在我看來(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 非常重要。

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

類聲明需要以 @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ì)于基于類的組件，我們可以將數(shù)據(jù)屬性聲明為普通的類屬性：

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

計(jì)算屬性

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

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

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

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

方法

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

npm install -g @vue/cli

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

裝飾器

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

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

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

@Prop

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

vue create vue-typescript-demo

與其他裝飾器一樣，@Prop 可以接受各種參數(shù)，包括類型、類型數(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 名稱添加非空運(yùn)算符（!），以告訴編譯器 prop 將具有非空值（因?yàn)?TS 不知道這些值在初始化組件時(shí)將被傳遞到組件中）：

@Component
class MyComponent extends Vue {}

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

@Emit

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

如果方法返回值，則該值將作為事件的有效負(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ù)：被觀察的屬性的名稱和一個(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ì)基于類的組件的支持以及附加的裝飾器將使您能夠立即編寫(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 的基于類的 Vue.js 的常見(jiàn)問(wèn)題解答 (FAQ)

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

TypeScript 提供靜態(tà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ā)復(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 中的基于類組件是什么？

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

如何使用 TypeScript 在 Vue.js 中定義基于類的組件？

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

我可以在基于類的組件中使用 Vue.js 指令嗎？

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

如何在基于類的組件中使用 props？

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

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

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

如何在基于類的組件中使用觀察者？

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

我可以在基于類的組件中使用 mixin 嗎？

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

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

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

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