betterDefine

稳定性: 稳定

通过开启 betterDefine ，支持在 <script setup> 中导入 TS 类型来定义 props 和 emits。

如果你对此功能有任何疑问，欢迎在 issues 中发表评论。

特性	支持
Vue 3	✅
Nuxt 3	✅
Vue 2	✅
TypeScript	✅

基本用法

App.vue

<script setup lang="ts">
import type { BaseProps } from './types'

interface Props extends BaseProps {
  foo: string
}
defineProps<Props>()
</script>

types.ts

export interface BaseProps {
  title: string
}

⚠️ 限制

复杂类型

在一些关键的位置不支持复杂类型。例如：

什么是复杂类型？

• 所有工具类型
  • 内置类型
  • 来自 type-fest 包的所有类型。
  • typeof 关键字.
  • ...
• 索引签名

  interface Type {
    [key: string]: string
  }

• 泛型将会被直接忽略

什么是关键的位置?

• props 的名称

// ✅
defineProps<{
  foo: ComplexType
}>()

// ❌
defineProps<{
  [ComplexType]: string
}>()

• emits 的名称

interface Emits {
  (event: 'something', value: ComplexType): void // ✅
  (event: ComplexType): void // ❌
}