betterDefine
稳定性:
稳定通过开启 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 } const props = defineProps<Props>() </script>ts
type BaseProps = { title: string } export type { BaseProps }⚠️ 限制
复杂类型
在一些关键的位置不支持复杂类型。例如:
什么是复杂类型?
- 所有工具类型
- 内置类型
- 来自
type-fest包的所有类型。 typeof关键字.- ...
- 索引签名ts
interface Type { [key: string]: string } - 泛型将会被直接忽略
什么是关键的位置?
- props 的名称
ts
// ✅ defineProps<{ foo: ComplexType }>() // ❌ defineProps<{ [ComplexType]: string }>()- emits 的名称
ts
interface Emits { (event: 'something', value: ComplexType): void // ✅ (event: ComplexType): void // ❌ }
Kevin Deng
zhiyuanzmj
Lzzzs