Tooling > TypeScript Support (#53)

* feat: translate typescript support page into japanese

* fix: apply feedback

Author: nozomuikuta

src/guide/typescript-support.md

@@ -1,77 +1,77 @@
-# TypeScript Support
+# TypeScript のサポート
 
-> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.
+> [Vue CLI](https://cli.vuejs.org) は、ビルトインの TypeScript ツールサポートを提供します。
 
-## Official Declaration in NPM Packages
+## NPM パッケージ内の公式型宣言
 
-A static type system can help prevent many potential runtime errors as applications grow, which is why Vue 3 is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has a first-class citizen support.
+静的型システムは、特にアプリケーションが成長するに伴い、多くの潜在的なランタイムエラーを防止するのに役立ち、これが Vue 3 が TypeScript で書かれている理由です。このことは、あなたが Vue 3 とともに TypeScript を使うために追加のツールを必要としないことを意味します - それは第一級市民 (first-class citizen) としてサポートを受けられます。
 
-## Recommended Configuration
+## 推奨される構成
 
 ```js
 // tsconfig.json
 {
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    // this enables stricter inference for data properties on `this`
+    // これは `this` のデータプロパティに対してより厳密な推論を可能にします
     "strict": true,
     "jsx": "preserve",
     "moduleResolution": "node"
   }
 }
 ```
 
-Note that you have to include `strict: true` (or at least `noImplicitThis: true` which is a part of `strict` flag) to leverage type checking of `this` in component methods otherwise it is always treated as `any` type.
+コンポーネントメソッドにおける `this` の型チェックを活用するために `strict: true` (もしくは少なくとも `strict` フラグの一部である `noImplicitThis: true`) を含める必要があることに注意してください。そうでないと、`this` は常に `any` 型として扱われます。
 
-See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.
+より詳細を知るためには、[TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) を参照してください。
 
-## Development Tooling
+## 開発ツール
 
-### Project Creation
+### プロジェクトの作成
 
-[Vue CLI](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:
+[Vue CLI](https://github.com/vuejs/vue-cli) は、TypeSript を使った新しいプロジェクトを作成できます。はじめるためには:
 
 ```bash
-# 1. Install Vue CLI, if it's not already installed
+# 1. Vue CLI をまだインストールしていなければ、インストールします
 npm install --global @vue/cli@next
 
-# 2. Create a new project, then choose the "Manually select features" option
+# 2. 新しいプロジェクトを作成し、"Manually select features" を選択してください
 vue create my-project-name
 
-# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:
+# もしすでに TypeScript をもたない Vue CLI で作成したプロジェクトがある場合、適切な Vue CLI プラグインを追加してください:
 vue add typescript
 ```
 
-Make sure that `script` part of the component has TypeScript set as a language:
+コンポーネントの `script` の部分に言語として TypeScript が設定されていることを確認してください:
 
 ```html
 <script lang="ts">
   ...
 </script>
 ```
 
-### Editor Support
+### エディタによるサポート
 
-For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.
+TypeScript による Vue アプリケーションの開発のために、すぐに利用できる TypeScript サポートを提供している [Visual Studio Code](https://code.visualstudio.com/) を強く推奨します。[単一ファイルコンポーネント](./single-file-components.html) (SFCs) を使用している場合、SFC 内部での TypeScript の推論やその他の優れた機能を提供している、素晴らしい [Vetur エクステンション](https://github.com/vuejs/vetur) を入手してください。
 
-[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.
+[WebStorm](https://www.jetbrains.com/webstorm/) もすぐに利用できる TypeScript と Vue のサポートを提供しています。
 
-## Defining Vue components
+## Vue コンポーネントを定義する
 
-To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent` global method:
+TypeScript に Vue コンポーネントオブションのなかで適切に型を推論させるために、`defineComponent` グローバルメソッドでコンポーネントを定義する必要があります:
 
 ```ts
 import { defineComponent } from 'vue'
 
 const Component = defineComponent({
-  // type inference enabled
+  // 型推論が有効になります
 })
 ```
 
-## Using with Options API
+## オプション API とともに使用する
 
-TypeScript should be able to infer most of the types without defining types explicitly. For example, if you have a component with a number `count` property, you will have an error if you try to call a string-specific method on it:
+TypeScript は明示的に型を定義することなく、ほとんどの型を推論できるようにあるべきです。例えば、数値である `count` プロパティを持つコンポーネントがある場合、文字列に特有のメソッドを呼び出すとエラーになります:
 
 ```ts
 const Component = defineComponent({
@@ -81,12 +81,12 @@ const Component = defineComponent({
     }
   },
   mounted() {
-    const result = this.count.split('') // => Property 'split' does not exist on type 'number'
+    const result = this.count.split('') // => 'split' プロパティは 'number' 型に存在しません
   }
 })
 ```
 
-If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions):
+複雑な型や推論の場合、[タイプアサーション (type assertion)](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions) を使用してキャストすることができます:
 
 ```ts
 interface Book {
@@ -108,9 +108,9 @@ const Component = defineComponent({
 })
 ```
 
-### Annotating Return Types
+### 戻り値の型にアノテーションをつける
 
-Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type computed properties.
+Vue の型宣言ファイルの循環的な性質により、TypeScript は算出プロパティの型を推論することが困難な場合があります。この理由により、算出プロパティの戻り値の型にアノテーションをつける必要があります。
 
 ```ts
 import { defineComponent } from 'vue'
@@ -122,12 +122,12 @@ const Component = defineComponent({
     }
   },
   computed: {
-    // needs an annotation
+    // アノテーションが必要です
     greeting(): string {
       return this.message + '!'
     }
 
-    // in a computed with a setter, getter needs to be annotated
+    // セッターを持つ算出プロパティのでは、ゲッターにアノテーションが必要です
     greetingUppercased: {
       get(): string {
         return this.greeting.toUpperCase();
@@ -140,9 +140,9 @@ const Component = defineComponent({
 })
 ```
 
-### Annotating Props
+### Props にアノテーションをつける
 
-Vue does a runtime validation on props with a `type` defined. To provide these types to TypeScript, we need to cast the constructor with `PropType`:
+Vue は `type` が定義されたプロパティについてランタイムバリデーションを行います。これらの型を TypeScript に提供するため、`PropType` を伴うコンストラクタをキャストする必要があります:
 
 ```ts
 import { defineComponent, PropType } from 'vue'
@@ -170,11 +170,12 @@ const Component = defineComponent({
 })
 ```
 
-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.
+バリデータの型推論やメンバの補完が機能していない場合、引数に期待される型のアノテーションをつけることで問題に対処できるかもしれません。
 
-## Using with Composition API
+## コンポジション API とともに使用する
 
 On `setup()` function, you don't need to pass a typing to `props` parameter as it will infer types from `props` component option.
+`setup()` 関数においては、`props` 引数に型をつける必要はありません。`setup()` 関数は　`props` コンポーネントオプションから型を推論するからです。
 
 ```ts
 import { defineComponent } from 'vue'
@@ -188,15 +189,16 @@ const Component = defineComponent({
   },
 
   setup(props) {
-    const result = props.message.split('') // correct, 'message' is typed as a string
-    const filtered = props.message.filter(p => p.value) // an error will be thrown: Property 'filter' does not exist on type 'string'
+    const result = props.message.split('') // 正しいです, 'message' は文字列 (string) として型づけされます
+    const filtered = props.message.filter(p => p.value) // エラーが起こります: Property 'filter' does not exist on type 'string'
   }
 })
 ```
 
-### Typing `ref`s
+### `ref` を型定義する
 
 Refs infer the type from the initial value:
+Ref は初期値から肩を推論します:
 
 ```ts
 import { defineComponent, ref } from 'vue'
@@ -210,21 +212,23 @@ const Component = defineComponent({
 })
 ```
 
-Sometimes we may need to specify complex types for a ref's inner value. We can do that simply passing a generic argument when calling ref to override the default inference:
+ときどき、ref の内部的な値の複雑な型を特定する必要があるかもしれません。デフォルトの推論をオーバーライドするために ref を呼び出すときに、単純にジェネリック引数を渡すことができます:
 
 ```ts
 const year = ref<string | number>('2020') // year's type: Ref<string | number>
+const year = ref<string | number>('2020') // year の型: Ref<string | number>
 
-year.value = 2020 // ok!
+year.value = 2020 // OKです!
 ```
 
-::: tip Note
+::: tip ノート
 If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`.
+ジェネリックの型が不明の場合、`ref` を `Ref<T>` にキャストすることを推奨します。
 :::
 
-### Typing `reactive`
+### `reactive` を型定義する
 
-When typing a `reactive` property, we can use interfaces:
+`reactive` プロパティを型定義する場合、推論を使用できます:
 
 ```ts
 import { defineComponent, reactive } from 'vue'
@@ -238,17 +242,17 @@ export default defineComponent({
   name: 'HelloWorld',
   setup() {
     const book = reactive<Book>({ title: 'Vue 3 Guide' })
-    // or
+    // もしくは
     const book: Book = reactive({ title: 'Vue 3 Guide' })
-    // or
+    // もしくは
     const book = reactive({ title: 'Vue 3 Guide' }) as Book
   }
 })
 ```
 
-### Typing `computed`
+### 算出プロパティを型定義する
 
-Computed values will automatically infer the type from returned value
+算出プロパティの値は返り値の型から自動的に推論します:
 
 ```ts
 import { defineComponent, ref, computed } from 'vue'
@@ -258,10 +262,10 @@ export default defineComponent({
   setup() {
     let count = ref(0)
 
-    // read-only
+    // 読み取り専用
     const doubleCount = computed(() => count.value * 2)
 
-    const result = doubleCount.value.split('') // => Property 'split' does not exist on type 'number'
+    const result = doubleCount.value.split('') // Property 'split' does not exist on type 'number'
   }
 })
 ```