《TypeScript编程实战》12.1 Vue 3 组合式 API 类型

{
  "scripts": {
    "typecheck": "vue-tsc --noEmit -p tsconfig.app.json",
    "build": "vue-tsc --noEmit && vite build"
  }
}

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.vue"]
}

import { ref, reactive } from 'vue';

const count = ref(0);              // Ref<number>
const name = ref<string>();        // Ref<string | undefined>
const tags = ref<string[]>([]);    // Ref<string[]>
const user = reactive({ id: 1, name: 'ada' });
// user 的类型：{ id: number; name: string }

const state = reactive({ n: ref(0), list: [] as string[] });
state.n;      // number —— 嵌套的 Ref 被解包了
state.list;   // string[]

const { name: n } = user;  // n 的类型是 string，不是 Ref<string>
n = 'bob';                 // 改了，视图不更新，却没有任何类型错误

import { toRefs } from 'vue';

const { name: nameRef } = toRefs(user); // Ref<string>
nameRef.value = 'bob';                  // 正确触发更新

// ✗ 错误：宏不能包在函数里
function buildProps() {
  return defineProps<{ title: string }>(); // 编译期不替换 → 运行时 ReferenceError
}

<script setup lang="ts">
interface Props {
  title: string;
  count?: number;
  tags?: string[];
}
const props = withDefaults(defineProps<Props>(), {
  count: 0,
  tags: () => [],   // 对象 / 数组默认值必须用工厂函数
});
props.title;  // string
props.count;  // number（withDefaults 之后不再是 number | undefined）
</script>

<script setup lang="ts">
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 },
});
// props.title: string | undefined —— required 不参与类型推导
</script>

<script setup lang="ts">
const emit = defineEmits<{
  change: [id: number];
  submit: [payload: { name: string }];
}>();
</script>

emit('change');        // ✗ Expected 2 arguments, but got 1
emit('change', '1');   // ✗ Argument of type 'string' is not assignable to parameter of type 'number'
emit('rename', 1);     // ✗ Argument of type '"rename"' is not assignable to parameter of type '"change" | "submit"'

<template>
  <UserForm @change="(id) => console.log(id)" @submit="onSubmit" />
</template>

<script setup lang="ts">
// 等价于 props: modelValue + emit('update:modelValue')
const model = defineModel<string>();                            // ModelRef<string | undefined>
const count = defineModel<number>('count', { required: true }); // ModelRef<number>
const keyword = defineModel<string, 'trim'>();                  // 允许 .trim 修饰符
</script>

import { computed, watch, ref } from 'vue';

const first = ref('Ada');
const last = ref('Lovelace');

const full = computed(() => `${first.value} ${last.value}`);  // ComputedRef<string>
const upper = computed<string>(() => full.value.toUpperCase()); // 显式标注，防推成 string 字面量

const firstName = computed({
  get: () => full.value.split(' ')[0],
  set: (v: string) => { first.value = v; },
});

watch(count, (value, oldValue) => {
  // 首次（immediate）时 oldValue 是 undefined，类型上却写着 number
  if (oldValue === undefined) return;
  logger.debug('count changed', { from: oldValue, to: value });
}, { immediate: true });

import { ref, shallowRef } from 'vue';

export function useAsync<T>(fn: () => Promise<T>) {
  const data = ref<T | undefined>(undefined);  // Ref<T | undefined>
  const error = shallowRef<Error | undefined>(undefined);
  const loading = ref(false);
  async function run() {
    loading.value = true;
    error.value = undefined;
    try {
      data.value = await fn();
    } catch (e) {
      error.value = e instanceof Error ? e : new Error(String(e));
    } finally {
      loading.value = false;
    }
  }
  return { data, error, loading, run } as const;
}

const { data, loading } = useAsync(() => fetchJson<Post[]>('/api/posts'));
// data: Ref<Post[] | undefined>

import type { InjectionKey, Ref } from 'vue';
import { provide, inject, ref } from 'vue';

export type Theme = 'light' | 'dark';
export const themeKey: InjectionKey<Ref<Theme>> = Symbol('theme');

// 祖先组件
const theme = ref<Theme>('light');
provide(themeKey, theme);

// 后代组件
const injected = inject(themeKey);
if (!injected) throw new Error('themeKey 未提供');
injected.value; // Theme

const theme = inject(themeKey, ref<Theme>('light')); // Ref<Theme>

<script setup lang="ts">
import { ref } from 'vue';
interface Row { id: number; label: string }
const rows = ref<Row[]>([]);
function select(id: number) {}
</script>

<template>
  <ul>
    <li v-for="row in rows" :key="row.id" @click="select(row.id)">
      {{ row.label }}
    </li>
  </ul>
</template>

<input @input="(e) => console.log(e.target.value)" />

<input @input="(e) => console.log((e.target as HTMLInputElement).value)" />