在Vue.js中使用TypeScript的方法

更新時間：2020年03月19日 11:05:15 作者：raptazure

這篇文章主要介紹了在Vue.js中使用TypeScript的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

雖然 vue2.x 對TypeScript的支持還不是非常完善，但是從今年即將到來的3.0版本在GitHub上的倉庫 vue-next 看，為TS提供更好的官方支持應(yīng)該也會是一個重要特性，那么，在迎接3.0之前，不妨先來看看目前版本二者的搭配食用方法吧~

創(chuàng)建項目

雖然GitHub上有各種各樣相關(guān)的Starter，但是使用 Vue CLI 應(yīng)該是目前相對比較好的方式，在使用 vue create 創(chuàng)建新項目時，對 preset 選擇 Manually select features 選項，之后添加 TypeScript
如果想在vue應(yīng)用中完整使用ES6中提供的類特性，那么在 class-style component syntax 處選擇Y（本文主要介紹選擇Y的情況）
對于 Babel 來說，一般情況選擇使用，而 linter / formatter 的具體選擇可根據(jù)項目需求，此處不多說明

進(jìn)入項目

創(chuàng)建完成后，看一看 package.json ，可以發(fā)現(xiàn) vue-class-component 和 vue-property-decorator 以及其他ts相關(guān)的modules都已被添加，其中： vue-class-component 可以讓你使用class-style語法創(chuàng)建組件，比如以下代碼：

<template>
 <div>
 <button @click="decrement">-</button>
 {{ count }}
 <button @click="increment">+</button>
 </div>
</template>

<script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'

 // Define the component in class-style
 @Component
 export default class Counter extends Vue {
 // Class properties will be component data
 count = 0

 // Methods will be component methods
 increment() {
  this.count++
 }

 decrement() {
  this.count--
 }
 }
</script>

而 vue-property-component 則完全依賴于前者，提供了除 @Component 外的其他幾種裝飾器，比如 @Prop

import { Vue, Component, Prop } from 'vue-property-decorator'

 @Component
 export default class YourComponent extends Vue {
 @Prop(Number) readonly propA: number | undefined
 @Prop({ default: 'default value' }) readonly propB!: string
 @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}

再來一個二者結(jié)合的簡單例子吧:

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <h1>{{ fullName }}</h1>
 <button @click="reverseStr()">Reverse</button>
 </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
 @Prop() private msg!: string;
 firstName = "rapt";
 lastName = "azure";

 mounted() {
 console.log('mounted');
 }

 // Computed property
 get fullName(): string {
 return this.firstName + this.lastName;
 }

 // Method
 reverseStr() {
 this.firstName = this.firstName.split('').reverse().join('');
 this.lastName = this.lastName.split('').reverse().join('');
 }

}
</script>

此時，你的vue項目已經(jīng)有fully-typed的可能了，當(dāng)然也會有更好的自動補(bǔ)全以及錯誤提示。
為了更好的確定類型，可以創(chuàng)建例如 interfaces 這樣的文件夾，充分利用ts的接口和類來使項目有更好的組織結(jié)構(gòu)，可讀性和維護(hù)性。

另一種選擇

其實(shí)當(dāng)然也可以不使用class風(fēng)格啦，這樣的話，就和平時熟悉的vue更為相似了，而對類型當(dāng)然也是完全支持的。
這里也提供一個簡單的例子吧~<template>

<div class="hello">
  <h1>{{ msg }}</h1>
  <h1>{{ test }}</h1>
 </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
 name: 'HelloWorld',
 props: {
  msg: String,
 },
 data() {
  return {
   test: "Hello from TS" as string
  }
 },
 methods: {
  pressMe(): string {
   return this.test + 'br'
  }
 }
});
</script>

其他的話

本文只是簡要探討了在Vue.js中使用TypeScript的可能性，更多的相關(guān)內(nèi)容在官方文檔里可以找到哦，或者也可以多去Github的Vue區(qū)，TS區(qū)逛逛呢~
TypeScript的出現(xiàn)為JavaScript的生態(tài)帶來了新活力，不管是前端三大框架Vue，React，Angular，還是Node系的后端框架比如Nest和Express，都在積極擁抱TS，希望以后整個生態(tài)會發(fā)展得越來越好吧~

總結(jié)

到此這篇關(guān)于在Vue.js中使用TypeScript的文章就介紹到這了,更多相關(guān)Vue.js使用TypeScript內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: