vue3 中的类型标注

props 类型标注

<script setup lang="ts">
const props = defineProps<{
  foo: string;
  bar?: number;
}>();
</script>

也可以从另一个源文件中引入:

<script setup lang="ts">
import type { Props } from "./foo";

const props = defineProps<Props>();
</script>

props 解构默认值

export interface Props {
  msg?: string;
  labels?: string[];
}

const props = withDefaults(defineProps<Props>(), {
  msg: "hello",
  labels: () => ["one", "two"],
});

复杂 prop 类型

import type { PropType } from "vue";

interface Book {
  title: string;
  author: string;
  year: number;
}

const props = defineProps({
  book: Object as PropType<Book>,
});

ref 类型标注

import { ref } from "vue";

const year = ref<string | number>("2020");

year.value = 2020;

or

import { ref } from "vue";
import type { Ref } from "vue";

const year: Ref<string | number> = ref("2020");

year.value = 2020;

reactive 类型标注

import { reactive } from "vue";

interface Book {
  title: string;
  year?: number;
}

const book: Book = reactive({ title: "Vue 3 指引" });

computed 类型标注

import { ref, computed } from "vue";

const count = ref<number>(0);
const double = computed<number>(() => count.value);

模板引用类型标注

<script setup lang="ts">
import { ref, onMounted } from "vue";

const el = ref<HTMLInputElement | null>(null);

onMounted(() => {
  el.value?.focus();
});
</script>

<template>
  <input ref="el" />
</template>

组件模板引用

对于已知的 custom 组件，可以通过 typeof 得到其类型，再使用 InstanceType 工具类型来获取其实例类型

<!-- App.vue -->
<script setup lang="ts">
import MyModal from "./MyModal.vue";

const modal = ref<InstanceType<typeof MyModal> | null>(null);

const openModal = () => {
  modal.value?.open();
};
</script>

对于具体类型无法获得的情况，使用 ComponentPublicInstance

import { ref } from "vue";
import type { ComponentPublicInstance } from "vue";

const child = ref<ComponentPublicInstance | null>(null);

emits 类型标注

<script setup lang="ts">
const emit = defineEmits<{
  (e: "change", id: number): void;
  (e: "update", value: string): void;
}>();

// 3.3+ shorter
const emit = defineEmits<{
  change: [id: number];
  update: [value: string];
}>();
</script>

事件处理函数类型标注

function handleChange(event: Event) {
  console.log((event.target as HTMLInputElement).value);
}