From fcc7691885eb56d1a9e094ba638ba73b75393abf Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Wed, 26 May 2021 20:36:09 +0900
Subject: [PATCH 1/4] fix variable name in code.

https://github.com/vuejs/docs-next/commit/e56c4561b3f20b62287afad3279e3fb213c0f919
---
 src/guide/introduction.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/introduction.md b/src/guide/introduction.md
index 4e188eaa..69a90999 100644
--- a/src/guide/introduction.md
+++ b/src/guide/introduction.md
@@ -55,7 +55,7 @@ Vue.createApp(Counter).mount('#counter')
 これで、初めての Vue アプリケーションが作成できました！一見するとただ文字列をレンダリングするだけのテンプレートですが、Vue は内部で多くの処理をおこなっています。データと DOM は関連付けられ、すべてが **リアクティブ（反応的）** になっています。どうすればそれが分かるのでしょうか？以下の例で、`counter` プロパティが 1 秒ごとにインクリメントされたとき、レンダリングされた DOM がどのように変化するかを見てみましょう:
 
 ```js{8-10}
-const CounterApp = {
+const Counter = {
   data() {
     return {
       counter: 0

From e448c9cefb2fe1da22ca4a003179505def1c3f85 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Wed, 26 May 2021 20:37:52 +0900
Subject: [PATCH 2/4] fix import closed quote

https://github.com/vuejs/docs-next/commit/fa2c887452b8b3f053d7788903c0fb4f8709a708
---
 src/guide/composition-api-provide-inject.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/guide/composition-api-provide-inject.md b/src/guide/composition-api-provide-inject.md
index 7853087e..6c440929 100644
--- a/src/guide/composition-api-provide-inject.md
+++ b/src/guide/composition-api-provide-inject.md
@@ -60,7 +60,7 @@ export default {
 
 <script>
 import { provide } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
 
 export default {
   components: {
@@ -123,7 +123,7 @@ export default {
 
 <script>
 import { provide, reactive, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
 
 export default {
   components: {
@@ -159,7 +159,7 @@ export default {
 
 <script>
 import { provide, reactive, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
 
 export default {
   components: {
@@ -198,7 +198,7 @@ export default {
 
 <script>
 import { provide, reactive, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
 
 export default {
   components: {
@@ -254,7 +254,7 @@ export default {
 
 <script>
 import { provide, reactive, readonly, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
 
 export default {
   components: {

From 5cbfc26409025885d1440975132dd8f7ccc3b169 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Wed, 26 May 2021 20:40:51 +0900
Subject: [PATCH 3/4] docs: Update link & fix prop name in
 typescript-support.md

https://github.com/vuejs/docs-next/commit/64cbc012abfe8f9e6b643e5de8aa4a7251e74dff
---
 src/guide/typescript-support.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md
index 07c314e2..cdcd1559 100644
--- a/src/guide/typescript-support.md
+++ b/src/guide/typescript-support.md
@@ -131,7 +131,7 @@ const Component = defineComponent({
 })
 ```
 
-複雑な型や推論の場合、[タイプアサーション (type assertion)](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions) を使用してキャストすることができます:
+複雑な型や推論の場合、[タイプアサーション (type assertion)](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions) を使用してキャストすることができます:
 
 ```ts
 interface Book {
@@ -260,7 +260,7 @@ const Component = defineComponent({
 ```
 
 ::: warning
-TypeScript には、関数式の型推論に [設計上の制限](https://github.com/microsoft/TypeScript/issues/38845) があるため、 `validators` と、オブジェクトや配列の `default` 値に注意する必要があります:
+TypeScript には、関数式の型推論に [設計上の制限](https://github.com/microsoft/TypeScript/issues/38845) があるため、 `validator` と、オブジェクトや配列の `default` 値に注意する必要があります:
 :::
 
 ```ts

From 1bfa1df6853698e2fe365cecbaad28a3e4d6d1cc Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Wed, 26 May 2021 21:12:41 +0900
Subject: [PATCH 4/4] Added template refs typing instruction

https://github.com/vuejs/docs-next/commit/d5c66359c17548ce74f60f79c5fe05eb6d46b682
---
 src/guide/typescript-support.md | 77 +++++++++++++++++++++++++++++++--
 1 file changed, 74 insertions(+), 3 deletions(-)

diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md
index cdcd1559..bea5e2a6 100644
--- a/src/guide/typescript-support.md
+++ b/src/guide/typescript-support.md
@@ -221,10 +221,10 @@ const Component = defineComponent({
     // セッターを持つ算出プロパティのでは、ゲッターにアノテーションが必要です
     greetingUppercased: {
       get(): string {
-        return this.greeting.toUpperCase();
+        return this.greeting.toUpperCase()
       },
       set(newValue: string) {
-        this.message = newValue.toUpperCase();
+        this.message = newValue.toUpperCase()
       }
     }
   }
@@ -297,7 +297,7 @@ const Component = defineComponent({
 })
 ```
 
-### emits にアノテーションをつける
+### Emit にアノテーションをつける
 
 発行されたイベントのペイロードにアノテーションをつけることができます。また、すべての宣言されていない発行されたイベントは、呼び出されたときに型エラーが発生します:
 
@@ -372,6 +372,77 @@ year.value = 2020 // OKです!
 ジェネリックの型が不明の場合、`ref` を `Ref<T>` にキャストすることを推奨します。
 :::
 
+### テンプレート参照を型定義する
+
+ときどき、子コンポーネントのパブリックメソッドを呼び出すために、テンプレート参照にアノテーションをつける必要があるかもしれません。例えば、 `MyModal` という子コンポーネントにモーダルを開くメソッドがあるとします:
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+const MyModal = defineComponent({
+  setup() {
+    const isContentShown = ref(false)
+    const open = () => (isContentShown.value = true)
+
+    return {
+      isContentShown,
+      open
+    }
+  }
+})
+```
+
+この親コンポーネントからテンプレート参照を介して、このメソッドを呼び出したいです:
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+const MyModal = defineComponent({
+  setup() {
+    const isContentShown = ref(false)
+    const open = () => (isContentShown.value = true)
+
+    return {
+      isContentShown,
+      open
+    }
+  }
+})
+
+const app = defineComponent({
+  components: {
+    MyModal
+  },
+  template: `
+    <button @click="openModal">Open from parent</button>
+    <my-modal ref="modal" />
+  `,
+  setup() {
+    const modal = ref()
+    const openModal = () => {
+      modal.value.open()
+    }
+
+    return { modal, openModal }
+  }
+})
+```
+
+この方法でも動作しますが、 `MyModal` とその利用可能なメソッドについての型情報がありません。これを解決するためには、 ref を作成するときに `InstanceType` を使う必要があります:
+
+```ts
+setup() {
+  const modal = ref<InstanceType<typeof MyModal>>()
+  const openModal = () => {
+    modal.value?.open()
+  }
+
+  return { modal, openModal }
+}
+```
+
+[オプショナルチェイニング](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) や他の方法を使って、 `modal.value` が未定義でないことの確認が必要であることに注意してください。
+
 ### `reactive` を型定義する
 
 `reactive` プロパティを型定義する場合、推論を使用できます: