betterDefine

Stability: stable

With enabling betterDefine, imported types are supported in <script setup> type-based-macros.

Features	Supported
Vue 3	✅
Nuxt 3	✅
Vue 2	✅
TypeScript	✅

Basic Usage

App.vuetypes.ts

vue

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

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

type BaseProps = {
  title: string
}

export type { BaseProps }

⚠️ Limitations

Complex types

Complex types are not supported in some key places. For example:

What are Complex Types?

All utility types
- Built-in types
- All types from type-fest package.
- typeof keyword.
- ...

Index Signature

interface Type {
  [key: string]: string
}

Generics will be ignored directly

What are Key Places?

The names of props.

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

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

The names of emits.

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

Contributors

Kevin Deng

zhiyuanzmj

Changelog

Last edited 5 months ago

View full history

betterDefine ​

Basic Usage ​

⚠️ Limitations ​

Complex types ​

What are Complex Types? ​

What are Key Places? ​