/
main.vue
82 lines (80 loc) · 2.26 KB
/
main.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script lang="ts">
import { exactType } from '../shared';
import { defineComponent, PropType, ref } from 'vue';
import ScriptSetup from './script-setup.vue';
import ScriptSetupExpose from './script-setup-expose.vue';
import ScriptSetupTypeOnly from './script-setup-type-only.vue';
import ScriptSetupDefaultProps from './script-setup-default-props.vue';
import ScriptSetupGeneric from './script-setup-generic.vue';
// https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits
const ScriptSetupExact = defineComponent({
props: {
foo: String,
},
emits: ['change', 'delete'],
setup() {
return {};
},
});
// https://vuejs.org/api/sfc-script-setup.html#defineexpose
const ScriptSetupExposeExact = defineComponent({
setup() {
const a = 1
const b = ref(2)
return {
a,
b
};
},
});
// https://vuejs.org/api/sfc-script-setup.html#typescript-only-features
const ScriptSetupTypeOnlyExact = defineComponent({
props: {
foo: {
type: String,
required: true
},
bar: Number
},
emits: {
change(_id: number) { },
update(_value: string) { },
},
setup() {
return {};
},
});
// https://vuejs.org/api/sfc-script-setup.html#default-props-values-when-using-type-declaration
const ScriptSetupDefaultPropsExact = defineComponent({
props: {
msg: {
type: String,
default: 'hello'
},
labels: {
type: Array as PropType<string[]>,
default: () => ['one', 'two']
},
},
setup() {
return {};
},
});
// vue 3.3 generic
declare const ScriptSetupGenericExact: <T, >(
_props: NonNullable<typeof _setup>['props'] & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
_ctx?: Pick<NonNullable<typeof _setup>, 'attrs' | 'emit' | 'slots'>,
_setup?: {
props: { foo: T } & { [K in keyof JSX.ElementChildrenAttribute]?: { default?(data: T): any } },
attrs: any,
slots: { default?(data: T): any },
emit: { (e: 'bar', data: T): void },
expose(_exposed: { baz: T }): void,
}
) => import('vue').VNode & { __ctx?: typeof _setup };
exactType(ScriptSetup, ScriptSetupExact);
exactType(ScriptSetupExpose, ScriptSetupExposeExact);
exactType(ScriptSetupTypeOnly, ScriptSetupTypeOnlyExact);
exactType(ScriptSetupDefaultProps, ScriptSetupDefaultPropsExact);
exactType(ScriptSetupGeneric, ScriptSetupGenericExact);
</script>