建站
咨詢
售后
建站咨詢
新聞中心
Vue CLI 提供內(nèi)置的 TypeScript 工具支持。
#NPM 包中的官方聲明
隨著應(yīng)用的增長(zhǎng)，靜態(tài)類型系統(tǒng)可以幫助防止許多潛在的運(yùn)行時(shí)錯(cuò)誤，這就是為什么 Vue 3 是用 TypeScript 編寫的。這意味著在 Vue 中使用 TypeScript 不需要任何其他工具——它具有一流的公民支持。
#推薦配置
// tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
// 這樣就可以對(duì) `this` 上的數(shù)據(jù)屬性進(jìn)行更嚴(yán)格的推斷`
"strict": true,
"jsx": "preserve",
"moduleResolution": "node"
}
} 請(qǐng)注意，必須包含 strict: true (或至少包含 noImplicitThis: true，它是 strict 標(biāo)志的一部分) 才能在組件方法中利用 this 的類型檢查，否則它總是被視為 any 類型。
參見 TypeScript 編譯選項(xiàng)文檔查看更多細(xì)節(jié)。
#開發(fā)工具
#項(xiàng)目創(chuàng)建
Vue CLI 可以生成使用 TypeScript 的新項(xiàng)目，開始：
## 1. Install Vue CLI, 如果尚未安裝
npm install --global @vue/cli@next
## 2. 創(chuàng)建一個(gè)新項(xiàng)目, 選擇 "Manually select features" 選項(xiàng)
vue create my-project-name
## 3. 如果已經(jīng)有一個(gè)不存在TypeScript的 Vue CLI項(xiàng)目，請(qǐng)?zhí)砑舆m當(dāng)?shù)?Vue CLI插件：
vue add typescript 請(qǐng)確保組件的 script 部分已將語(yǔ)言設(shè)置為 TypeScript：
#編輯器支持
對(duì)于使用 TypeScript 開發(fā) Vue 應(yīng)用程序，我們強(qiáng)烈建議使用 Visual Studio Code，它為 TypeScript 提供了很好的開箱即用支持。如果你使用的是單文件組件 (SFCs)，那么可以使用很棒的 Vetur extension，它在 SFCs 中提供了 TypeScript 推理和許多其他優(yōu)秀的特性。
WebStorm 還為 TypeScript 和 Vue 提供現(xiàn)成的支持。
#定義 Vue 組件
要讓 TypeScript 正確推斷 Vue 組件選項(xiàng)中的類型，需要使用 defineComponent 全局方法定義組件：
import { defineComponent } from 'vue'
const Component = defineComponent({
// 已啟用類型推斷
})#與 Options API 一起使用
TypeScript 應(yīng)該能夠在不顯式定義類型的情況下推斷大多數(shù)類型。例如，如果有一個(gè)具有數(shù)字 count property 的組件，如果試圖對(duì)其調(diào)用特定于字符串的方法，則會(huì)出現(xiàn)錯(cuò)誤：
const Component = defineComponent({
data() {
return {
count: 0
}
},
mounted() {
const result = this.count.split('') // => Property 'split' does not exist on type 'number'
}
})如果你有一個(gè)復(fù)雜的類型或接口，你可以使用 type assertion 對(duì)其進(jìn)行強(qiáng)制轉(zhuǎn)換：
interface Book {
title: string
author: string
year: number
}
const Component = defineComponent({
data() {
return {
book: {
title: 'Vue 3 Guide',
author: 'Vue Team',
year: 2020
} as Book
}
}
})#注釋返回類型
由于 Vue 聲明文件的循環(huán)特性，TypeScript 可能難以推斷 computed 的類型。因此，你可能需要注釋返回類型的計(jì)算屬性。
import { defineComponent } from 'vue'
const Component = defineComponent({
data() {
return {
message: 'Hello!'
}
},
computed: {
// 需要注釋
greeting(): string {
return this.message + '!'
}
// 在使用setter進(jìn)行計(jì)算時(shí)，需要對(duì)getter進(jìn)行注釋
greetingUppercased: {
get(): string {
return this.greeting.toUpperCase();
},
set(newValue: string) {
this.message = newValue.toUpperCase();
},
},
}
})#注釋 Props
Vue 對(duì)定義了 type 的 prop 執(zhí)行運(yùn)行時(shí)驗(yàn)證。要將這些類型提供給 TypeScript，我們需要使用 PropType 強(qiáng)制轉(zhuǎn)換構(gòu)造函數(shù)：
import { defineComponent, PropType } from 'vue'
interface ComplexMessage {
title: string
okMessage: string
cancelMessage: string
}
const Component = defineComponent({
props: {
name: String,
success: { type: String },
callback: {
type: Function as PropType<() => void>
},
message: {
type: Object as PropType,
required: true,
validator(message: ComplexMessage) {
return !!message.title
}
}
}
}) 如果你發(fā)現(xiàn)驗(yàn)證器沒有得到類型推斷或者成員完成不起作用，那么用期望的類型注釋參數(shù)可能有助于解決這些問(wèn)題。
#與組合式 API 一起使用
在 setup() 函數(shù)中，不需要將類型傳遞給 props 參數(shù)，因?yàn)樗鼘?props 組件選項(xiàng)推斷類型。
import { defineComponent } from 'vue'
const Component = defineComponent({
props: {
message: {
type: String,
required: true
}
},
setup(props) {
const result = props.message.split('') // 正確, 'message' 被聲明為字符串
const filtered = props.message.filter(p => p.value) // 將引發(fā)錯(cuò)誤: Property 'filter' does not exist on type 'string'
}
})#類型聲明 ref
Refs 根據(jù)初始值推斷類型：
import { defineComponent, ref } from 'vue'
const Component = defineComponent({
setup() {
const year = ref(2020)
const result = year.value.split('') // => Property 'split' does not exist on type 'number'
}
})有時(shí)我們可能需要為 ref 的內(nèi)部值指定復(fù)雜類型。我們可以在調(diào)用 ref 重寫默認(rèn)推理時(shí)簡(jiǎn)單地傳遞一個(gè)泛型參數(shù)：
const year = ref('2020') // year's type: Ref
year.value = 2020 // ok! TIP
如果泛型的類型未知，建議將 ref 轉(zhuǎn)換為 Ref。
#類型聲明 reactive
當(dāng)聲明類型 reactive property，我們可以使用接口：
import { defineComponent, reactive } from 'vue'
interface Book {
title: string
year?: number
}
export default defineComponent({
name: 'HelloWorld',
setup() {
const book = reactive({ title: 'Vue 3 Guide' })
// or
const book: Book = reactive({ title: 'Vue 3 Guide' })
// or
const book = reactive({ title: 'Vue 3 Guide' }) as Book
}
}) #類型聲明 computed
計(jì)算值將根據(jù)返回值自動(dòng)推斷類型
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
name: 'CounterButton',
setup() {
let count = ref(0)
// 只讀
const doubleCount = computed(() => count.value * 2)
const result = doubleCount.value.split('') // => Property 'split' does not exist on type 'number'
}
})新聞名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0TypeScript支持
地址分享：http://www.dlmjj.cn/article/dphegep.html
