feat(types): update to Typescript 3.9 (#1106)

package.json

@@ -11,7 +11,7 @@
     "lint": "prettier --write --parser typescript \"packages/**/*.ts?(x)\"",
     "ls-lint": "ls-lint",
     "test": "node scripts/build.js vue -f global -d && jest",
-    "test-dts": "node scripts/build.js shared reactivity runtime-core runtime-dom -dt -f esm-bundler && tsd",
+    "test-dts": "node scripts/build.js shared reactivity runtime-core runtime-dom -dt -f esm-bundler && tsc -p ./test-dts/tsconfig.json && tsc -p ./test-dts/tsconfig.build.json",
     "release": "node scripts/release.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "dev-compiler": "npm-run-all --parallel \"dev template-explorer\" serve",
@@ -70,8 +70,7 @@
     "semver": "^6.3.0",
     "serve": "^11.3.0",
     "ts-jest": "^25.2.1",
-    "tsd": "^0.11.0",
-    "typescript": "^3.8.3",
+    "typescript": "^3.9.3",
     "yorkie": "^2.0.0"
   }
 }

packages/runtime-core/src/componentOptions.ts

@@ -135,7 +135,7 @@ export interface ComponentOptionsBase<
 
   // type-only differentiator to separate OptionWithoutProps from a constructor
   // type returned by defineComponent() or FunctionalComponent
-  call?: never
+  call?: (this: unknown, ...args: unknown[]) => never
   // type-only differentiators for built-in Vnode types
   __isFragment?: never
   __isTeleport?: never
@@ -197,9 +197,9 @@ export interface MethodOptions {
 }
 
 export type ExtractComputedReturns<T extends any> = {
-  [key in keyof T]: T[key] extends { get: Function }
-    ? ReturnType<T[key]['get']>
-    : ReturnType<T[key]>
+  [key in keyof T]: T[key] extends { get: (...args: any[]) => infer TReturn }
+    ? TReturn
+    : T[key] extends (...args: any[]) => infer TReturn ? TReturn : never
 }
 
 type WatchOptionItem =

packages/runtime-core/src/components/Suspense.ts

@@ -244,6 +244,7 @@ function createSuspenseBoundary(
   /* istanbul ignore if */
   if (__DEV__ && !__TEST__ && !hasWarned) {
     hasWarned = true
+    // @ts-ignore `console.info` cannot be null error
     console[console.info ? 'info' : 'log'](
       `<Suspense> is an experimental feature and its API will likely change.`
     )

packages/runtime-dom/types/jsx.d.ts

@@ -1331,6 +1331,7 @@ declare global {
     }
     interface IntrinsicElements extends NativeElements {
       // allow arbitrary elements
+      // @ts-ignore supress ts:2374 = Duplicate string index signature.
       [name: string]: any
     }
   }

packages/vue/src/devCheck.ts

@@ -1,4 +1,5 @@
 if (__BROWSER__ && __DEV__) {
+  // @ts-ignore `console.info` cannot be null error
   console[console.info ? 'info' : 'log'](
     `You are running a development build of Vue.\n` +
       `Make sure to use the production build (*.prod.js) when deploying for production.`

test-dts/README.md

@@ -0,0 +1,13 @@
+# Test-ts
+
+Tests Typescript types to ensure the types remain as expected.
+
+## Configuration
+
+### tsconfig.json
+
+Config used to test against the package source
+
+### tsconfig.build.json
+
+Replaces the `vue` and `@vue/*` dependencies with the built Typescript to ensure the published types are correct.

test-dts/componentTypeExtensions.test-d.ts

@@ -1,5 +1,4 @@
-import { expectError, expectType } from 'tsd'
-import { defineComponent } from './index'
+import { defineComponent, expectError, expectType } from './index'
 
 declare module '@vue/runtime-core' {
   interface ComponentCustomOptions {
@@ -20,9 +19,11 @@ export const Custom = defineComponent({
 
   methods: {
     aMethod() {
+      // @ts-expect-error
       expectError(this.notExisting)
       this.counter++
       this.state = 'running'
+      // @ts-expect-error
       expectError((this.state = 'not valid'))
     }
   }

test-dts/defineComponent.test-d.tsx

@@ -1,11 +1,12 @@
-import { expectError, expectType } from 'tsd'
 import {
   describe,
   defineComponent,
   PropType,
   ref,
   reactive,
-  createApp
+  createApp,
+  expectError,
+  expectType
 } from './index'
 
 describe('with object props', () => {
@@ -83,7 +84,7 @@ describe('with object props', () => {
       expectType<ExpectedProps['eee']>(props.eee)
       expectType<ExpectedProps['fff']>(props.fff)
 
-      // props should be readonly
+      // @ts-expect-error props should be readonly
       expectError((props.a = 1))
 
       // setup context
@@ -112,7 +113,7 @@ describe('with object props', () => {
       expectType<ExpectedProps['eee']>(props.eee)
       expectType<ExpectedProps['fff']>(props.fff)
 
-      // props should be readonly
+      // @ts-expect-error props should be readonly
       expectError((props.a = 1))
 
       // should also expose declared props on `this`
@@ -129,7 +130,7 @@ describe('with object props', () => {
       expectType<ExpectedProps['eee']>(this.eee)
       expectType<ExpectedProps['fff']>(this.fff)
 
-      // props on `this` should be readonly
+      // @ts-expect-error props on `this` should be readonly
       expectError((this.a = 1))
 
       // assert setup context unwrapping
@@ -167,13 +168,14 @@ describe('with object props', () => {
     />
   )
 
-  // missing required props
+  // @ts-expect-error missing required props
   expectError(<MyComponent />)
 
-  // wrong prop types
   expectError(
+    // @ts-expect-error wrong prop types
     <MyComponent a={'wrong type'} b="foo" dd={{ n: 1 }} ddd={['foo']} />
   )
+  // @ts-expect-error
   expectError(<MyComponent b="foo" dd={{ n: 'string' }} ddd={['foo']} />)
 })
 
@@ -211,7 +213,7 @@ describe('type inference w/ array props declaration', () => {
   defineComponent({
     props: ['a', 'b'],
     setup(props) {
-      // props should be readonly
+      // @ts-expect-error props should be readonly
       expectError((props.a = 1))
       expectType<any>(props.a)
       expectType<any>(props.b)
@@ -222,6 +224,7 @@ describe('type inference w/ array props declaration', () => {
     render() {
       expectType<any>(this.$props.a)
       expectType<any>(this.$props.b)
+      // @ts-expect-error
       expectError((this.$props.a = 1))
       expectType<any>(this.a)
       expectType<any>(this.b)
@@ -340,19 +343,29 @@ describe('emits', () => {
     setup(props, { emit }) {
       emit('click', 1)
       emit('input', 'foo')
+      //  @ts-expect-error
       expectError(emit('nope'))
+      //  @ts-expect-error
       expectError(emit('click'))
+      //  @ts-expect-error
       expectError(emit('click', 'foo'))
+      //  @ts-expect-error
       expectError(emit('input'))
+      //  @ts-expect-error
       expectError(emit('input', 1))
     },
     created() {
       this.$emit('click', 1)
       this.$emit('input', 'foo')
+      //  @ts-expect-error
       expectError(this.$emit('nope'))
+      //  @ts-expect-error
       expectError(this.$emit('click'))
+      //  @ts-expect-error
       expectError(this.$emit('click', 'foo'))
+      //  @ts-expect-error
       expectError(this.$emit('input'))
+      //  @ts-expect-error
       expectError(this.$emit('input', 1))
     }
   })
@@ -364,12 +377,14 @@ describe('emits', () => {
       emit('foo')
       emit('foo', 123)
       emit('bar')
+      //  @ts-expect-error
       expectError(emit('nope'))
     },
     created() {
       this.$emit('foo')
       this.$emit('foo', 123)
       this.$emit('bar')
+      //  @ts-expect-error
       expectError(this.$emit('nope'))
     }
   })

test-dts/functionalComponent.test-d.tsx

@@ -1,13 +1,15 @@
-import { expectError, expectType } from 'tsd'
-import { FunctionalComponent } from './index'
+import { FunctionalComponent, expectError, expectType } from './index'
 
 // simple function signature
 const Foo = (props: { foo: number }) => props.foo
 
 // TSX
 expectType<JSX.Element>(<Foo foo={1} />)
-// expectError(<Foo />) // tsd does not catch missing type errors
+// @ts-expect-error
+expectError(<Foo />)
+//  @ts-expect-error
 expectError(<Foo foo="bar" />)
+//  @ts-expect-error
 expectError(<Foo baz="bar" />)
 
 // Explicit signature with props + emits
@@ -18,24 +20,32 @@ const Bar: FunctionalComponent<
   expectType<number>(props.foo)
 
   emit('update', 123)
+  //  @ts-expect-error
   expectError(emit('nope'))
+  //  @ts-expect-error
   expectError(emit('update'))
+  //  @ts-expect-error
   expectError(emit('update', 'nope'))
 }
 
 // assigning runtime options
 Bar.props = {
   foo: Number
 }
+//  @ts-expect-error
 expectError((Bar.props = { foo: String }))
 
 Bar.emits = {
   update: value => value > 1
 }
+//  @ts-expect-error
 expectError((Bar.emits = { baz: () => void 0 }))
 
 // TSX
 expectType<JSX.Element>(<Bar foo={1} />)
-// expectError(<Foo />) // tsd does not catch missing type errors
+//  @ts-expect-error
+expectError(<Foo />)
+//  @ts-expect-error
 expectError(<Bar foo="bar" />)
+//  @ts-expect-error
 expectError(<Foo baz="bar" />)

test-dts/h.test-d.ts

@@ -1,4 +1,3 @@
-import { expectError, expectAssignable } from 'tsd'
 import {
   describe,
   h,
@@ -7,36 +6,48 @@ import {
   Fragment,
   Teleport,
   Suspense,
-  Component
+  Component,
+  expectError,
+  expectAssignable
 } from './index'
 
 describe('h inference w/ element', () => {
   // key
   h('div', { key: 1 })
   h('div', { key: 'foo' })
+  //  @ts-expect-error
   expectError(h('div', { key: [] }))
+  //  @ts-expect-error
   expectError(h('div', { key: {} }))
   // ref
   h('div', { ref: 'foo' })
   h('div', { ref: ref(null) })
   h('div', { ref: el => {} })
+  //  @ts-expect-error
   expectError(h('div', { ref: [] }))
+  //  @ts-expect-error
   expectError(h('div', { ref: {} }))
+  //  @ts-expect-error
   expectError(h('div', { ref: 123 }))
 })
 
 describe('h inference w/ Fragment', () => {
   // only accepts array children
   h(Fragment, ['hello'])
   h(Fragment, { key: 123 }, ['hello'])
+  //  @ts-expect-error
   expectError(h(Fragment, 'foo'))
+  //  @ts-expect-error
   expectError(h(Fragment, { key: 123 }, 'bar'))
 })
 
 describe('h inference w/ Teleport', () => {
   h(Teleport, { to: '#foo' }, 'hello')
+  //  @ts-expect-error
   expectError(h(Teleport))
+  //  @ts-expect-error
   expectError(h(Teleport, {}))
+  //  @ts-expect-error
   expectError(h(Teleport, { to: '#foo' }))
 })
 
@@ -47,15 +58,19 @@ describe('h inference w/ Suspense', () => {
   h(Suspense, null, {
     default: () => 'foo'
   })
+  //  @ts-expect-error
   expectError(h(Suspense, { onResolve: 1 }))
 })
 
 describe('h inference w/ functional component', () => {
   const Func = (_props: { foo: string; bar?: number }) => ''
   h(Func, { foo: 'hello' })
   h(Func, { foo: 'hello', bar: 123 })
+  //  @ts-expect-error
   expectError(h(Func, { foo: 123 }))
+  //  @ts-expect-error
   expectError(h(Func, {}))
+  //  @ts-expect-error
   expectError(h(Func, { bar: 123 }))
 })
 
@@ -85,10 +100,11 @@ describe('h inference w/ defineComponent', () => {
   h(Foo, { bar: 1, foo: 'ok' })
   // should allow extraneous props (attrs fallthrough)
   h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
-  // should fail on missing required prop
+  // @ts-expect-error should fail on missing required prop
   expectError(h(Foo, {}))
+  //  @ts-expect-error
   expectError(h(Foo, { foo: 'ok' }))
-  // should fail on wrong type
+  // @ts-expect-error should fail on wrong type
   expectError(h(Foo, { bar: 1, foo: 1 }))
 })
 
@@ -101,10 +117,11 @@ describe('h inference w/ defineComponent + optional props', () => {
   h(Foo, { bar: 1, foo: 'ok' })
   // should allow extraneous props (attrs fallthrough)
   h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
-  // should fail on missing required prop
+  // @ts-expect-error should fail on missing required prop
   expectError(h(Foo, {}))
+  // @ts-expect-error
   expectError(h(Foo, { foo: 'ok' }))
-  // should fail on wrong type
+  // @ts-expect-error should fail on wrong type
   expectError(h(Foo, { bar: 1, foo: 1 }))
 })
 
@@ -115,10 +132,11 @@ describe('h inference w/ defineComponent + direct function', () => {
   h(Foo, { bar: 1, foo: 'ok' })
   // should allow extraneous props (attrs fallthrough)
   h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
-  // should fail on missing required prop
+  // @ts-expect-error should fail on missing required prop
   expectError(h(Foo, {}))
+  //  @ts-expect-error
   expectError(h(Foo, { foo: 'ok' }))
-  // should fail on wrong type
+  // @ts-expect-error should fail on wrong type
   expectError(h(Foo, { bar: 1, foo: 1 }))
 })
 

test-dts/index.d.ts

@@ -7,3 +7,7 @@
 export * from '@vue/runtime-dom'
 
 export function describe(_name: string, _fn: () => void): 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