Vue 3.0 TypeScript支持

Vue CLI 提供內(nèi)置的 TypeScript 工具支持。

#NPM 包中的官方聲明

隨著應(yī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 部分已將語言設(shè)置為 TypeScript：

<script lang="ts">
  ...
</script>

#編輯器支持

對(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<ComplexMessage>,
      required: true,
      validator(message: ComplexMessage) {
        return !!message.title
      }
    }
  }
})

如果你發(fā)現(xiàn)驗(yàn)證器沒有得到類型推斷或者成員完成不起作用，那么用期望的類型注釋參數(shù)可能有助于解決這些問題。

#與組合式 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í)簡單地傳遞一個(gè)泛型參數(shù)：

const year = ref<string | number>('2020') // year's type: Ref<string | number>


year.value = 2020 // ok!

TIP

如果泛型的類型未知，建議將 ref 轉(zhuǎn)換為 Ref<T>。

#類型聲明 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<Book>({ 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'
  }
})