关于Typtscript的类型注解

2023-07-18 10:53| 来源: 网络整理| 查看: 265

ref函数标注类型

通过泛型指定value的值类型：

如果是简单值，该类型可以省略，利用类型推导就可以。如果是复杂类型，指定泛型 // 1. 通过泛型指定value的值类型，如果是简单值，该类型可以省略 const money = ref(10) const money = ref(10) // 2. 复杂类型，推荐指定泛型 type Todo = { id: number name: string done: boolean } const list = ref([]) reactive函数类型

通过泛型参数的形式增加类型

import { reactive } from 'vue' type Person { name: string age: number | string } const p = reactive ({ name: 'ifer', age: 18, })

name: {{ p.name }}

age: {{ p.age }}

computed函数类型利用 TS 类型推导的能力（推荐）;通过泛型可以指定 computed 计算属性的类型。 import { ref, computed } from 'vue' const count = ref(100); const doubleMoney = computed(() => (count.value * 2).toFixed(2)); defineProps

父传子，把props传递给子组件内部使用。可以通过defineProps来接收

配合vue使用

defineProps配合vue默认语法进行类型校验（运行时声明）

// 运行时声明 const props = defineProps({ money: { type: Number, required: true }, car: { type: String, default: '小黄车' } })

配合TS使用

类型校验

defineProps配合ts的泛型定义props，这样更直接

// 使用ts的泛型指令props类型 const props = defineProps()

2. props可以通过解构来指定默认值

// 使用ts的泛型指令props类型 const { money, car = '小黄车' } = defineProps()

注意：

如果提供的默认值需要在模板中渲染，需要额外添加配置

// vite.config.js export default { plugins: [ vue({ reactivityTransform: true }) ] } defineEmits

在子传父的背景下，使用defineEmits

defineEmits配合运行时声明(简单) const emit = defineEmits(['change', 'update'])

2. defineEmits配合ts 类型声明，可以实现更细粒度的校验

const emit = defineEmits()

【本文地址】

公司简介

联系我们