types(runtime-core): improve the extracted instance types (#1936)

vuejs · Aug 25, 2020 · 955450f · 955450f
1 parent 475dd04
commit 955450f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 2 deletions.
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
@@ -189,7 +189,8 @@ export function defineComponent<
  Extends,
  E,
  VNodeProps & AllowedComponentProps & ComponentCustomProps
- >
+ > &
+ Readonly<ExtractPropTypes<PropsOptions>>
 > &
  ComponentOptionsWithObjectProps<
  PropsOptions,

diff --git a/test-dts/defineComponent.test-d.tsx b/test-dts/defineComponent.test-d.tsx
@@ -94,7 +94,7 @@ describe('with object props', () => {
  // default + function
  ffff: {
  type: Function as PropType<(a: number, b: string) => { a: boolean }>,
- default: (a: number, b: string) => ({ a: true })
+ default: (a: number, b: string) => ({ a: a > +b })
  },
  validated: {
  type: String,
@@ -799,3 +799,58 @@ describe('componentOptions setup should be `SetupContext`', () => {
  ctx: SetupContext
  ) => any)
 })
+
+describe('extract instance type', () => {
+ const Base = defineComponent({
+ props: {
+ baseA: {
+ type: Number,
+ default: 1
+ }
+ }
+ })
+ const MixinA = defineComponent({
+ props: {
+ mA: {
+ type: String,
+ default: ''
+ }
+ }
+ })
+ const CompA = defineComponent({
+ extends: Base,
+ mixins: [MixinA],
+ props: {
+ a: {
+ type: Boolean,
+ default: false
+ },
+ b: {
+ type: String,
+ required: true
+ },
+ c: Number
+ }
+ })
+
+ const compA = {} as InstanceType<typeof CompA>
+
+ expectType<boolean>(compA.a)
+ expectType<string>(compA.b)
+ expectType<number | undefined>(compA.c)
+ // mixins
+ expectType<string>(compA.mA)
+ // extends
+ expectType<number>(compA.baseA)
+
+ // @ts-expect-error
+ expectError((compA.a = true))
+ // @ts-expect-error
+ expectError((compA.b = 'foo'))
+ // @ts-expect-error
+ expectError((compA.c = 1))
+ // @ts-expect-error
+ expectError((compA.mA = 'foo'))
+ // @ts-expect-error
+ expectError((compA.baseA = 1))
+})