japanesenurse护士18高潮,电影久久久久久,国产freexxxx性播放

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

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

創(chuàng)建 Vue TypeScript 項目

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

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

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

npm install -g @vue/cli

接下來，讓我們創(chuàng)建一個新項目，指定項目名稱：

vue create vue-typescript-demo

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

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

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

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

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

基於類的組件

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

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

npm install -g @vue/cli

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

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

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

vue create vue-typescript-demo

您可能已經(jīng)註意到來自 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 {}

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

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

@Component
class MyComponent extends Vue {}

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

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

計算屬性

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

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

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

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

方法

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

npm install -g @vue/cli

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

裝飾器

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

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

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

`@Prop`

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

vue create vue-typescript-demo

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

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

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

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

@Component
class MyComponent extends Vue {}

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

`@Emit`

另一個方便的裝飾器是 @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ā)出一個 add-todo 事件，其有效負(fù)載為 this.newTodo 的值。

`@Watch`

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

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

總結(jié)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本網(wǎng)站聲明

本文內(nèi)容由網(wǎng)友自願投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請聯(lián)絡(luò)admin@php.cn