各位靓仔靓女们，晚上好！我是老码农一枚，今天咱就来聊聊 Vue 3 源码里那些让人又爱又恨的 TypeScript 骚操作，特别是 JSX/TSX 的类型检查和 VNode 类型推断，保证让你们听完之后，功力大增，腰不酸腿不疼，一口气能写十个组件！
开场白：TypeScript，Vue 3 的御用大保健
话说这年头，前端要是不会点 TypeScript，都不好意思跟人打招呼。Vue 3 拥抱 TypeScript，那可不是简单的“用了个类型”，而是从头到脚，每个毛孔都散发着类型安全的光芒。你想想，写代码的时候，编辑器能实时告诉你哪里写错了，这感觉，就像有个老司机在你旁边保驾护航，爽歪歪！
第一部分：JSX/TSX 的类型检查：让你的组件不再神秘
JSX/TSX，这玩意儿就是让 JavaScript 看起来像 HTML，写起来像 React。在 Vue 3 里，有了 TypeScript 的加持，JSX/TSX 的类型检查简直不要太香。
-
组件 Props 的类型推断：妈妈再也不用担心我传错参数了
以前写 Vue 组件，Props 都是字符串，写错了只有运行时才能发现，简直是噩梦。现在有了 TypeScript，我们可以用
defineProps定义 Props 的类型，就像这样：import { defineComponent } from 'vue'; interface Props { message: string; count?: number; // 可选属性 items: string[]; } export default defineComponent({ props: { message: { type: String, required: true, }, count: { type: Number, default: 0, }, items: { type: Array, default: () => [], validator: (value: any) => Array.isArray(value), }, }, setup(props: Props) { console.log(props.message); console.log(props.count); console.log(props.items); return () => ( <div> <h1>{props.message}</h1> <p>Count: {props.count}</p> <ul> {props.items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> </div> ); }, });看到了吗？
props: Props这玩意儿，就是告诉 TypeScript，props里面的属性必须符合Props接口的定义。如果你传错了类型，或者少了required的属性，编辑器会立刻给你报错，简直是强迫症的福音！ -
事件处理函数的类型：告别
any，拥抱精准以前写事件处理函数，参数类型都是
any，鬼知道里面是什么东西。现在，我们可以用 TypeScript 来定义事件对象的类型，让代码更加健壮：import { defineComponent } from 'vue'; export default defineComponent({ setup() { const handleClick = (event: MouseEvent) => { console.log(event.clientX, event.clientY); // 类型安全！ }; return () => ( <button onClick={handleClick}>Click Me</button> ); }, });看到了吗？
event: MouseEvent这就是告诉 TypeScript，event是一个MouseEvent对象，你可以直接访问它的clientX和clientY属性，不用担心类型错误。 -
JSX 元素属性类型推断:
import { defineComponent } from 'vue'; interface MyButtonProps { label: string; onClick: (event: MouseEvent) => void; } const MyButton = defineComponent({ props: { label: { type: String, required: true }, onClick: { type: Function, required: true } }, setup(props:MyButtonProps) { return () => ( <button onClick={props.onClick}>{props.label}</button> ); } }); export default defineComponent({ components: { MyButton }, setup() { const handleClick = (event: MouseEvent) => { alert('Button clicked!'); }; return () => ( <MyButton label="Click Me" onClick={handleClick} /> ); }, });这里，
MyButton组件接受label(string) 和onClick(function) 两个 props。TypeScript 会检查你使用MyButton组件时是否提供了正确的 props 类型。
第二部分：VNode 类型推断：让你的渲染函数更加智能
VNode，也就是 Virtual DOM 节点，是 Vue 渲染的核心。有了 TypeScript 的加持，VNode 的类型推断变得更加智能，让你的渲染函数更加强大。
-
h函数的类型推断：创造 VNode 的神器h函数是 Vue 3 中创建 VNode 的核心函数。它的类型定义非常复杂，但是 TypeScript 可以根据你传递的参数，自动推断出 VNode 的类型。import { h } from 'vue'; const vnode1 = h('div', { class: 'container' }, 'Hello, Vue!'); // 推断为 VNode<RendererNode, RendererElement, { [key: string]: any; }> const vnode2 = h('button', { onClick: () => alert('Clicked!') }, 'Click me'); // 推断为 VNode<RendererNode, RendererElement, { [key: string]: any; }> const vnode3 = h(MyComponent, { message: 'Hello from parent!' }); // 推断为 VNode<RendererNode, RendererElement, { [key: string]: any; }>看到了吗？TypeScript 可以根据你传递的标签名、属性和子节点，自动推断出 VNode 的类型。这意味着你可以在渲染函数中安全地操作 VNode，不用担心类型错误。
-
自定义渲染函数的类型：打造专属的渲染逻辑
Vue 3 允许你自定义渲染函数，来控制组件的渲染逻辑。有了 TypeScript，你可以为自定义渲染函数定义类型，让代码更加清晰和可维护。
import { defineComponent, h, VNode } from 'vue'; interface CustomProps { title: string; content: string; } const MyCustomComponent = defineComponent({ props: { title: { type: String, required: true, }, content: { type: String, required: true, }, }, setup(props: CustomProps) { const render = (): VNode => { return h('div', { class: 'custom-component' }, [ h('h2', props.title), h('p', props.content), ]); }; return render; // 返回渲染函数 }, });看到了吗？我们为
MyCustomComponent定义了一个CustomProps接口，并用它来约束props的类型。同时，我们为render函数定义了返回类型VNode，确保渲染函数返回的是一个合法的 VNode。
第三部分：Vue 3 源码中的 TypeScript 精髓：学习大佬的姿势
Vue 3 源码中，TypeScript 的应用简直是教科书级别的。我们可以从源码中学习到很多 TypeScript 的高级技巧，让我们的代码更加优雅和强大。
-
泛型的妙用：让你的组件更加灵活
Vue 3 源码中大量使用了泛型，来增强组件的灵活性。比如，
defineComponent函数就是一个泛型函数，它可以根据你传递的组件选项，自动推断出组件的类型。import { defineComponent, ComponentOptions } from 'vue'; interface MyComponentProps { message: string; } const MyComponent = defineComponent<MyComponentProps>({ props: { message: { type: String, required: true, }, }, setup(props) { console.log(props.message); return () => ( <div>{props.message}</div> ); }, });看到了吗？
defineComponent<MyComponentProps>这就是告诉 TypeScript，MyComponent组件的 Props 类型是MyComponentProps。这样，TypeScript 就可以对组件的 Props 进行类型检查，防止你传递错误的参数。 -
类型别名的艺术：让你的代码更加简洁
Vue 3 源码中使用了大量的类型别名，来简化复杂的类型定义。比如，
VNode类型就是一个类型别名，它代表一个 Virtual DOM 节点。import { VNode, RendererNode, RendererElement } from 'vue'; type MyVNode = VNode<RendererNode, RendererElement, { [key: string]: any; }>; const createMyVNode = (): MyVNode => { return h('div', 'Hello, World!'); };看到了吗？我们定义了一个类型别名
MyVNode，它等价于VNode<RendererNode, RendererElement, { [key: string]: any; }>。这样，我们就可以用MyVNode来代替复杂的类型定义，让代码更加简洁易懂。 -
条件类型的高级用法：让你的类型更加智能
Vue 3 源码中使用了条件类型，来根据不同的条件，选择不同的类型。比如，
ExtractPropTypes类型就是一个条件类型，它可以从组件选项中提取出 Props 的类型。import { ExtractPropTypes, ComponentOptions } from 'vue'; interface MyComponentProps { message: string; count?: number; } const MyComponentOptions: ComponentOptions<MyComponentProps> = { props: { message: { type: String, required: true, }, count: { type: Number, default: 0, }, }, setup(props) { console.log(props.message); console.log(props.count); return () => ( <div> <h1>{props.message}</h1> <p>Count: {props.count}</p> </div> ); }, }; type MyComponentPropsType = ExtractPropTypes<typeof MyComponentOptions>; // { message: string; count?: number; }看到了吗？
ExtractPropTypes<typeof MyComponentOptions>这就是告诉 TypeScript，从MyComponentOptions中提取出 Props 的类型，并将它赋值给MyComponentPropsType。这样，我们就可以在其他地方使用MyComponentPropsType，来表示MyComponent组件的 Props 类型。
总结：TypeScript + Vue 3 = 无敌
有了 TypeScript 的加持，Vue 3 的开发体验简直提升了一个档次。类型检查让我们的代码更加健壮，VNode 类型推断让我们的渲染函数更加智能，源码中的 TypeScript 技巧更是让我们受益匪浅。
| 特性 | 说明 | 示例 |
|---|---|---|
| Props 类型推断 | 使用 defineProps 定义组件 Props 的类型，让 TypeScript 自动进行类型检查。 |
interface Props { message: string; count?: number; } |
| 事件处理函数类型 | 为事件处理函数定义参数类型，避免使用 any，提高代码健壮性。 |
const handleClick = (event: MouseEvent) => { console.log(event.clientX, event.clientY); }; |
h 函数类型推断 |
h 函数可以根据传递的参数，自动推断出 VNode 的类型。 |
const vnode = h('div', { class: 'container' }, 'Hello, Vue!'); |
| 自定义渲染函数类型 | 为自定义渲染函数定义返回类型 VNode，确保渲染函数返回的是一个合法的 VNode。 |
const render = (): VNode => { return h('div', { class: 'custom-component' }, [h('h2', props.title), h('p', props.content)]); }; |
| 泛型 | 使用泛型增强组件的灵活性，比如 defineComponent<MyComponentProps> 定义组件的 Props 类型。 |
const MyComponent = defineComponent<MyComponentProps>({ props: { message: { type: String, required: true } }, setup(props) { ... } }); |
| 类型别名 | 使用类型别名简化复杂的类型定义，比如 type MyVNode = VNode<...>。 |
type MyVNode = VNode<RendererNode, RendererElement, { [key: string]: any; }>; |
| 条件类型 | 使用条件类型根据不同的条件选择不同的类型，比如 ExtractPropTypes 从组件选项中提取 Props 的类型。 |
type MyComponentPropsType = ExtractPropTypes<typeof MyComponentOptions>; |
希望今天的分享能帮助大家更好地理解 Vue 3 源码中的 TypeScript 集成，让大家在开发 Vue 组件的时候，更加得心应手！
下课！ (溜了溜了…)