Vue中如何運用TS語法
更新時間：2023年02月28日 10:51:48 作者：Her...
本文主要介紹了Vue中如何運用TS語法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
一、父子傳值的用法
父傳子：defineProps的TS寫法
// 父組件：和 vue2 一樣正常傳值
<template>
<div class="login-page">
<cp-nav-bar title="登錄" right-text="注冊"></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>
補充：
如果需要給 props 設置默認值，需要使用 withDefaults 函數：
const props = withDefaults(defineProps<{
title?: string
rightText?: string
}>(),{
title: '首頁'
})
// 以上代碼通過語法糖解構，可以優(yōu)化成如下代碼：
const { title, title= "首頁" } = defineProps<{
title?: string
rightText?: string
}>();
子傳父：defineEmits的TS寫法
// 子傳
const emit = defineEmits<{
(e: 'changeMoney', money: number): void
(e: 'changeCar', car: string): void
}>()
// 父組件：和 vue2 一樣正常接收
// @changeMoney="方法名"
二、ref/reactive的TS用法
1.簡單數據類型可以不定義ts類型
ref() 會隱式的依據數據推導類型
// const money = ref<number>(10) const money = ref(10)
2.如果是復雜類型，建議用泛型
type Todo = {
id: number
name: string
done: boolean
}
const list = ref<Todo[]>([])
list.value = [
{ id: 1, name: '吃飯', done: false },
{ id: 2, name: '睡覺', 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,就可能沒有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類型聲明文件
1.給JS文件提供類型
在導入 .js 文件時，TS 會自動加載與 .js 同名的 .d.ts 文件，以提供類型聲明。
具體步驟如下:
1.declare 關鍵字：用于類型聲明，為其他地方(比如，.js 文件)已存在的變量聲明類型，而不是創(chuàng)建一個新的變量。
2.對于 type interface 等這些明確就是 TS 類型的(只能在 TS 中使用的)，可以省略 declare 關鍵字。
3.其他 JS 變量，應該使用 declare 關鍵字，明確指定此處用于類型聲明。
// 參考示例:自定義組件的類型,必須是同名的.d.ts文件
import CpIcon from '@/components/CpIcon.vue'
declare module 'vue' {
interface GlobalComponents {
CpIcon: typeof CpIcon
}
}
2.共享類型
如果多個 .ts 文件中都用到同一個類型，此時可以創(chuàng)建 .d.ts 文件提供該類型，實現(xiàn)類型共享。
1.創(chuàng)建 index.d.ts 類型聲明文件。
2.創(chuàng)建需要共享的類型，并使用 export 導出(TS 中的類型也可以使用 import/export 實現(xiàn)模塊化功能)。
3.在需要使用共享類型的 .ts 文件中，通過 import 導入即可(.d.ts 后綴導入時，直接省略)。
到此這篇關于Vue中如何運用TS語法的文章就介紹到這了,更多相關Vue運用TS語法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要介紹了Vue3中關于路由規(guī)則的props配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中watch監(jiān)聽路由傳來的參數變化,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
vue 中基于html5 drag drap的拖放效果案例分析
本文通過三個案例給大家介紹了vue 中基于html5 drag drap的拖放效果 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue如何實現(xiàn)Json格式數據展示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
組件（Component）是 Vue.js 最強大的功能之一，之前的文章都只是用到了基本的封裝功能，這次將介紹一些更強大的擴展。這篇文章主要介紹了Vue.js實戰(zhàn)之組件進階的相關資料，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-04-04
這篇文章主要介紹了Vue自定義指令及使用，對Vue感興趣的同學，可以參考下2021-05-05
本文將詳細介紹前端性能優(yōu)化的7大手段，包括減少請求數量、減小資源大小、優(yōu)化網絡連接、優(yōu)化資源加載、減少重繪回流、使用性能更好的API和構建優(yōu)化2020-02-02
這篇文章主要介紹了Vue如何基于es6導入外部js文件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能
最近在使用element-ui的表格組件時,遇到了搜索框功能的實現(xiàn)問題,這篇文章主要給大家介紹了關于如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能的相關資料,需要的朋友可以參考下2023-03-03
vue-element-admin后臺生成動態(tài)路由及菜單方法詳解
vue-element-admin后臺管理系統(tǒng)模板框架 是vue結合element-ui一體的管理系統(tǒng)框架,下面這篇文章主要給大家介紹了關于vue-element-admin后臺生成動態(tài)路由及菜單的相關資料,需要的朋友可以參考下2023-09-09