<aside> 📖 TOC

</aside>

defineComponent 函数

1. 定义 slot 参数（[email protected] 支持）

[TS Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUGELgQ5YwA0cMAnmKnAMoA2EMAzgCrW0C+c6UBcAOQA3AK6pBAbgBQ0gMZEW8fODgBeFBmx4CkYjAAUCaXDgsmrAFxwA8gCMAVqjnwAhi3oX2nADzHTpgAWqK5oUNZI6BAQ1kpQ2ADmknB2ruFwWKIgdqhQcFwm+QB8pIUsqDCiYAZg-GAs5EjmzB5cAJSIhWZeAHTBoblGvNHWgnGC5KnpAIz5bYUF7UA)

TS Playground

2. JSX 校验

对组件的属性和事件进行类型校验。使用 PropType 定义组件属性，使用 emits 选项定义组件事件。

• 选项组件的

  https://www.typescriptlang.org/play?jsx=1&ssl=14&ssc=6&pln=3&pc=1#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUGELgQ5YwA0cMAnmKnAApQRgAq1tAvnOoyHAOQA3AK6o+AbgBQEgMZEAzvHzg4AXhQZseApGIwAFAglw4YRmDkAuREeNcIEKwGUYUbAHM4AQzn0zrGgA8fAA2nlBuonAAPvxyIJ7BwXwAfDbspDaoIMAwlta2cABGYVZ6AglWWEIghahQAJSqyRRQImkS7PWSEgFKYHYQKgghYRF8nEQAQmFDZQmNKs2GxuXBYnAA9BtwVTV1HewbyWJAA

• 函数组件的

  https://www.typescriptlang.org/play?jsx=1&ssl=11&ssc=6&pln=3&pc=1#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUGELgQ5YwA0cMAnmKnAApQRgAq1tAvnOoyHAOQA3AK6o+AbgBQEgMZEAzvHzg4AXhQZseApGIwAFHrCMwcgFxxEXCBHMKo2AOZi4RAEIBDKOb0D3AG3MsIRAAI1QoAEpVAD44AQhgZDh2KJVYhAkLKFQYISgsOD1U9MyLOAAeZGABaIQjJjkAOnRrdnKAeiqa0vYJFMkJcqUwKwgVBD47Pk43T3Gff2LEUt8-Z3b2uCDQ8L72duixIA

3. 泛型组件

函数组件支持在 defineComponent 使用泛型。

https://www.typescriptlang.org/play?jsx=1#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUGELgQ5YwA0cUGcAvnOlAXAOQBuArqkwNwBQPccAMZEAzvHzg4AXhQZseApGIwAFPwFwAPABU4qAB4xUWZCLhio2AOZwAPnCxsQAI1RQAfCrAMwIgFyIcCAiVgHaXHAANsBiYQDaALo0AJTS7ojqGkKi8MJsJNIUGCoADMl8WQKUMGxQWHAqqVLpapUamsjALO6ZbYjeEL4AdMFWtAh5JEMsAIaRHNS9WZoA9J3dS3DlWYvJvJoSYEEhUgBE6CKop1ExMFIIcUzoEBBMCbQr7vuHx1b3AIwAJgAzLRomJ7nEgcD3nBPrweCsVnAAAIwEQAWgMYFQghgWKgDCgcCsxjcwEEZmQRCY8BAMxgggAFjwDopfmcLlcbhCHtDYZ8gA

4. 推断this类型

• inject选项的类型被推断为 unknown
• 推断data、computed、props、mixins、emits

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUGELgQ5YwA0cMAnmKnAApQRgAq1tAvnOoyHAOQA3AK6o+AbgBQEgMZEAzvACywAB7Y4AXhQZseApGIwAFAglw4YRmDkAuRGfMpkyOwCEIEADaoAhllIO7BLsAJRSslgKcPjgmtqYODEGqCQmDpZMtvaOcABGPlB2AMowUNgA5nA+cvRWrDQAPHyeBeWicAA+-HIgPp6efAB8gQHmIKrYWQDaympYALqjcKjjMFmmOdIAFn5tdkYCfXYKZVjlIZqDFFAiIw7IPjA+RhcbjlCoMEJQWNk5VT4fHYAIwOcxBcFLWTgIQwVAuP7mXLIl6I96fb6-GBbYByAB0gJ8cAA1HBQTkIXB2EtsAArVDSGB2N7mdAeOx8NkQPhLakOaQfR7w1Esig4-H5KBiOAAehlcAARC0oG0FZ1FT0+p41V0hFg0Al4WCxbi8VzpXK4HqANZYCAAdywxuxpsJFvlWCEIFyqCgzvFeORuXdcE93t9-tNzmQIdyHm8fkj+IAJCtgMY+NtdqJyHwTnwLpbAIQWgBiswBDyoAHU0AXHInCqBYIhIA

5. 高阶组件

5.1 继承原生 HTML 元素

见 https://github.com/vuejs/core/pull/7444，还在 RFC 阶段

const MyImg = defineComponent({
    props: {
        foo: String
    },
    attrs: Object as AttrsType<ImgHTMLAttributes>,
    created() {
        this.$attrs.class // any
        this.$attrs.style // StyleValue | undefined
        this.$attrs.onError // ((payload: Event) => void) | undefined
        this.$attrs.src // string | undefined
    },
    render() {
        return <img {...this.$attrs} />
    }
});

<MyImg class={'str'} style={'str'} src={'<https://xxx.com/aaa.jpg>'} onError={(e) => {
  e; // Event
}}/>;

5.2 继承 Vue 组件