fix(types): async Component types (#11906)

* Update options.d.ts

* Create async-component-test.ts

* add generics to Component ad EsModuleComponent

* remove not needed , and ;

* revert unrelated changes

* revert unrelated changes

* revert unrelated changes

* revert unrelated changes

* optimize EsModuleImports

* Update async-component-test.ts
This commit is contained in:
Sebastian Krüger 2021-06-03 15:13:33 +02:00 committed by GitHub
parent 80e7730946
commit c52427b0d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 7 deletions

15
types/options.d.ts vendored
View File

@ -12,9 +12,10 @@ export type Component<Data=DefaultData<never>, Methods=DefaultMethods<never>, Co
| FunctionalComponentOptions<Props>
| ComponentOptions<never, Data, Methods, Computed, Props>
interface EsModuleComponent {
default: Component
}
type EsModule<T> = T | { default: T }
type ImportedComponent<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps>
= EsModule<Component<Data, Methods, Computed, Props>>
export type AsyncComponent<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps>
= AsyncComponentPromise<Data, Methods, Computed, Props>
@ -23,12 +24,12 @@ export type AsyncComponent<Data=DefaultData<never>, Methods=DefaultMethods<never
export type AsyncComponentPromise<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps> = (
resolve: (component: Component<Data, Methods, Computed, Props>) => void,
reject: (reason?: any) => void
) => Promise<Component | EsModuleComponent> | void;
) => Promise<ImportedComponent<Data, Methods, Computed, Props>> | void;
export type AsyncComponentFactory<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps> = () => {
component: AsyncComponentPromise<Data, Methods, Computed, Props>;
loading?: Component | EsModuleComponent;
error?: Component | EsModuleComponent;
component: Promise<ImportedComponent<Data, Methods, Computed, Props>>;
loading?: ImportedComponent;
error?: ImportedComponent;
delay?: number;
timeout?: number;
}

View File

@ -0,0 +1,44 @@
import Vue, { AsyncComponent, Component } from "../index";
const a: AsyncComponent = () => ({
component: new Promise<Component>((res, rej) => {
res({ template: "" })
})
})
const b: AsyncComponent = () => ({
// @ts-expect-error component has to be a Promise that resolves to a component
component: () =>
new Promise<Component>((res, rej) => {
res({ template: "" })
})
})
const c: AsyncComponent = () =>
new Promise<Component>((res, rej) => {
res({
template: ""
})
})
const d: AsyncComponent = () =>
new Promise<{ default: Component }>((res, rej) => {
res({
default: {
template: ""
}
})
})
const e: AsyncComponent = () => ({
component: new Promise<{ default: Component }>((res, rej) => {
res({
default: {
template: ""
}
})
})
})
// Test that Vue.component accepts any AsyncComponent
Vue.component("async-compponent1", a)