掌握ref reactive computed defineProps defineEmits 的类型注解

使用TypeScript或Flow来为Vue组件中的属性、计算属性、方法和事件进行类型注解。

响应式数据(ref)的类型注解：

import { ref } from 'vue';
​
const count = ref<number>(0);
// |（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
const message = ref<string | null>(null);
const isEnabled = ref<boolean>(true);
// 2. 复杂类型，推荐指定泛型
type Todo = {
  id: number
  name: string
  done: boolean
}
const list = ref<Todo[]>([])

 

---

reactive的类型注解:

<script setup lang="ts">
    import {
        reactive
    } from 'vue'
​
    type Person {
        name: string
        age: number | string
    }
    const p = reactive <Person> ({
        name: 'ifer',
        age: 18,
    })
</script>
​
<template>
    <div>
        <p>name: {{ p.name }}</p>
        <p>age: {{ p.age }}</p>
    </div>
</template>

 

---

计算属性(computed)的类型注解：

利用 TS 类型推导的能力（推荐）

import { ref, computed } from 'vue'
​
const count = ref(100);
const doubleCount = computed(() => count.value * 2);

通过泛型可以指定 computed 计算属性的类型。

import { ref, computed } from 'vue'
const count = ref(100);
​
const doubleMoney = computed<string>(() => (count.value * 2).toFixed(2));

 

---

defineProps 父传子

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

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

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

配合TS使用

1. 类型校验

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

// 使用ts的泛型指令props类型
const props = defineProps<{ money: number, car?: string}>()

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

<script lang="ts" setup>
// 使用ts的泛型指令props类型
const { money, car = '小黄车' } = defineProps<{
  money: number
  car?: string
}>()
</script>

注意：

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

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

 

---

defineEmits 子传父

• defineEmits配合运行时声明(简单)

<script lang="ts" setup>
const emit = defineEmits(['change', 'update'])
</script>

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

const emit = defineEmits<{
  (e: 'changeMoney', money: number): void
  (e: 'changeCar', car: string): void
}>()