From f74541fcec1fc7883dfad1f82d42bebbfdb7822a Mon Sep 17 00:00:00 2001 From: Herrington Darkholme Date: Sat, 28 Oct 2017 19:47:28 +0800 Subject: [PATCH 1/3] Recommend return type annotation (#1239) * Recommend return type annotation * make explanation clear, thank @DanielRosenwasser --- src/v2/guide/typescript.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 174eb0374..2de839e14 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -139,3 +139,39 @@ var vm = new Vue({ myOption: 'Hello' }) ``` + +## Annotating Return Types + +Because of the circular nature of Vue's declaration files, TypeScript may have difficulties inferring the types of certain methods. +For this reason, you may need to annotate the return type on methods like `render` and those in `computed`. + +```ts +import Vue, { VNode } from 'vue' + +const Component = Vue.extend({ + data() { + return { + msg: 'Hello' + } + }, + methods: { + // need annotation due to `this` in return type + greet(): string { + return this.msg + ' world' + } + }, + computed: { + // need annotation + greeting(): string { + return this.greet() + '!' + } + }, + // `createElement` is inferred, but `render` needs return type + render(createElement): VNode { + return createElement('div', this.greeting) + } +}) +``` + +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. From b1d50a25ae7b1e7a2630414155d8971cf4338dc0 Mon Sep 17 00:00:00 2001 From: re-fort Date: Sun, 29 Oct 2017 12:51:36 +0900 Subject: [PATCH 2/3] translate --- src/v2/guide/typescript.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 2de839e14..62df151b2 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -140,10 +140,10 @@ var vm = new Vue({ }) ``` -## Annotating Return Types +## 戻り値の型にアノテーションをつける -Because of the circular nature of Vue's declaration files, TypeScript may have difficulties inferring the types of certain methods. -For this reason, you may need to annotate the return type on methods like `render` and those in `computed`. +Vue の宣言ファイルは循環的な性質を持つため、TypeScript は特定のメソッドの型を推論するのが困難な場合があります。 +この理由のため、`render` や `computed` のメソッドに戻り値の型のアノテーションを付ける必要があるかもしれません。 ```ts import Vue, { VNode } from 'vue' @@ -155,23 +155,23 @@ const Component = Vue.extend({ } }, methods: { - // need annotation due to `this` in return type + // 戻り値の型の `this` のために、アノテーションが必要です greet(): string { return this.msg + ' world' } }, computed: { - // need annotation + // アノテーションが必要です greeting(): string { return this.greet() + '!' } }, - // `createElement` is inferred, but `render` needs return type + // `createElement` は推論されますが、`render` は戻り値の方が必要です render(createElement): VNode { return createElement('div', this.greeting) } }) ``` -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. +型推論やメンバの補完が機能していない場合、特定のメソッドにアノテーションを付けるとこれらの問題に対処できます。 +`--noImplicitAny` オプションを使用すると、これらのアノテーションが付けられていないメソッドの多くを見つけるのに役立ちます。 \ No newline at end of file From 7c324fe522bc21ee2db7b1dd4b4154c43da30780 Mon Sep 17 00:00:00 2001 From: re-fort Date: Sun, 29 Oct 2017 12:53:05 +0900 Subject: [PATCH 3/3] update date --- 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 62df151b2..831bf0a91 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -1,6 +1,6 @@ --- title: TypeScript のサポート -updated: 2017-10-23 +updated: 2017-10-29 type: guide order: 404 ---