三分钟掌握ref reactive computed define props define emits 的类型注解

类型注解的作用: 

限制变量赋值的数据类型 并 给出提示

类型注解的语法:

变量：类型

1.ref函数类型

// 1. 通过泛型指定value的值类型，如果是简单值，该类型可以省略
// 如果是简单值，该类型可以省略，利用类型推导就可以
const money = ref<number>(10)

const money = ref(10)


// 2. 复杂类型，推荐指定泛型
type Todo = {
  id: number
  name: string
  done: boolean
}
const list = ref<Todo[]>([])

2.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>

reactive 对比 ref:

1. 相同点：都是用来生成响应式数据
2. 不同点

•         reactive不能处理简单类型的数据
  • ref参数类型支持更好，但是必须通过.value做访问修改
  • ref函数内部的实现依赖于reactive函数

https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js

function ref -> createRef -> new RefImpl -> constructor -> toReactive -> reactive

        3.在实际工作中的推荐 ：推荐使用ref函数，减少记忆负担

3.computed函数类型

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

import { ref, computed } from 'vue'
const count = ref(100);

const doubleMoney = computed<string>(() => (count.value * 2).toFixed(2));

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

import { ref, computed } from 'vue'

const count = ref(100);
const doubleCount = computed(() => count.value * 2);

4.defineProps

之前的:

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

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

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

配合TS使用

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

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

5.defineEmits

在子传父的背景下，使用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
}>()