-import { createApp, App, Plugin } from './index'
+import { createApp, App, Plugin } from 'vue'
const app = createApp({})
import {
- expectType,
createBlock,
VNode,
Teleport,
Fragment,
Suspense,
defineComponent
-} from './index'
+} from 'vue'
+import { expectType } from './utils'
expectType<VNode>(createBlock(Teleport))
expectType<VNode>(createBlock(Text))
import {
- describe,
Component,
defineComponent,
PropType,
ref,
Ref,
- expectError,
- expectType,
ShallowUnwrapRef,
FunctionalComponent,
ComponentPublicInstance,
toRefs,
- IsAny,
- SetupContext,
- expectAssignable
-} from './index'
+ SetupContext
+} from 'vue'
+import { describe, expectAssignable, expectType, IsAny } from './utils'
declare function extractComponentOptions<Props, RawBindings>(
obj: Component<Props, RawBindings>
const { props, rawBindings, setup } = extractComponentOptions(MyComponent)
// @ts-expect-error props should be readonly
- expectError((props.a = 1))
+ props.a = 1
expectType<any>(props.a)
expectType<any>(props.b)
const { props, rawBindings, setup } = extractComponentOptions(MyComponent)
// @ts-expect-error props should be readonly
- expectError((props.a = 1))
+ props.a = 1
// TODO infer the correct keys
// expectType<any>(props.a)
-import { defineComponent, expectError, expectType } from './index'
+import { defineComponent } from 'vue'
+import { expectType } from './utils'
-declare module '@vue/runtime-core' {
+declare module 'vue' {
interface ComponentCustomOptions {
test?(n: number): void
}
methods: {
aMethod() {
- // @ts-expect-error
- expectError(this.notExisting)
this.counter++
this.state = 'running'
-
this.$.appContext.config.globalProperties.state = 'running'
- expectError(
- // @ts-expect-error
- (this.$.appContext.config.globalProperties.state = 'not valid')
- )
-
// @ts-expect-error
- expectError((this.state = 'not valid'))
+ this.notExisting
+ // @ts-expect-error
+ this.state = 'not valid'
+ // @ts-expect-error
+ this.$.appContext.config.globalProperties.state = 'not valid'
}
}
})
// @ts-expect-error
expectType<JSX.Element>(<Custom />)
// @ts-expect-error
-expectError(<Custom bar="bar" />)
+;<Custom bar="bar" />
// @ts-expect-error
-expectError(<Custom baz="baz" />)
+;<Custom baz="baz" />
// @ts-expect-error
-expectError(<Custom baz={1} notExist={1} />)
+;<Custom baz={1} notExist={1} />
// @ts-expect-error
-expectError(<Custom baz={1} custom="custom" />)
+;<Custom baz={1} custom="custom" />
import {
- describe,
- test,
Component,
defineComponent,
PropType,
ref,
reactive,
createApp,
- expectError,
- expectType,
ComponentPublicInstance,
ComponentOptions,
SetupContext,
- IsUnion,
h
-} from './index'
+} from 'vue'
+import { describe, expectType, IsUnion } from './utils'
describe('with object props', () => {
interface ExpectedProps {
expectType<ExpectedProps['lll']>(props.lll)
// @ts-expect-error props should be readonly
- expectError((props.a = 1))
+ props.a = 1
// setup context
return {
expectType<ExpectedProps['kkk']>(props.kkk)
// @ts-expect-error props should be readonly
- expectError((props.a = 1))
+ props.a = 1
// should also expose declared props on `this`
expectType<ExpectedProps['a']>(this.a)
expectType<ExpectedProps['kkk']>(this.kkk)
// @ts-expect-error props on `this` should be readonly
- expectError((this.a = 1))
+ this.a = 1
// assert setup context unwrapping
expectType<number>(this.c)
)
// @ts-expect-error missing required props
- expectError(<MyComponent />)
+ let c = <MyComponent />
+ // @ts-expect-error wrong prop types
+ c = <MyComponent a={'wrong type'} b="foo" dd={{ n: 1 }} ddd={['foo']} />
+ // @ts-expect-error wrong prop types
+ c = <MyComponent ggg="baz" />
- expectError(
- // @ts-expect-error wrong prop types
- <MyComponent a={'wrong type'} b="foo" dd={{ n: 1 }} ddd={['foo']} />
- )
- expectError(
- // @ts-expect-error wrong prop types
- <MyComponent ggg="baz" />
- )
// @ts-expect-error
- expectError(<MyComponent b="foo" dd={{ n: 'string' }} ddd={['foo']} />)
+ ;<MyComponent b="foo" dd={{ n: 'string' }} ddd={['foo']} />
// `this` should be void inside of prop validators and prop default factories
defineComponent({
expectType<JSX.Element>(<MyComponent msg="1" a={['1']} />)
// @ts-expect-error
- expectError(<MyComponent />)
+ ;<MyComponent />
// @ts-expect-error
- expectError(<MyComponent msg="1" />)
+ ;<MyComponent msg="1" />
})
describe('type inference w/ direct setup function', () => {
const MyComponent = defineComponent((_props: { msg: string }) => {})
expectType<JSX.Element>(<MyComponent msg="foo" />)
// @ts-expect-error
- expectError(<MyComponent />)
- expectError(<MyComponent msg="1" />)
+ ;<MyComponent />
+ // @ts-expect-error
+ ;<MyComponent msg={1} />
})
describe('type inference w/ array props declaration', () => {
props: ['a', 'b'],
setup(props) {
// @ts-expect-error props should be readonly
- expectError((props.a = 1))
+ props.a = 1
expectType<any>(props.a)
expectType<any>(props.b)
return {
expectType<any>(this.$props.a)
expectType<any>(this.$props.b)
// @ts-expect-error
- expectError((this.$props.a = 1))
+ this.$props.a = 1
expectType<any>(this.a)
expectType<any>(this.b)
expectType<number>(this.c)
})
expectType<JSX.Element>(<MyComponent a={[1, 2]} b="b" />)
// @ts-expect-error
- expectError(<MyComponent other="other" />)
+ ;<MyComponent other="other" />
})
describe('type inference w/ options API', () => {
// props should be readonly
// @ts-expect-error
- expectError((this.aP1 = 'new'))
+ this.aP1 = 'new'
// @ts-expect-error
- expectError((this.z = 1))
+ this.z = 1
// props on `this` should be readonly
// @ts-expect-error
- expectError((this.bP1 = 1))
+ this.bP1 = 1
// string value can not assigned to number type value
// @ts-expect-error
- expectError((this.c = '1'))
+ this.c = '1'
// setup context properties should be mutable
this.d = 5
// missing required props
// @ts-expect-error
- expectError(<MyComponent />)
+ ;<MyComponent />
// wrong prop types
// @ts-expect-error
- expectError(<MyComponent aP1="ap" aP2={'wrong type'} bP1="b" z={'z'} />)
+ ;<MyComponent aP1="ap" aP2={'wrong type'} bP1="b" z={'z'} />
// @ts-expect-error
- expectError(<MyComponent aP1={1} bP2={[1]} />)
+ ;<MyComponent aP1={1} bP2={[1]} />
})
describe('with extends', () => {
// missing required props
// @ts-expect-error
- expectError(<MyComponent />)
+ ;<MyComponent />
// wrong prop types
// @ts-expect-error
- expectError(<MyComponent aP2={'wrong type'} z={'z'} />)
+ ;<MyComponent aP2={'wrong type'} z={'z'} />
// @ts-expect-error
- expectError(<MyComponent aP1={3} />)
+ ;<MyComponent aP1={3} />
})
describe('extends with mixins', () => {
// missing required props
// @ts-expect-error
- expectError(<MyComponent mP3 p3 /* z='z' */ />)
+ ;<MyComponent mP3 p3 /* z='z' */ />
// missing required props from mixin
// @ts-expect-error
- expectError(<MyComponent /* mP3 */ p3 z="z" />)
+ ;<MyComponent /* mP3 */ p3 z="z" />
// missing required props from extends
// @ts-expect-error
- expectError(<MyComponent mP3 /* p3 */ z="z" />)
+ ;<MyComponent mP3 /* p3 */ z="z" />
// wrong prop types
// @ts-expect-error
- expectError(<MyComponent p2={'wrong type'} z={'z'} />)
+ ;<MyComponent p2={'wrong type'} z={'z'} />
// @ts-expect-error
- expectError(<MyComponent mP1={3} />)
+ ;<MyComponent mP1={3} />
// #3468
const CompWithD = defineComponent({
})
describe('defineComponent', () => {
- test('should accept components defined with defineComponent', () => {
+ describe('should accept components defined with defineComponent', () => {
const comp = defineComponent({})
defineComponent({
components: { comp }
})
})
- test('should accept class components with receiving constructor arguments', () => {
+ describe('should accept class components with receiving constructor arguments', () => {
class Comp {
static __vccOpts = {}
constructor(_props: { foo: string }) {}
emit('click', 1)
emit('input', 'foo')
// @ts-expect-error
- expectError(emit('nope'))
+ emit('nope')
// @ts-expect-error
- expectError(emit('click'))
+ emit('click')
// @ts-expect-error
- expectError(emit('click', 'foo'))
+ emit('click', 'foo')
// @ts-expect-error
- expectError(emit('input'))
+ emit('input')
// @ts-expect-error
- expectError(emit('input', 1))
+ emit('input', 1)
},
created() {
this.$emit('click', 1)
this.$emit('input', 'foo')
// @ts-expect-error
- expectError(this.$emit('nope'))
+ this.$emit('nope')
// @ts-expect-error
- expectError(this.$emit('click'))
+ this.$emit('click')
// @ts-expect-error
- expectError(this.$emit('click', 'foo'))
+ this.$emit('click', 'foo')
// @ts-expect-error
- expectError(this.$emit('input'))
+ this.$emit('input')
// @ts-expect-error
- expectError(this.$emit('input', 1))
+ this.$emit('input', 1)
},
mounted() {
// #3599
this.$emit('click', 1)
this.$emit('input', 'foo')
// @ts-expect-error
- expectError(this.$emit('nope'))
+ this.$emit('nope')
// @ts-expect-error
- expectError(this.$emit('click'))
+ this.$emit('click')
// @ts-expect-error
- expectError(this.$emit('click', 'foo'))
+ this.$emit('click', 'foo')
// @ts-expect-error
- expectError(this.$emit('input'))
+ this.$emit('input')
// @ts-expect-error
- expectError(this.$emit('input', 1))
+ this.$emit('input', 1)
})
}
})
emit('foo', 123)
emit('bar')
// @ts-expect-error
- expectError(emit('nope'))
+ emit('nope')
},
created() {
this.$emit('foo')
this.$emit('foo', 123)
this.$emit('bar')
// @ts-expect-error
- expectError(this.$emit('nope'))
+ this.$emit('nope')
}
})
expectType<((n: number) => any) | undefined>(props.onClick)
emit('click', 1)
// @ts-expect-error
- expectError(emit('click'))
+ emit('click')
// @ts-expect-error
- expectError(emit('click', 'foo'))
+ emit('click', 'foo')
}
})
expectType<unknown>(this.foo)
expectType<unknown>(this.bar)
// @ts-expect-error
- expectError((this.foobar = 1))
+ this.foobar = 1
}
})
expectType<unknown>(this.foo)
expectType<unknown>(this.bar)
// @ts-expect-error
- expectError((this.foobar = 1))
+ this.foobar = 1
}
})
expectType<unknown>(this.foo)
expectType<unknown>(this.bar)
// @ts-expect-error
- expectError((this.foobar = 1))
+ this.foobar = 1
}
})
props: ['a', 'b'],
created() {
// @ts-expect-error
- expectError((this.foo = 1))
+ this.foo = 1
// @ts-expect-error
- expectError((this.bar = 1))
+ this.bar = 1
}
})
})
expectType<number>(compA.baseA)
// @ts-expect-error
- expectError((compA.a = true))
+ compA.a = true
// @ts-expect-error
- expectError((compA.b = 'foo'))
+ compA.b = 'foo'
// @ts-expect-error
- expectError((compA.c = 1))
+ compA.c = 1
// @ts-expect-error
- expectError((compA.mA = 'foo'))
+ compA.mA = 'foo'
// @ts-expect-error
- expectError((compA.baseA = 1))
+ compA.baseA = 1
})
describe('async setup', () => {
AllowedComponentProps,
ComponentCustomProps,
ExtractPropTypes
-} from './index'
+} from 'vue'
// code generated by tsc / vue-tsc, make sure this continues to work
// so we don't accidentally change the args order of DefineComponent
-import { defineCustomElement, expectType, expectError, describe } from './index'
+import { defineCustomElement } from 'vue'
+import { expectType, describe } from './utils'
describe('inject', () => {
// with object inject
expectType<unknown>(this.foo)
expectType<unknown>(this.bar)
// @ts-expect-error
- expectError((this.foobar = 1))
+ this.foobar = 1
}
})
expectType<unknown>(this.foo)
expectType<unknown>(this.bar)
// @ts-expect-error
- expectError((this.foobar = 1))
+ this.foobar = 1
}
})
expectType<unknown>(this.foo)
expectType<unknown>(this.bar)
// @ts-expect-error
- expectError((this.foobar = 1))
+ this.foobar = 1
}
})
props: ['a', 'b'],
created() {
// @ts-expect-error
- expectError((this.foo = 1))
+ this.foo = 1
// @ts-expect-error
- expectError((this.bar = 1))
+ this.bar = 1
}
})
})
-import {
- h,
- Text,
- FunctionalComponent,
- expectError,
- expectType,
- Component
-} from './index'
+import { h, Text, FunctionalComponent, Component } from 'vue'
+import { expectType } from './utils'
// simple function signature
const Foo = (props: { foo: number }) => h(Text, null, props.foo)
expectType<JSX.Element>(<Foo foo={1} key="1" />)
expectType<JSX.Element>(<Foo foo={1} ref="ref" />)
// @ts-expect-error
-expectError(<Foo />)
+;<Foo />
// @ts-expect-error
-expectError(<Foo foo="bar" />)
+;<Foo foo="bar" />
// @ts-expect-error
-expectError(<Foo baz="bar" />)
+;<Foo baz="bar" />
// Explicit signature with props + emits
const Bar: FunctionalComponent<
emit('update', 123)
// @ts-expect-error
- expectError(emit('nope'))
+ emit('nope')
// @ts-expect-error
- expectError(emit('update'))
+ emit('update')
// @ts-expect-error
- expectError(emit('update', 'nope'))
+ emit('update', 'nope')
}
// assigning runtime options
foo: Number
}
// @ts-expect-error
-expectError((Bar.props = { foo: String }))
+Bar.props = { foo: String }
Bar.emits = {
update: value => value > 1
}
// @ts-expect-error
-expectError((Bar.emits = { baz: () => void 0 }))
+Bar.emits = { baz: () => void 0 }
// TSX
expectType<JSX.Element>(<Bar foo={1} />)
// @ts-expect-error
-expectError(<Foo />)
+;<Foo />
// @ts-expect-error
-expectError(<Bar foo="bar" />)
+;<Bar foo="bar" />
// @ts-expect-error
-expectError(<Foo baz="bar" />)
+;<Foo baz="bar" />
const Baz: FunctionalComponent<{}, string[]> = (props, { emit }) => {
expectType<{}>(props)
import {
- describe,
h,
defineComponent,
ref,
Teleport,
Suspense,
Component,
- expectError,
- expectAssignable,
resolveComponent
-} from './index'
+} from 'vue'
+import { describe, expectAssignable } from './utils'
describe('h inference w/ element', () => {
// key
h('div', { key: 1 })
h('div', { key: 'foo' })
// @ts-expect-error
- expectError(h('div', { key: [] }))
+ h('div', { key: [] })
// @ts-expect-error
- expectError(h('div', { key: {} }))
+ h('div', { key: {} })
// ref
h('div', { ref: 'foo' })
h('div', { ref: ref(null) })
h('div', { ref: _el => {} })
// @ts-expect-error
- expectError(h('div', { ref: [] }))
+ h('div', { ref: [] })
// @ts-expect-error
- expectError(h('div', { ref: {} }))
+ h('div', { ref: {} })
// @ts-expect-error
- expectError(h('div', { ref: 123 }))
+ h('div', { ref: 123 })
// slots
const slots = { default: () => {} } // RawSlots
h('div', {}, slots)
h(Fragment, ['hello'])
h(Fragment, { key: 123 }, ['hello'])
// @ts-expect-error
- expectError(h(Fragment, 'foo'))
+ h(Fragment, 'foo')
// @ts-expect-error
- expectError(h(Fragment, { key: 123 }, 'bar'))
+ h(Fragment, { key: 123 }, 'bar')
})
describe('h inference w/ Teleport', () => {
h(Teleport, { to: '#foo' }, 'hello')
h(Teleport, { to: '#foo' }, { default() {} })
// @ts-expect-error
- expectError(h(Teleport))
+ h(Teleport)
// @ts-expect-error
- expectError(h(Teleport, {}))
+ h(Teleport, {})
// @ts-expect-error
- expectError(h(Teleport, { to: '#foo' }))
+ h(Teleport, { to: '#foo' })
})
describe('h inference w/ Suspense', () => {
default: () => 'foo'
})
// @ts-expect-error
- expectError(h(Suspense, { onResolve: 1 }))
+ h(Suspense, { onResolve: 1 })
})
describe('h inference w/ functional component', () => {
h(Func, { foo: 'hello' })
h(Func, { foo: 'hello', bar: 123 })
// @ts-expect-error
- expectError(h(Func, { foo: 123 }))
+ h(Func, { foo: 123 })
// @ts-expect-error
- expectError(h(Func, {}))
+ h(Func, {})
// @ts-expect-error
- expectError(h(Func, { bar: 123 }))
+ h(Func, { bar: 123 })
})
describe('h support w/ plain object component', () => {
// should allow extraneous props (attrs fallthrough)
h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
// @ts-expect-error should fail on missing required prop
- expectError(h(Foo, {}))
+ h(Foo, {})
// @ts-expect-error
- expectError(h(Foo, { foo: 'ok' }))
+ h(Foo, { foo: 'ok' })
// @ts-expect-error should fail on wrong type
- expectError(h(Foo, { bar: 1, foo: 1 }))
+ h(Foo, { bar: 1, foo: 1 })
})
// describe('h inference w/ defineComponent + optional props', () => {
// // should allow extraneous props (attrs fallthrough)
// h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
// // @ts-expect-error should fail on missing required prop
-// expectError(h(Foo, {}))
+// h(Foo, {})
// // @ts-expect-error
-// expectError(h(Foo, { foo: 'ok' }))
+// h(Foo, { foo: 'ok' })
// // @ts-expect-error should fail on wrong type
-// expectError(h(Foo, { bar: 1, foo: 1 }))
+// h(Foo, { bar: 1, foo: 1 })
// })
// describe('h inference w/ defineComponent + direct function', () => {
// // should allow extraneous props (attrs fallthrough)
// h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
// // @ts-expect-error should fail on missing required prop
-// expectError(h(Foo, {}))
+// h(Foo, {})
// // @ts-expect-error
-// expectError(h(Foo, { foo: 'ok' }))
+// h(Foo, { foo: 'ok' })
// // @ts-expect-error should fail on wrong type
-// expectError(h(Foo, { bar: 1, foo: 1 }))
+// h(Foo, { bar: 1, foo: 1 })
// })
// #922 and #3218
visible: true
})
// @ts-expect-error
- expectError(h(RequiredComponent, {}))
+ h(RequiredComponent, {})
})
// #2357
-import { provide, inject, InjectionKey, expectType } from './index'
+import { provide, inject, InjectionKey } from 'vue'
+import { expectType } from './utils'
const key: InjectionKey<number> = Symbol()
"name": "dts-test",
"private": true,
"dependencies": {
- "vue": "workspace:*",
- "@vue/runtime-core": "workspace:*",
- "@vue/runtime-dom": "workspace:*",
- "@vue/reactivity": "workspace:*"
+ "vue": "workspace:*"
}
}
-import {
- ref,
- readonly,
- shallowReadonly,
- describe,
- expectError,
- expectType,
- Ref,
- reactive,
- markRaw
-} from './index'
+import { ref, readonly, shallowReadonly, Ref, reactive, markRaw } from 'vue'
+import { describe, expectType } from './utils'
describe('should support DeepReadonly', () => {
const r = readonly({ obj: { k: 'v' } })
// @ts-expect-error
- expectError((r.obj = {}))
+ r.obj = {}
// @ts-expect-error
- expectError((r.obj.k = 'x'))
+ r.obj.k = 'x'
})
// #4180
-import {
- expectType,
- ref,
- computed,
- Ref,
- ComputedRef,
- WritableComputedRef
-} from './index'
+import { ref, computed, Ref, ComputedRef, WritableComputedRef } from 'vue'
import 'vue/macros-global'
import { RefType, RefTypes } from 'vue/macros'
+import { expectType } from './utils'
// wrapping refs
isRef,
unref,
reactive,
- expectType,
proxyRefs,
toRef,
toRefs,
ToRefs,
shallowReactive,
- readonly,
- describe
-} from './index'
+ readonly
+} from 'vue'
+import { expectType, describe } from './utils'
function plainType(arg: number | Ref<number>) {
// ref coercing
import {
- expectType,
defineProps,
defineEmits,
useAttrs,
useSlots,
withDefaults,
- Slots,
- describe
-} from './index'
+ Slots
+} from 'vue'
+import { describe, expectType } from './utils'
describe('defineProps w/ type declaration', () => {
// type declaration
// TSX w/ defineComponent is tested in defineComponent.test-d.tsx
-import {
- KeepAlive,
- Suspense,
- Fragment,
- Teleport,
- expectError,
- expectType,
- VNode
-} from './index'
+import { KeepAlive, Suspense, Fragment, Teleport, VNode } from 'vue'
+import { expectType } from './utils'
expectType<VNode>(<div />)
expectType<JSX.Element>(<div />)
expectType<JSX.Element>(<input value="foo" />)
// @ts-expect-error style css property validation
-expectError(<div style={{ unknown: 123 }} />)
+;<div style={{ unknown: 123 }} />
// allow array styles and nested array styles
expectType<JSX.Element>(<div style={[{ color: 'red' }]} />)
)
// @ts-expect-error unknown prop
-expectError(<div foo="bar" />)
+;<div foo="bar" />
// allow key/ref on arbitrary element
expectType<JSX.Element>(<div key="foo" />)
expectType<JSX.Element>(<Teleport to="#foo" key="1" />)
// @ts-expect-error
-expectError(<Teleport />)
+;<Teleport />
// @ts-expect-error
-expectError(<Teleport to={1} />)
+;<Teleport to={1} />
// KeepAlive
expectType<JSX.Element>(<KeepAlive include="foo" exclude={['a']} />)
expectType<JSX.Element>(<KeepAlive key="1" />)
// @ts-expect-error
-expectError(<KeepAlive include={123} />)
+;<KeepAlive include={123} />
// Suspense
expectType<JSX.Element>(<Suspense />)
<Suspense onResolve={() => {}} onFallback={() => {}} onPending={() => {}} />
)
// @ts-expect-error
-expectError(<Suspense onResolve={123} />)
+;<Suspense onResolve={123} />
// This directory contains a number of d.ts assertions
// use \@ts-expect-error where errors are expected.
-export * from 'vue'
-
export function describe(_name: string, _fn: () => void): void
export function test(_name: string, _fn: () => any): void
export function expectType<T>(value: T): void
-export function expectError<T>(value: T): void
export function expectAssignable<T, T2 extends T = T>(value: T2): void
export type IsUnion<T, U extends T = T> = (
-import { ref, computed, watch, expectType, defineComponent } from './index'
+import { ref, computed, watch, defineComponent } from 'vue'
+import { expectType } from './utils'
const source = ref('foo')
const source2 = computed(() => source.value)
packages/dts-test:
specifiers:
- '@vue/reactivity': workspace:*
- '@vue/runtime-core': workspace:*
- '@vue/runtime-dom': workspace:*
vue: workspace:*
dependencies:
- '@vue/reactivity': link:../reactivity
- '@vue/runtime-core': link:../runtime-core
- '@vue/runtime-dom': link:../runtime-dom
vue: link:../vue
packages/reactivity: