defineProps fails with import/export * as Types
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
- Define some types in a file
types.ts
export type Props = {
prop: string
}
2a. Import those types with * as Types
notation and use them in defineProps
App.vue
import * as Types from './types'
defineProps<Types.Props>()
2b. Re-export them with * as Types
, import them normally and use them in defineProps
index.ts
export * as Types from './types'
App.vue
import { Types } from './index'
defineProps<Types.Props>()
What is expected?
The component would compile normally.
What is actually happening?
Compilation fails with
Error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type
src/App.vue
3 | import * as Types from './types'
4 |
5 | defineProps<Types.Props>()
| ^^^^^^^^^^^
6 |
7 | const msg = ref('Hello World!')
at ScriptCompileContext.error (https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js:47587:11)
at innerResolveTypeElements (https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js:47718:20)
at resolveTypeElements (https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js:47654:35)
System Info
Any additional comments?
import * as Types from './types'
export { Types }
doesn't work either.
The use-case is to export the types of components in a library as a single "namespace" (I couldn't find what the actual thing you get from doing import/export * as Types
is called in typescript), so you would be able to do import { MyComponent, MyComponentTypes } from 'my-components'
.
Just discovered this myself for defineEmits. Works fine when not using wildcard import:
// broken
import * as Consts from './consts';
const emit = defineEmits<Consts.Emits>();
// works
import { Emits } from './consts';
const emit = defineEmits<Emits>();
// also works
import { Emits as RenamedEmits } from './consts';
const emit = defineEmits<RenamedEmits>();