dx(script-setup): add generic type to defineExpose

[NoelDeMartin]

Currently, the public API for a component defined using defineExpose is not typed when this component is used elsewhere (as discussed in #4397).

My current workaround is to define the API as an interface and casting the object in the component:

MyComponent.d.ts

export interface IMyComponent {

    doSomething(): void;

}

MyComponent.vue

<script setup lang="ts">
    import type { IMyComponent } from './MyComponent';

    const publicAPI: IMyComponent = {
        doSomething() {
            // ...
        },
    };

    defineExpose(publicAPI);
</script>

But writing that is cumbersome, I'd prefer doing the following:

defineExpose<IMyComponent>({
    doSomething() {
        // ...
    },
});

So that's what this PR allows :). Given that it's optional, it shouldn't affect people who isn't using this approach.

I tried extracting this pattern into my own method which I called definePublicAPI, but I was getting a warning so I guess defineExpose cannot be used for composition.

[PurpleTape]

Hello!

This does not cover the case when ref values passed to defineExpose(). And as result u can't use same interface for expose and access.

MyComponent.d.ts

import type { Ref } from 'vue';

export interface IMyComponent {
    something: Ref<string>;
}

MyComponent.vue

<script setup lang="ts">
    import { ref } from 'vue';
    import type { IMyComponent } from './MyComponent';

    const something = ref('some string');

    defineExpose<IMyComponent>({
        something,
    });
</script>

As docs says: "refs are automatically unwrapped just like on normal instances"
(https://vuejs.org/api/sfc-script-setup.html#defineexpose)

Elsewhere

<tenplate>
    <MyComponent ref="component"/>
</template>

<script setup lang="ts">
    import { onMounted } from 'vue';
    import { MyComponent, IMyComponent } from './MyComponent';

    const component = ref<IMyComponent>();

    onMounted(() => {
        console.log(component.value.something) // now it's string but IMyComponent says this is Ref<string>
    })
</script>

[albertjin]

@PurpleTape

A workaround is to add the string type as follows. I hope this weakness of the <script setup> syntax should be revolved in a clean way but not this or that way of workaround.

import type { Ref } from 'vue';

export interface IMyComponent {
    something: string | Ref<string>;
}

[PurpleTape]

@albertjin, thank you!

I came to a similar decision. If anyone is interested:

// Keep types somewhere
import {
    Ref, ComputedRef, WritableComputedRef, UnwrapNestedRefs,
} from 'vue';

export type VueRef<T> = Ref<T> | ComputedRef<T> | WritableComputedRef<T>;
export type VueUnwrapRef<T> = UnwrapNestedRefs<T>;

// Component types
import { VueRef, VueUnwrapRef } from '@/types';

export interface IComponentWrapped {
    value: VueRef<string>;
}

export type IComponent = VueUnwrapRef<IComponentWrapped>;

// Component
import { ref } from 'vue';
import { IComponentWrapped } from './component-types';

const value = ref('something');

defineExpose<IComponentWrapped>({
    value,
})

// Usage
import { ref } from 'vue';
import { IComponent } from '@/component/component-types';

const myComponent = ref<IComponent>();
console.log(myComponent.value) // 'something'