ts语法如何在Vue3中运用?
一、父子传值的用法
父传子: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: stringrightText?: string // ?表示可传可不传
}>()
// js中使用
console.log(props.title)
</script><template><!-- 模板中直接使用变量名 --><van-nav-barfixedleft-arrow:title="title":right-text="rightText"></van-nav-bar>
</template>
补充:
如果需要给 props 设置默认值,需要使用 withDefaults
函数:
const props = withDefaults(defineProps<{title?: stringrightText?: string
}>(),{title: '首页'
})// 以上代码通过语法糖解构,可以优化成如下代码:
const { title, title= "首页" } = defineProps<{title?: stringrightText?: 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: numbername: stringdone: 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'
1.给JS文件提供类型
在导入 .js 文件时,TS 会自动加载与 .js 同名的 .d.ts 文件,以提供类型声明。
具体步骤如下:
1.declare 关键字:用于类型声明,为其他地方(比如,.js 文件)已存在的变量声明类型,而不是创建一个新的变量。
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
文件中都用到同一个类型,此时可以创建 .d.ts
文件提供该类型,实现类型共享。
1.创建
index.d.ts
类型声明文件。2.创建需要共享的类型,并使用
export
导出(TS 中的类型也可以使用import/export
实现模块化功能)。3.在需要使用共享类型的
.ts
文件中,通过import
导入即可(.d.ts
后缀导入时,直接省略)。