From 8c9bc9b18655c9fc0325aafce59bfdc5d75cee42 Mon Sep 17 00:00:00 2001 From: Jens Date: Sat, 5 Dec 2020 14:32:25 +0100 Subject: [PATCH 1/4] docs(ts-support): annotating props with validators and default values --- src/guide/typescript-support.md | 39 ++++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index 2ea5e3c3ec..543ef8d8af 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -177,6 +177,7 @@ interface ComplexMessage { okMessage: string cancelMessage: string } + const Component = defineComponent({ props: { name: String, @@ -185,17 +186,43 @@ const Component = defineComponent({ type: Function as PropType<() => void> }, message: { - type: Object as PropType, - required: true, - validator(message: ComplexMessage) { - return !!message.title - } + type: Object as PropType + required: true } } }) ``` -If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems. +::: warning +Because of a [design limitation](https://github.com/microsoft/TypeScript/issues/38845) in TypeScript when it comes +to type inference of function expressions, you have to be careful with `validators` and `default` values for objects and arrays: +::: + +```ts +import { defineComponent, PropType } from 'vue' + +const Component = defineComponent({ + props: { + numbersA: { + type: Array as PropType, + // Make sure to use arrow functions + default: () => [], + validator: (numbers: number[]) => + numbers.every(x => typeof x === 'number') + }, + numbersB: { + type: Array as PropType, + // Or provide an explicit this parameter + default(this: void) { + return [] + }, + validator(this: void, numbers: number[]) { + return numbers.every(x => typeof x === 'number') + } + } + } +}) +``` ## Using with Composition API From fa2033432bc21da0292f2a60b6cbba5bccda8ce2 Mon Sep 17 00:00:00 2001 From: Jens Date: Sat, 5 Dec 2020 17:30:37 +0100 Subject: [PATCH 2/4] docs(ts-support): annotating props added prop for number array --- src/guide/typescript-support.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index 543ef8d8af..06e2982428 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -188,6 +188,9 @@ const Component = defineComponent({ message: { type: Object as PropType required: true + }, + numbers: { + type: Array as PropType } } }) From a85ae257cdf20f528a765bd4e5c8590517d56ba8 Mon Sep 17 00:00:00 2001 From: Jens Date: Sat, 5 Dec 2020 17:44:50 +0100 Subject: [PATCH 3/4] added missing comma --- src/guide/typescript-support.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index 06e2982428..e1b96066e4 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -186,7 +186,7 @@ const Component = defineComponent({ type: Function as PropType<() => void> }, message: { - type: Object as PropType + type: Object as PropType, required: true }, numbers: { From 42901042c7cd2495d2200a0ea529c68e0eac1d83 Mon Sep 17 00:00:00 2001 From: Jens Date: Sat, 5 Dec 2020 22:59:30 +0100 Subject: [PATCH 4/4] docs(ts-support): annotating props use the Book interface in examples --- src/guide/typescript-support.md | 41 ++++++++++++++++++--------------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index e1b96066e4..8aa2c28ddb 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -172,10 +172,10 @@ Vue does a runtime validation on props with a `type` defined. To provide these t ```ts import { defineComponent, PropType } from 'vue' -interface ComplexMessage { +interface Book { title: string - okMessage: string - cancelMessage: string + author: string + year: number } const Component = defineComponent({ @@ -185,12 +185,9 @@ const Component = defineComponent({ callback: { type: Function as PropType<() => void> }, - message: { - type: Object as PropType, + book: { + type: Object as PropType, required: true - }, - numbers: { - type: Array as PropType } } }) @@ -204,23 +201,31 @@ to type inference of function expressions, you have to be careful with `validato ```ts import { defineComponent, PropType } from 'vue' +interface Book { + title: string + year?: number +} + const Component = defineComponent({ props: { - numbersA: { - type: Array as PropType, + bookA: { + type: Object as PropType, // Make sure to use arrow functions - default: () => [], - validator: (numbers: number[]) => - numbers.every(x => typeof x === 'number') + default: () => ({ + title: "Arrow Function Expression" + }), + validator: (book: Book) => !!book.title }, - numbersB: { - type: Array as PropType, + bookB: { + type: Object as PropType, // Or provide an explicit this parameter default(this: void) { - return [] + return { + title: "Function Expression" + } }, - validator(this: void, numbers: number[]) { - return numbers.every(x => typeof x === 'number') + validator(this: void, book: Book) { + return !!book.title } } }