TS类型声明之二

为 emits 标注类型

<script setup lang="ts">
// 运行时
const emit = defineEmits(['change', 'update'])
// 基于类型
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

import { defineComponent } from 'vue'
export default defineComponent({
  emits: ['change'],
  setup(props, { emit }) {
    emit('change') // <-- 类型检查 / 自动补全
  }
})

为 ref() 标注类型

 

默认推导类型

ref 会根据初始化时的值自动推导其类型：

1 2 3 4 5 6 7

import { ref } from 'vue' // 推导出的类型：Ref<number> const year = ref(2020) // => TS Error: Type 'string' is not assignable to type 'number'. year.value = '2020'

通过接口指定类型

有时我们可能想为 ref 内的值指定一个更复杂的类型，可以通过使用 Ref 这个接口：

1 2 3 4 5 6

import { ref } from 'vue' import type { Ref } from 'vue' const year: Ref<string | number> = ref('2020') year.value = 2020 // 成功！

通过泛型指定类型

或者，在调用 ref() 时传入一个泛型参数，来覆盖默认的推导行为：

1 2 3

// 得到的类型：Ref<string | number> const year = ref<string | number>('2020') year.value = 2020 // 成功！

如果你指定了一个泛型参数但没有给出初始值，那么最后得到的就将是一个包含 undefined 的联合类型：

1 2	// 推导得到的类型：Ref<number | undefined> const n = ref<number>()