mirror of https://github.com/vuejs/core.git
163 lines
3.2 KiB
TypeScript
163 lines
3.2 KiB
TypeScript
|
import {
|
||
|
expectType,
|
||
|
defineProps,
|
||
|
defineEmits,
|
||
|
useAttrs,
|
||
|
useSlots,
|
||
|
withDefaults,
|
||
|
Slots,
|
||
|
describe
|
||
|
} from './index'
|
||
|
|
||
|
describe('defineProps w/ type declaration', () => {
|
||
|
// type declaration
|
||
|
const props = defineProps<{
|
||
|
foo: string
|
||
|
bool?: boolean
|
||
|
boolAndUndefined: boolean | undefined
|
||
|
}>()
|
||
|
// explicitly declared type should be refined
|
||
|
expectType<string>(props.foo)
|
||
|
// @ts-expect-error
|
||
|
props.bar
|
||
|
|
||
|
expectType<boolean>(props.bool)
|
||
|
expectType<boolean>(props.boolAndUndefined)
|
||
|
})
|
||
|
|
||
|
describe('defineProps w/ type declaration + withDefaults', () => {
|
||
|
const res = withDefaults(
|
||
|
defineProps<{
|
||
|
number?: number
|
||
|
arr?: string[]
|
||
|
obj?: { x: number }
|
||
|
fn?: (e: string) => void
|
||
|
genStr?: string
|
||
|
x?: string
|
||
|
y?: string
|
||
|
z?: string
|
||
|
bool?: boolean
|
||
|
boolAndUndefined: boolean | undefined
|
||
|
}>(),
|
||
|
{
|
||
|
number: 123,
|
||
|
arr: () => [],
|
||
|
obj: () => ({ x: 123 }),
|
||
|
fn: () => {},
|
||
|
genStr: () => '',
|
||
|
y: undefined,
|
||
|
z: 'string'
|
||
|
}
|
||
|
)
|
||
|
|
||
|
res.number + 1
|
||
|
res.arr.push('hi')
|
||
|
res.obj.x
|
||
|
res.fn('hi')
|
||
|
res.genStr.slice()
|
||
|
// @ts-expect-error
|
||
|
res.x.slice()
|
||
|
// @ts-expect-error
|
||
|
res.y.slice()
|
||
|
|
||
|
expectType<string | undefined>(res.x)
|
||
|
expectType<string | undefined>(res.y)
|
||
|
expectType<string>(res.z)
|
||
|
|
||
|
expectType<boolean>(res.bool)
|
||
|
expectType<boolean>(res.boolAndUndefined)
|
||
|
})
|
||
|
|
||
|
describe('defineProps w/ union type declaration + withDefaults', () => {
|
||
|
withDefaults(
|
||
|
defineProps<{
|
||
|
union1?: number | number[] | { x: number }
|
||
|
union2?: number | number[] | { x: number }
|
||
|
union3?: number | number[] | { x: number }
|
||
|
union4?: number | number[] | { x: number }
|
||
|
}>(),
|
||
|
{
|
||
|
union1: 123,
|
||
|
union2: () => [123],
|
||
|
union3: () => ({ x: 123 }),
|
||
|
union4: () => 123
|
||
|
}
|
||
|
)
|
||
|
})
|
||
|
|
||
|
describe('defineProps w/ runtime declaration', () => {
|
||
|
// runtime declaration
|
||
|
const props = defineProps({
|
||
|
foo: String,
|
||
|
bar: {
|
||
|
type: Number,
|
||
|
default: 1
|
||
|
},
|
||
|
baz: {
|
||
|
type: Array,
|
||
|
required: true
|
||
|
}
|
||
|
})
|
||
|
expectType<{
|
||
|
foo?: string
|
||
|
bar: number
|
||
|
baz: unknown[]
|
||
|
}>(props)
|
||
|
|
||
|
props.foo && props.foo + 'bar'
|
||
|
props.bar + 1
|
||
|
// @ts-expect-error should be readonly
|
||
|
props.bar++
|
||
|
props.baz.push(1)
|
||
|
|
||
|
const props2 = defineProps(['foo', 'bar'])
|
||
|
props2.foo + props2.bar
|
||
|
// @ts-expect-error
|
||
|
props2.baz
|
||
|
})
|
||
|
|
||
|
describe('defineEmits w/ type declaration', () => {
|
||
|
const emit = defineEmits<(e: 'change') => void>()
|
||
|
emit('change')
|
||
|
// @ts-expect-error
|
||
|
emit()
|
||
|
// @ts-expect-error
|
||
|
emit('bar')
|
||
|
|
||
|
type Emits = { (e: 'foo' | 'bar'): void; (e: 'baz', id: number): void }
|
||
|
const emit2 = defineEmits<Emits>()
|
||
|
|
||
|
emit2('foo')
|
||
|
emit2('bar')
|
||
|
emit2('baz', 123)
|
||
|
// @ts-expect-error
|
||
|
emit2('baz')
|
||
|
})
|
||
|
|
||
|
describe('defineEmits w/ runtime declaration', () => {
|
||
|
const emit = defineEmits({
|
||
|
foo: () => {},
|
||
|
bar: null
|
||
|
})
|
||
|
emit('foo')
|
||
|
emit('bar', 123)
|
||
|
// @ts-expect-error
|
||
|
emit('baz')
|
||
|
|
||
|
const emit2 = defineEmits(['foo', 'bar'])
|
||
|
emit2('foo')
|
||
|
emit2('bar', 123)
|
||
|
// @ts-expect-error
|
||
|
emit2('baz')
|
||
|
})
|
||
|
|
||
|
describe('useAttrs', () => {
|
||
|
const attrs = useAttrs()
|
||
|
expectType<Record<string, unknown>>(attrs)
|
||
|
})
|
||
|
|
||
|
describe('useSlots', () => {
|
||
|
const slots = useSlots()
|
||
|
expectType<Slots>(slots)
|
||
|
})
|