Vue MacrosbetterDefine
稳定性:
稳定通过开启 betterDefine ，支持在 <script setup> 中导入 TS 类型来定义 props 和 emits。
如果你对此功能有任何疑问，欢迎在 issues 中发表评论。
| 特性 | 支持 |
|---|---|
| Vue 3 | ✅ |
| Nuxt 3 | ✅ |
| Vue 2 | ✅ |
| TypeScript | ✅ |
基本用法
vue
<script setup lang="ts">
import type { BaseProps } from './types'
interface Props extends BaseProps {
foo: string
}
defineProps<Props>()
</script><script setup lang="ts">
import type { BaseProps } from './types'
interface Props extends BaseProps {
foo: string
}
defineProps<Props>()
</script>ts
export interface BaseProps {
title: string
}export interface BaseProps {
title: string
}⚠️ 限制
复杂类型
在一些关键的位置不支持复杂类型。例如：
什么是复杂类型？
- 所有工具类型
- 内置类型
- 来自
type-fest包的所有类型。 typeof关键字.- ...
- 索引签名ts
interface Type { [key: string]: string }interface Type { [key: string]: string } - 泛型将会被直接忽略
什么是关键的位置?
- props 的名称
ts
// ✅
defineProps<{
foo: ComplexType
}>()
// ❌
defineProps<{
[ComplexType]: string
}>()// ✅
defineProps<{
foo: ComplexType
}>()
// ❌
defineProps<{
[ComplexType]: string
}>()- emits 的名称
ts
interface Emits {
(event: 'something', value: ComplexType): void // ✅
(event: ComplexType): void // ❌
}interface Emits {
(event: 'something', value: ComplexType): void // ✅
(event: ComplexType): void // ❌
}