setupHelpers.test-d.ts 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. import {
  2. defineProps,
  3. defineEmits,
  4. useAttrs,
  5. useSlots,
  6. withDefaults,
  7. Slots
  8. } from 'vue'
  9. import { describe, expectType } from './utils'
  10. describe('defineProps w/ type declaration', () => {
  11. // type declaration
  12. const props = defineProps<{
  13. foo: string
  14. bool?: boolean
  15. boolAndUndefined: boolean | undefined
  16. }>()
  17. // explicitly declared type should be refined
  18. expectType<string>(props.foo)
  19. // @ts-expect-error
  20. props.bar
  21. expectType<boolean>(props.bool)
  22. expectType<boolean>(props.boolAndUndefined)
  23. })
  24. describe('defineProps w/ type declaration + withDefaults', () => {
  25. const res = withDefaults(
  26. defineProps<{
  27. number?: number
  28. arr?: string[]
  29. obj?: { x: number }
  30. fn?: (e: string) => void
  31. genStr?: string
  32. x?: string
  33. y?: string
  34. z?: string
  35. bool?: boolean
  36. boolAndUndefined: boolean | undefined
  37. }>(),
  38. {
  39. number: 123,
  40. arr: () => [],
  41. obj: () => ({ x: 123 }),
  42. fn: () => {},
  43. genStr: () => '',
  44. y: undefined,
  45. z: 'string'
  46. }
  47. )
  48. res.number + 1
  49. res.arr.push('hi')
  50. res.obj.x
  51. res.fn('hi')
  52. res.genStr.slice()
  53. // @ts-expect-error
  54. res.x.slice()
  55. // @ts-expect-error
  56. res.y.slice()
  57. expectType<string | undefined>(res.x)
  58. expectType<string | undefined>(res.y)
  59. expectType<string>(res.z)
  60. expectType<boolean>(res.bool)
  61. expectType<boolean>(res.boolAndUndefined)
  62. })
  63. describe('defineProps w/ union type declaration + withDefaults', () => {
  64. withDefaults(
  65. defineProps<{
  66. union1?: number | number[] | { x: number }
  67. union2?: number | number[] | { x: number }
  68. union3?: number | number[] | { x: number }
  69. union4?: number | number[] | { x: number }
  70. }>(),
  71. {
  72. union1: 123,
  73. union2: () => [123],
  74. union3: () => ({ x: 123 }),
  75. union4: () => 123
  76. }
  77. )
  78. })
  79. describe('defineProps w/ runtime declaration', () => {
  80. // runtime declaration
  81. const props = defineProps({
  82. foo: String,
  83. bar: {
  84. type: Number,
  85. default: 1
  86. },
  87. baz: {
  88. type: Array,
  89. required: true
  90. }
  91. })
  92. expectType<{
  93. foo?: string
  94. bar: number
  95. baz: unknown[]
  96. }>(props)
  97. props.foo && props.foo + 'bar'
  98. props.bar + 1
  99. // @ts-expect-error should be readonly
  100. props.bar++
  101. props.baz.push(1)
  102. const props2 = defineProps(['foo', 'bar'])
  103. props2.foo + props2.bar
  104. // @ts-expect-error
  105. props2.baz
  106. })
  107. describe('defineEmits w/ type declaration', () => {
  108. const emit = defineEmits<(e: 'change') => void>()
  109. emit('change')
  110. // @ts-expect-error
  111. emit()
  112. // @ts-expect-error
  113. emit('bar')
  114. type Emits = { (e: 'foo' | 'bar'): void; (e: 'baz', id: number): void }
  115. const emit2 = defineEmits<Emits>()
  116. emit2('foo')
  117. emit2('bar')
  118. emit2('baz', 123)
  119. // @ts-expect-error
  120. emit2('baz')
  121. })
  122. describe('defineEmits w/ runtime declaration', () => {
  123. const emit = defineEmits({
  124. foo: () => {},
  125. bar: null
  126. })
  127. emit('foo')
  128. emit('bar', 123)
  129. // @ts-expect-error
  130. emit('baz')
  131. const emit2 = defineEmits(['foo', 'bar'])
  132. emit2('foo')
  133. emit2('bar', 123)
  134. // @ts-expect-error
  135. emit2('baz')
  136. })
  137. describe('useAttrs', () => {
  138. const attrs = useAttrs()
  139. expectType<Record<string, unknown>>(attrs)
  140. })
  141. describe('useSlots', () => {
  142. const slots = useSlots()
  143. expectType<Slots>(slots)
  144. })