這篇文章主要為大家展示了在Vue.js中如何使用TypeScript，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“在Vue.js中如何使用TypeScript”這篇文章吧。

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為超過(guò)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為白塔企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、網(wǎng)站制作，白塔網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

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

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

• 雖然GitHub上有各種各樣相關(guān)的Starter，但是使用 Vue CLI 應(yīng)該是目前相對(duì)比較好的方式，在使用 vue create 創(chuàng)建新項(xiàng)目時(shí)，對(duì) preset 選擇 Manually select features 選項(xiàng)，之后添加 TypeScript

• 如果想在vue應(yīng)用中完整使用ES6中提供的類(lèi)特性，那么在 class-style component syntax 處選擇Y（本文主要介紹選擇Y的情況）

• 對(duì)于 Babel 來(lái)說(shuō)，一般情況選擇使用，而 linter / formatter 的具體選擇可根據(jù)項(xiàng)目需求，此處不多說(shuō)明

進(jìn)入項(xiàng)目

創(chuàng)建完成后，看一看 package.json ，可以發(fā)現(xiàn) vue-class-component 和 vue-property-decorator 以及其他ts相關(guān)的modules都已被添加，其中： vue-class-component 可以讓你使用class-style語(yǔ)法創(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
}

再來(lái)一個(gè)二者結(jié)合的簡(jiǎn)單例子吧:

<template>
 <div class="hello">
 <h2>{{ msg }}</h2>
 <h2>{{ fullName }}</h2>
 <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>

• 此時(shí)，你的vue項(xiàng)目已經(jīng)有fully-typed的可能了，當(dāng)然也會(huì)有更好的自動(dòng)補(bǔ)全以及錯(cuò)誤提示。

• 為了更好的確定類(lèi)型，可以創(chuàng)建例如 interfaces 這樣的文件夾，充分利用ts的接口和類(lèi)來(lái)使項(xiàng)目有更好的組織結(jié)構(gòu)，可讀性和維護(hù)性。

另一種選擇

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

<div class="hello">
  <h2>{{ msg }}</h2>
  <h2>{{ test }}</h2>
 </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>

其他的話

• 本文只是簡(jiǎn)要探討了在Vue.js中使用TypeScript的可能性，更多的相關(guān)內(nèi)容在 官方文檔 里可以找到哦，或者也可以多去Github的Vue區(qū)，TS區(qū)逛逛呢~

• TypeScript的出現(xiàn)為JavaScript的生態(tài)帶來(lái)了新活力，不管是前端三大框架Vue，React，Angular，還是Node系的后端框架比如Nest和Express，都在積極擁抱TS，希望以后整個(gè)生態(tài)會(huì)發(fā)展得越來(lái)越好吧~

以上就是關(guān)于“在Vue.js中如何使用TypeScript”的內(nèi)容，如果改文章對(duì)你有所幫助并覺(jué)得寫(xiě)得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)標(biāo)題：在Vue.js中如何使用TypeScript-創(chuàng)新互聯(lián)
文章URL：http://www.chinadenli.net/article18/dccddp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計(jì)公司、響應(yīng)式網(wǎng)站、做網(wǎng)站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)