開始在打字稿中寫入基於類的vue.js應用

Vue.js 3.0 與 TypeScript 的強強聯合

Vue.js 3.0 將為 TypeScript 用戶帶來改進的支持，包括對基於類的組件的原生支持以及更好的類型推斷。但您現在就可以使用 Vue 的命令行工具 Vue CLI 開始使用 TypeScript 編寫 Vue 應用。

基於類的組件與 TypeScript 的優勢

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

vue-property-decorator 包提供的其他裝飾器可以進一步增強基於類的組件。這些包括用於將 props 聲明為類屬性的 @Prop，用於從類方法發出事件的 @Emit，以及用於創建觀察者的 @Watch。

TypeScript 與 Vue.js 的優勢

TypeScript 與Vue.js 結合使用具有多種優勢，包括靜態類型檢查以儘早發現錯誤，更好的自動完成、導航和重構服務，以及為複雜應用程序提供更結構化和可擴展的代碼庫。

去年九月，Evan You（Vue.js 的創建者）宣布了該庫下一個主要版本的計劃。 Vue 3.0 將為 TypeScript 用戶帶來改進的體驗，包括對基於類的組件的原生支持，以及在編寫代碼時對類型推斷的更好支持。

好消息是，您無需等到 3.0 版本發布（預計在 2019 年第三季度）就可以開始使用 TypeScript 編寫 Vue 應用。 Vue 的命令行工具 Vue CLI 提供了使用預配置的 TypeScript 構建工具啟動項目的選項，並包含官方支持的 vue-class-component 模塊，允許您將 Vue 組件編寫為 TypeScript 類。

本文假設您已熟悉 Vue 和 TypeScript 的基礎知識。讓我們來看看您今天如何開始利用靜態類型和基於類的組件。

創建 Vue TypeScript 項目

開始使用 TypeScript 的一個障礙可能是配置必要的構建工具。值得慶幸的是，Vue CLI 為我們解決了這個問題。我們可以用它為我們創建一個項目，其中 TypeScript 編譯器已設置並準備就緒。

讓我們簡要介紹一下使用 TypeScript 支持創建新 Vue 項目的過程。

從終端/命令行（並假設您已安裝 Node.js）運行以下命令以全局安裝 Vue CLI：

npm install -g @vue/cli

接下來，讓我們創建一個新項目，指定項目名稱：

vue create vue-typescript-demo

這也將是安裝項目的子文件夾的名稱。按 Enter 後，系統會提示您選擇默認預設或手動選擇要安裝的選項。

選擇手動選項，您將看到進一步的選項集。必要的選項當然是 TypeScript，但您可能還想選擇 Vuex，因為稍後我們將查看一些特定於 Vuex 的裝飾器。

選擇項目選項後，下一個屏幕將詢問您是否要使用類樣式組件語法。對此說“是”。然後，系統會詢問您是否要“與 TypeScript 一起使用 Babel 用於自動檢測的 polyfills”。對於您將支持舊瀏覽器的項目來說，這是一個好主意。根據需要回答其餘問題，安裝過程應該開始。

關於編輯器/IDE 支持的說明

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

基於類的組件

讓我們首先看看如何使用類編寫 Vue 組件。雖然此功能不限於 TypeScript，但使用基於類的組件有助於 TS 提供更好的類型檢查，並且在我看來，它使組件更簡潔、更易於維護。

讓我們看看語法。如果您按照上一節中的步驟操作並使用 Vue CLI 創建了一個新項目，請進入項目目錄，進入 src 子文件夾，然後打開 App.vue。我們在這裡感興趣的是 <script></script> 部分，因為它是與標準 Vue 單文件組件 (SFC) 唯一不同的部分。

npm install -g @vue/cli

請注意，<script></script> 標籤本身俱有設置為 ts 的 lang 屬性。這對於構建工具和您的編輯器正確解釋代碼為 TypeScript 非常重要。

為了聲明基於類的組件，您需要創建一個擴展 Vue 的類（此處它從 vue-property-decorator 包而不是 vue 模塊直接導入）。

類聲明需要以 @Component 裝飾器開頭：

vue create vue-typescript-demo

您可能已經註意到來自 App.vue 組件的代碼中，裝飾器也可以接受一個對象，該對象可用於指定組件、props 和過濾器選項：

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

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

數據屬性

在聲明基於對象的組件時，您將熟悉必須將組件的數據屬性聲明為返回數據對象的函數：

@Component
class MyComponent extends Vue {}

……而對於基於類的組件，我們可以將數據屬性聲明為普通的類屬性：

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

計算屬性

使用類作為組件的另一個優點是聲明計算屬性的更簡潔的語法，使用 getter 方法：

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

同樣，您可以通過使用 setter 方法創建可寫的計算屬性：

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

方法

組件方法可以以類似的簡潔方式聲明，作為類方法：

npm install -g @vue/cli

在我看來，聲明方法、數據屬性和計算屬性的簡單語法使得編寫和閱讀基於類的組件比原始的基於對象的組件更好。

裝飾器

我們可以更進一步，使用 vue-property-decorator 包提供的附加裝飾器。它為編寫基於類的組件提供了六個附加裝飾器：

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

讓我們來看看您可能覺得最有用的三個。

@Prop

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

vue create vue-typescript-demo

與其他裝飾器一樣，@Prop 可以接受各種參數，包括類型、類型數組或選項對象：

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

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

與TypeScript 一起使用時，您應該為您的prop 名稱添加非空運算符（!），以告訴編譯器prop 將具有非空值（因為TS 不知道這些值在初始化組件時將被傳遞到組件中）：

@Component
class MyComponent extends Vue {}

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

@Emit

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

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

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

上面的代碼將發出一個 add-todo 事件，其有效負載為 this.newTodo 的值。

@Watch

使用此裝飾器創建觀察者非常簡單。它接受兩個參數：被觀察的屬性的名稱和一個可選的選項對象。

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

總結

我希望本文向您展示了開始使用 TypeScript 編寫 Vue 應用並不一定很費力。通過使用 CLI 啟動新項目，您可以快速設置必要的構建工具。包含對基於類的組件的支持以及附加的裝飾器將使您能夠立即編寫簡潔、慣用的 TypeScript！

想從頭開始學習 Vue.js 嗎？使用 SitePoint Premium 獲取涵蓋基礎知識、項目、技巧和工具以及更多內容的完整 Vue 書籍合集。立即加入，每月只需 9 美元，或試用我們的 7 天免費試用版。

關於使用 TypeScript 的基於類的 Vue.js 的常見問題解答 (FAQ)

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

TypeScript 提供靜態類型，這在開發大型應用程序時可能是一個顯著的優勢。它有助於在開發過程的早期捕獲錯誤，使代碼更健壯且更易於維護。 TypeScript 還提供更好的自動完成、導航和重構服務，使開發過程更高效。與 Vue.js 一起使用時，TypeScript 允許更結構化和可擴展的代碼庫，從而更易於管理和開發複雜的應用程序。

如何使用 TypeScript 設置 Vue.js 項目？

使用 TypeScript 設置 Vue.js 項目涉及幾個步驟。首先，如果您尚未安裝 Vue CLI，則需要安裝它。然後，使用 Vue CLI 創建一個新項目，並在創建過程中選擇 TypeScript 作為功能。 Vue CLI 將為您設置 TypeScript 配置。然後，您可以開始使用 TypeScript 編寫 Vue 組件。

Vue.js 中的基於類組件是什麼？

Vue.js 中的基於類組件是使用 ES6 類定義組件的一種方法。這種方法可以使您的組件更易於閱讀和理解，尤其對於來自面向對象編程背景的開發人員而言。基於類的組件也與 TypeScript 配合良好，允許您利用 TypeScript 的功能，如靜態類型和接口。

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

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

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

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

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

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

如何在基於類的組件中使用計算屬性？

在基於類的組件中，您可以將計算屬性定義為類中的 getter 方法。 getter 方法的結果將被緩存，並且僅在其依賴項更改時重新計算。

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

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

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

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

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

Vue.js 組合式 API 與 TypeScript 配合良好。您可以在 setup 方法內定義您的反應式數據和函數，並使用 TypeScript 為其設置類型。這使您可以利用 TypeScript 的靜態類型和自動完成功能，使您的代碼更健壯且更易於開發。

以上是開始在打字稿中寫入基於類的vue.js應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！