From fb27782056fe632d81cc9afe9508ccbb46f968b5 Mon Sep 17 00:00:00 2001 From: Carlos Date: Tue, 19 Mar 2019 07:52:06 +0000 Subject: [PATCH 1/7] feat: Add Annotating Props to Typescript page --- src/v2/guide/typescript.md | 40 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 26f5fabb48..24a2266659 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -187,3 +187,43 @@ const Component = Vue.extend({ ``` If you find type inference or member completion isn't working, annotating certain methods may help address these problems. Using the `--noImplicitAny` option will help find many of these unannotated methods. + + + +## Annotating Props + +```ts +import Vue, { PropType } from 'vue' + +interface ComplexMessage { + title: string, + okMessage: string, + cancelMessage: string +} +const Component = Vue.extend({ + props: { + name: String, + success: { type: String }, + callback: { + type: Function as PropType<()=>void> + }, + message: { + type: Object as PropType, + required: true, + validation(message: ComplexMessage){ + return !!message.title; + } + }, + notificationMessage: { + type: Object as PropType, + required: true, + // without argument type + validation: function(message){ + return !!message.title; + } as (arg: ComplexMessage) => boolean + } + } +}) +``` +If you find type inference or member completion isn’t working, annotating prop with `PropValidator` may help address it. + From c4937a1e3a83cf8e0a20d9402f12e8a4888bb944 Mon Sep 17 00:00:00 2001 From: Kael Date: Tue, 19 Mar 2019 14:18:30 +0000 Subject: [PATCH 2/7] Code style change based on suggestions Co-Authored-By: pikax --- src/v2/guide/typescript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 24a2266659..70273dd965 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -205,12 +205,12 @@ const Component = Vue.extend({ name: String, success: { type: String }, callback: { - type: Function as PropType<()=>void> + type: Function as any as PropType<() => void> }, message: { type: Object as PropType, required: true, - validation(message: ComplexMessage){ + validator (message: ComplexMessage) { return !!message.title; } }, From e845d3c6e0e6b262da811f431f12ad4024a871e2 Mon Sep 17 00:00:00 2001 From: Carlos Date: Tue, 19 Mar 2019 14:20:05 +0000 Subject: [PATCH 3/7] improve typescript annotation on the notificationMessage --- src/v2/guide/typescript.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 70273dd965..1d99427734 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -215,13 +215,11 @@ const Component = Vue.extend({ } }, notificationMessage: { - type: Object as PropType, - required: true, - // without argument type - validation: function(message){ + type: Object, + validation: (message) => { return !!message.title; - } as (arg: ComplexMessage) => boolean - } + } + } as PropValidator } }) ``` From 98bb7f175be28c0e0e67467e123364d07b478802 Mon Sep 17 00:00:00 2001 From: Carlos Date: Wed, 20 Mar 2019 07:17:45 +0000 Subject: [PATCH 4/7] remove as any from Typescript Annotating Props --- src/v2/guide/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 1d99427734..92b09f51d8 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -205,7 +205,7 @@ const Component = Vue.extend({ name: String, success: { type: String }, callback: { - type: Function as any as PropType<() => void> + type: Function as PropType<() => void> }, message: { type: Object as PropType, From b581a4efd1b8ef998ee46f1d93a2d28d7b1ad6fb Mon Sep 17 00:00:00 2001 From: Carlos Date: Wed, 20 Mar 2019 08:55:06 +0000 Subject: [PATCH 5/7] removing PropValidator from Typescript Annotating Props --- src/v2/guide/typescript.md | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 92b09f51d8..78ff84e0ff 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -213,15 +213,8 @@ const Component = Vue.extend({ validator (message: ComplexMessage) { return !!message.title; } - }, - notificationMessage: { - type: Object, - validation: (message) => { - return !!message.title; - } - } as PropValidator + } } }) ``` -If you find type inference or member completion isn’t working, annotating prop with `PropValidator` may help address it. - +If you find validator not getting type inference or member completion isn't working, annotating the argument the the expected type may help address these problems; \ No newline at end of file From 9e7ebffd04497a24f4eb6e11c0a6402a96bc9c0f Mon Sep 17 00:00:00 2001 From: Carlos Date: Wed, 20 Mar 2019 16:45:07 +0000 Subject: [PATCH 6/7] fix typos on Typescript Annotating Props --- src/v2/guide/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 78ff84e0ff..67a02597ed 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -217,4 +217,4 @@ const Component = Vue.extend({ } }) ``` -If you find validator not getting type inference or member completion isn't working, annotating the argument the the expected type may help address these problems; \ No newline at end of file +If you find validator not getting type inference or member completion isn't working, annotating the argument the expected type may help address these problems. \ No newline at end of file From bd493e11d9a19d019219dec11bb7fa0d5ccd2bf6 Mon Sep 17 00:00:00 2001 From: Carlos Date: Tue, 23 Apr 2019 08:26:11 +0100 Subject: [PATCH 7/7] improve wording on Typescript Annotating Props --- src/v2/guide/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 67a02597ed..4ebefb79d0 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -217,4 +217,4 @@ const Component = Vue.extend({ } }) ``` -If you find validator not getting type inference or member completion isn't working, annotating the argument the expected type may help address these problems. \ No newline at end of file +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.