快捷導(dǎo)航

Vue?3.0如何配置TypeScript支持(推薦)

更新時(shí)間：2023年12月07日 14:59:32 作者：鋜斗

隨著應(yīng)用的增長(zhǎng)，靜態(tài)類型系統(tǒng)可以幫助防止許多潛在的運(yùn)行時(shí)錯(cuò)誤，這就是為什么Vue 3是用TypeScript編寫的，本文給大家介紹Vue?3.0如何配置TypeScript支持，感興趣的朋友一起看看吧

前言

NPM 包中的官方聲明

隨著應(yīng)用的增長(zhǎng)，靜態(tài)類型系統(tǒng)可以幫助防止許多潛在的運(yùn)行時(shí)錯(cuò)誤，這就是為什么 Vue 3 是用 TypeScript 編寫的。這意味著在 Vue 中使用 TypeScript 不需要任何其他工具——它具有一流的公民支持。

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

Vue CLI 可以生成使用 TypeScript 的新項(xiàng)目，開(kāi)始：

# 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：

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

編輯器支持

對(duì)于使用 TypeScript 開(kāi)發(fā) Vue 應(yīng)用程序，我們強(qiáng)烈建議使用 Visual Studio Code，它為 TypeScript 提供了很好的開(kāi)箱即用支持。如果你使用的是單文件組件 (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
      }
    }
  }
})

與組合式 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<string | number>('2020') // year's type: Ref<string | number>
year.value = 2020 // ok!

類型聲明 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'
  }
})

到此這篇關(guān)于Vue 3.0如何配置TypeScript支持的文章就介紹到這了,更多相關(guān)vue3.0支持TypeScript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: