Skip to content

betterDefine NPM Version

稳定性: 稳定

通过开启 betterDefine ,支持在 <script setup> 中导入 TS 类型来定义 propsemits

如果你对此功能有任何疑问,欢迎在 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 // ❌
}

贡献者

页面历史