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: '首页'
})
// 以上代码通过语法糖解构，可以优化成如下代码：
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 文件)已存在的变量声明类型，而不是创建一个新的变量。
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 后缀导入时，直接省略)。
到此这篇关于Vue中如何运用TS语法的文章就介绍到这了,更多相关Vue运用TS语法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
