From 82d349ca416af5778b33e7d930d3b1a1802af660 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Fri, 30 Apr 2021 20:41:48 +0900 Subject: [PATCH 01/11] fix: remove original --- src/guide/typescript-support.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index 029db15c..4edfb53c 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -174,7 +174,6 @@ const Component = defineComponent({ ## コンポジション 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 @@ -197,7 +196,6 @@ const Component = defineComponent({ ### `ref` を型定義する -Refs infer the type from the initial value: Ref は初期値から肩を推論します: ```ts From 492ce8446da3ce8e9236136c05e18fd57ca76072 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Fri, 30 Apr 2021 20:45:13 +0900 Subject: [PATCH 02/11] Correct typo in "Single file components" reference https://github.com/vuejs/docs-next/commit/365d3708c0f8790a467824eba104c01b579af750#diff-c8904f42c96ea728eea302e9bc39484fbb58d2401b4017ad37ea848fc8f183e5 --- 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 4edfb53c..f09dca94 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -53,7 +53,7 @@ vue add typescript ### エディタによるサポート -TypeScript による Vue アプリケーションの開発のために、すぐに利用できる TypeScript サポートを提供している [Visual Studio Code](https://code.visualstudio.com/) を強く推奨します。[単一ファイルコンポーネント](./single-file-components.html) (SFCs) を使用している場合、SFC 内部での TypeScript の推論やその他の優れた機能を提供している、素晴らしい [Vetur エクステンション](https://github.com/vuejs/vetur) を入手してください。 +TypeScript による Vue アプリケーションの開発のために、すぐに利用できる TypeScript サポートを提供している [Visual Studio Code](https://code.visualstudio.com/) を強く推奨します。[単一ファイルコンポーネント](./single-file-component.html) (SFCs) を使用している場合、SFC 内部での TypeScript の推論やその他の優れた機能を提供している、素晴らしい [Vetur エクステンション](https://github.com/vuejs/vetur) を入手してください。 [WebStorm](https://www.jetbrains.com/webstorm/) もすぐに利用できる TypeScript と Vue のサポートを提供しています。 From 6c6cfd33bcee27c3795f241b12a29f597fe1c705 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Fri, 30 Apr 2021 20:47:31 +0900 Subject: [PATCH 03/11] Add TypeScript + Webpack Configuration Tip https://github.com/vuejs/docs-next/commit/80ddbb77178005bddf8f1e1af5623bca4abeaba6#diff-c8904f42c96ea728eea302e9bc39484fbb58d2401b4017ad37ea848fc8f183e5 --- src/guide/typescript-support.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index f09dca94..6f072563 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -26,6 +26,31 @@ より詳細を知るためには、[TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) を参照してください。 +## Webpack Configuration + +If you are using a custom Webpack configuration `ts-loader` needs to be configured to parse ` ``` +Or, if you want to combine TypeScript with a [JSX `render` function](/guide/render-function.html#jsx): + +```html + +``` + ### エディタによるサポート TypeScript による Vue アプリケーションの開発のために、すぐに利用できる TypeScript サポートを提供している [Visual Studio Code](https://code.visualstudio.com/) を強く推奨します。[単一ファイルコンポーネント](./single-file-component.html) (SFCs) を使用している場合、SFC 内部での TypeScript の推論やその他の優れた機能を提供している、素晴らしい [Vetur エクステンション](https://github.com/vuejs/vetur) を入手してください。 From c56fc1a419e41a4b08d3da835a6d0df9b89a3e08 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Fri, 30 Apr 2021 20:56:49 +0900 Subject: [PATCH 08/11] Add an example of using defineComponent in a single-file component https://github.com/vuejs/docs-next/commit/8eaf11b0e92d4aa484cb98854e027107f767d8e8#diff-c8904f42c96ea728eea302e9bc39484fbb58d2401b4017ad37ea848fc8f183e5 --- src/guide/typescript-support.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index c09cb013..562b0780 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -102,6 +102,18 @@ const Component = defineComponent({ }) ``` +If you're using [single-file components](/guide/single-file-component.html) then this would typically be written as: + +```vue + +``` + ## オプション API とともに使用する TypeScript は明示的に型を定義することなく、ほとんどの型を推論できるようにあるべきです。例えば、数値である `count` プロパティを持つコンポーネントがある場合、文字列に特有のメソッドを呼び出すとエラーになります: From 80f3301bd2606fa4fe42d693dac88f0fbad666a2 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Fri, 30 Apr 2021 20:58:44 +0900 Subject: [PATCH 09/11] docs: Add type definition for globalProperties in TypeScript chapter https://github.com/vuejs/docs-next/commit/8c9ebf1ff23556d0f43540569f1899e2562891d0#diff-c8904f42c96ea728eea302e9bc39484fbb58d2401b4017ad37ea848fc8f183e5 --- src/guide/typescript-support.md | 52 +++++++++++++++++++++++++++++++-- 1 file changed, 49 insertions(+), 3 deletions(-) diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index 562b0780..8970c932 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -153,6 +153,52 @@ const Component = defineComponent({ }) ``` +### Augmenting Types for `globalProperties` + +Vue 3 provides a [`globalProperties` object](../api/application-config.html#globalproperties) that can be used to add a global property that can be accessed in any component instance. For example, a [plugin](./plugins.html#writing-a-plugin) might want to inject a shared global object or function. + +```ts +// User Definition +import axios from 'axios' + +const app = Vue.createApp({}) +app.config.globalProperties.$http = axios + +// Plugin for validating some data +export default { + install(app, options) { + app.config.globalProperties.$validate = (data: object, rule: object) => { + // check whether the object meets certain rules + } + } +} +``` + +In order to tell TypeScript about these new properties, we can use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). + +In the above example, we could add the following type declaration: + +```ts +import axios from 'axios' + +declare module '@vue/runtime-core' { + export interface ComponentCustomProperties { + $http: typeof axios + $validate: (data: object, rule: object) => boolean + } +} +``` + +We can put this type declaration in the same file, or in a project-wide `*.d.ts` file (for example, in the `src/typings` folder that is automatically loaded by TypeScript). For library/plugin authors, this file should be specified in the `types` property in `package.json`. + +::: warning Make sure the declaration file is a TypeScript module +In order to take advantage of module augmentation, you will need to ensure there is at least one top-level `import` or `export` in your file, even if it is just `export {}`. + +[In TypeScript](https://www.typescriptlang.org/docs/handbook/modules.html), any file containing a top-level `import` or `export` is considered a 'module'. If type declaration is made outside of a module, it will overwrite the original types rather than augmenting them. +::: + +For more information about the `ComponentCustomProperties` type, see its [definition in `@vue/runtime-core`](https://github.com/vuejs/vue-next/blob/2587f36fe311359e2e34f40e8e47d2eebfab7f42/packages/runtime-core/src/componentOptions.ts#L64-L80) and [the TypeScript unit tests](https://github.com/vuejs/vue-next/blob/master/test-dts/componentTypeExtensions.test-d.tsx) to learn more. + ### 戻り値の型にアノテーションをつける Vue の型宣言ファイルの循環的な性質により、TypeScript は算出プロパティの型を推論することが困難な場合があります。この理由により、算出プロパティの戻り値の型にアノテーションをつける必要があります。 @@ -170,7 +216,7 @@ const Component = defineComponent({ // アノテーションが必要です greeting(): string { return this.message + '!' - } + }, // セッターを持つ算出プロパティのでは、ゲッターにアノテーションが必要です greetingUppercased: { @@ -179,8 +225,8 @@ const Component = defineComponent({ }, set(newValue: string) { this.message = newValue.toUpperCase(); - }, - }, + } + } } }) ``` From 38b87bf0706242f4736953d5e4fb2506e64b10ac Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Fri, 30 Apr 2021 22:03:41 +0900 Subject: [PATCH 10/11] docs: translate typescript support --- src/guide/typescript-support.md | 49 ++++++++++++++++----------------- 1 file changed, 24 insertions(+), 25 deletions(-) diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index 8970c932..60251af7 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -26,9 +26,9 @@ より詳細を知るためには、[TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) を参照してください。 -## Webpack Configuration +## Webpack の設定 -If you are using a custom Webpack configuration `ts-loader` needs to be configured to parse ` ``` -Or, if you want to combine TypeScript with a [JSX `render` function](/guide/render-function.html#jsx): +また、TypeScript と [JSX `render` 関数](/guide/render-function.html#jsx) を組み合わせたい場合: ```html