您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了在Vue.js中如何使用TypeScript,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“在Vue.js中如何使用TypeScript”這篇文章吧。
Vue是一套用于構(gòu)建用戶(hù)界面的漸進(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
則完全依賴(lài)于前者,提供了除 @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)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。