Vue中怎么運(yùn)用TS語(yǔ)法

本文小編為大家詳細(xì)介紹“Vue中怎么運(yùn)用TS語(yǔ)法”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue中怎么運(yùn)用TS語(yǔ)法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

一、父子傳值的用法

父?jìng)髯樱篸efineProps的TS寫(xiě)法

// 父組件：和 vue2 一樣正常傳值
<template>
  <div class="login-page">
    <cp-nav-bar title="登錄" right-text="注冊(cè)"></cp-nav-bar>
  </div>
</template>

// 子組件：接收
<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps<{
  title: string
  rightText?: string // ？表示可傳可不傳
}>()
// js中使用
console.log(props.title)
</script>
 
<template>
  <!-- 模板中直接使用變量名 -->
  <van-nav-bar
    fixed
    left-arrow
    :title="title"
    :right-text="rightText"
  ></van-nav-bar>
</template>

補(bǔ)充：

如果需要給 props 設(shè)置默認(rèn)值，需要使用 withDefaults 函數(shù)：

const props = withDefaults(defineProps<{
  title?: string
  rightText?: string
}>(),{
  title: '首頁(yè)'
})
 
// 以上代碼通過(guò)語(yǔ)法糖解構(gòu)，可以?xún)?yōu)化成如下代碼：
const { title, title= "首頁(yè)" } = defineProps<{
  title?: string
  rightText?: string
}>();

子傳父：defineEmits的TS寫(xiě)法

// 子傳
const emit = defineEmits<{
  (e: 'changeMoney', money: number): void
  (e: 'changeCar', car: string): void
}>()
 
// 父組件：和 vue2 一樣正常接收
// @changeMoney="方法名"

二、ref/reactive的TS用法

1.簡(jiǎn)單數(shù)據(jù)類(lèi)型可以不定義ts類(lèi)型

ref() 會(huì)隱式的依據(jù)數(shù)據(jù)推導(dǎo)類(lèi)型

// const money = ref<number>(10)
const money = ref(10)

2.如果是復(fù)雜類(lèi)型，建議用泛型

type Todo = {
  id: number
  name: string
  done: boolean
}
const list = ref<Todo[]>([])
list.value = [
  { id: 1, name: '吃飯', done: false },
  { id: 2, name: '睡覺(jué)', done: true }
]

三、computed的TS用法 

推薦泛型，一行搞定

const total = computed<string>(() => (count.value * 2).toFixed(2));

四、非空斷言

1.可選鏈

<script setup lang="ts">
import { onMounted, ref } from 'vue';
 
const input = ref< HTMLInputElement | null >(null)
 
onMounted(()=>{
  // 如果獲取的元素不是input,就可能沒(méi)有value值
  console.log(input.value?.value);
})
</script>
 
<template>
  <div>App組件</div>
  <input type="text" ref="input" value="abc">
</template>

2.非空斷言

  // 一定要確定不為空?。?！
  console.log(input.value!.value)
  input.value!.value = '123'

五、自定義TypeScript類(lèi)型聲明文件

1.給JS文件提供類(lèi)型

在導(dǎo)入 .js 文件時(shí)，TS 會(huì)自動(dòng)加載與 .js 同名的 .d.ts 文件，以提供類(lèi)型聲明。

具體步驟如下:

1.declare 關(guān)鍵字：用于類(lèi)型聲明，為其他地方(比如，.js 文件)已存在的變量聲明類(lèi)型，而不是創(chuàng)建一個(gè)新的變量。

2.對(duì)于 type interface 等這些明確就是 TS 類(lèi)型的(只能在 TS 中使用的)，可以省略 declare 關(guān)鍵字。

3.其他 JS 變量，應(yīng)該使用 declare 關(guān)鍵字，明確指定此處用于類(lèi)型聲明。

// 參考示例:自定義組件的類(lèi)型,必須是同名的.d.ts文件
import CpIcon from '@/components/CpIcon.vue'
 
declare module 'vue' {
  interface GlobalComponents {
    CpIcon: typeof CpIcon
  }
}

2.共享類(lèi)型

如果多個(gè) .ts 文件中都用到同一個(gè)類(lèi)型，此時(shí)可以創(chuàng)建 .d.ts 文件提供該類(lèi)型，實(shí)現(xiàn)類(lèi)型共享。

1.創(chuàng)建 index.d.ts 類(lèi)型聲明文件。

2.創(chuàng)建需要共享的類(lèi)型，并使用 export 導(dǎo)出(TS 中的類(lèi)型也可以使用 import/export 實(shí)現(xiàn)模塊化功能)。

3.在需要使用共享類(lèi)型的 .ts 文件中，通過(guò) import 導(dǎo)入即可(.d.ts 后綴導(dǎo)入時(shí)，直接省略)。

讀到這里，這篇“Vue中怎么運(yùn)用TS語(yǔ)法”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。