ts reference links for options api

Author: yyx990803

src/guide/components/events.md

@@ -102,8 +102,6 @@ const emit = defineEmits(['inFocus', 'submit'])
 
 The returned `emit` function can be used to emit events in JavaScript.
 
-See also: [Typing Component Emits](/guide/typescript/composition-api.html#typing-component-emits) <Badge type="ts" text="TS" />
-
 If not using `<script setup>`, events should be declared using the [`emits`](/api/options-state.html#emits) option, and the `emit` function is exposed on the `setup()` context:
 
 ```js
@@ -126,6 +124,41 @@ export default {
 
 </div>
 
+The `emits` option also supports an object syntax, which allows us to perform runtime validation of the payload of the emitted events:
+
+<div class="composition-api">
+
+```vue
+<script setup>
+const emit = defineEmits({
+  submit(payload) {
+    // return `true` or `false` to indicate
+    // validation pass / fail
+  }
+})
+</script>
+```
+
+See also: [Typing Component Emits](/guide/typescript/composition-api.html#typing-component-emits) <Badge type="ts" text="TS" />
+
+</div>
+<div class="options-api">
+
+```js
+export default {
+  emits: {
+    submit(payload) {
+      // return `true` or `false` to indicate
+      // validation pass / fail
+    }
+  }
+}
+```
+
+See also: [Typing Component Emits](/guide/typescript/options-api.html#typing-component-emits) <Badge type="ts" text="TS" />
+
+</div>
+
 Although optional, it is recommended to define all emitted events in order to better document how a component should work. It also allows Vue to exclude known listeners from [fallthrough attributes](/guide/components/attrs.html#v-on-listener-inheritance).
 
 :::tip

src/guide/components/props.md

@@ -10,6 +10,8 @@ aside: deep
 
 Vue components require explicit props declaration so that Vue knows what external props passed to the component should be treated as fallthrough attributes (which will be discussed in the next section).
 
+<div class="composition-api">
+
 In SFCs using `<script setup>`, props can be declared using the `defineProps()` macro:
 
 ```vue
@@ -20,9 +22,7 @@ console.log(props.foo)
 </script>
 ```
 
-In non-`<script setup>` components, props are declared using the `props` option:
-
-<div class="composition-api">
+In non-`<script setup>` components, props are declared using the [`props`](/api/options-state.html#props) option:
 
 ```js
 export default {
@@ -34,9 +34,14 @@ export default {
 }
 ```
 
+Notice the argument passed to `defineProps()` is the same as the value provided to the `props` options: the same props options API is shared between the two declaration styles.
+
 </div>
+
 <div class="options-api">
 
+Props are declared using the [`props`](/api/options-state.html#props) option:
+
 ```js
 export default {
   props: ['foo'],
@@ -49,10 +54,22 @@ export default {
 
 </div>
 
-Notice the argument passed to `defineProps()` is the same as the value provided to the `props` options: the same props options API is shared between the two declaration styles.
-
 In addition to declaring props using an array of strings, we can also use the object syntax:
 
+<div class="options-api">
+
+```js
+export default {
+  props: {
+    title: String,
+    likes: Number
+  }
+}
+```
+
+</div>
+<div class="composition-api">
+
 ```js
 // in <script setup>
 defineProps({
@@ -62,7 +79,7 @@ defineProps({
 ```
 
 ```js
-// non-<script setup>
+// in non-<script setup>
 export default {
   props: {
     title: String,
@@ -71,10 +88,18 @@ export default {
 }
 ```
 
+</div>
+
 For each property in the object declaration syntax, the key is the name of the prop, while the value should be the constructor function of the expected type.
 
 This not only documents your component, but will also warn other developers using your component in the browser console if they pass the wrong type. We will discuss more details about [prop validation](#prop-validation) further down this page.
 
+<div class="options-api">
+
+See also: [Typing Component Props](/guide/typescript/options-api.html#typing-component-props) <Badge type="ts" text="TS" />
+
+</div>
+
 <div class="composition-api">
 
 If you are using TypeScript with `<script setup>`, it's also possible to declare props using pure type annotations:

src/guide/essentials/computed.md

@@ -89,6 +89,8 @@ Try to change the value of the `books` array in the application `data` and you w
 
 You can data-bind to computed properties in templates just like a normal property. Vue is aware that `this.publishedBooksMessage` depends on `this.author.books`, so it will update any bindings that depend on `this.publishedBooksMessage` when `this.author.books` changes.
 
+See also: [Typing Computed Properties](/guide/typescript/options-api.html#typing-computed) <Badge type="ts" text="TS" />
+
 </div>
 
 <div class="composition-api">

src/guide/essentials/event-handling.md

@@ -118,6 +118,11 @@ A method handler automatically receives the native DOM Event object that trigger
 
 See also: [Typing Event Handlers](/guide/typescript/composition-api.html#typing-event-handlers) <Badge type="ts" text="TS" />
 
+</div>
+<div class="options-api">
+
+See also: [Typing Event Handlers](/guide/typescript/options-api.html#typing-event-handlers) <Badge type="ts" text="TS" />
+
 </div>
 
 ### Method vs. Inline Detection

src/guide/reusability/plugins.md

@@ -85,6 +85,8 @@ Our `$translate` function will take a string such as `greetings.hello`, look ins
 <h1>{{ $translate('greetings.hello') }}</h1>
 ```
 
+See also: [Augmenting Global Properties](/guide/typescript/options-api.html#augmenting-global-properties) <Badge type="ts" text="TS" />
+
 :::tip
 Use global properties scarcely, since it can quickly become confusing if too many global properties injected by different plugins are used throughout an app.
 :::

src/guide/typescript/options-api.md

@@ -8,7 +8,7 @@ While Vue does support TypeScript usage with Options API, it is recommended to u
 
 ## Typing Component Props
 
-When `defineComponent()` is used, Vue is able to infer the types for the props based on the `props` option, taking additional options such as `required: true` and `default` into account:
+Type inference for props in Options API requires wrapping the component with `defineComponent()`. With it, Vue is able to infer the types for the props based on the `props` option, taking additional options such as `required: true` and `default` into account:
 
 ```ts
 import { defineComponent } from 'vue'
@@ -174,6 +174,39 @@ const Component = defineComponent({
 
 Explicit annotations may also be required in some edge cases where TypeScript fails to infer the type of a computed property due to circular inference loops.
 
+## Typing Event Handlers
+
+When dealing with native DOM events, it might be useful to type the argument we pass to the handler correctly. Let's take a look at this example:
+
+```vue
+<script lang="ts">
+export default {
+  methods: {
+    handleChange(event) {
+      // `event` implicitly has `any` type
+      console.log(event.target.value)
+    }
+  }
+}
+</script>
+
+<template>
+  <input type="text" @change="handleChange" />
+</template>
+```
+
+Without type annotation, the `event` argument will implicitly have a type of `any`. This will also result in a TS error if `"strict": true` or `"noImplicitAny": true` are used in `tsconfig.json`. It is therefore recommended to explicitly annotate the argument of event handlers. In addition, you may need to explicitly cast properties on `event`:
+
+```ts
+export default {
+  methods: {
+    handleChange(event: Event) {
+      console.log((event.target as HTMLInputElement).value)
+    }
+  }
+}
+```
+
 ## Augmenting Global Properties
 
 Some plugins install globally available properties to all component instances via [`app.config.globalProperties`](/api/application.html#app-config-globalproperties). For example, we may install `this.$http` for data-fetching or `this.$translate` for internationalization. To make this play well with TypeScript, Vue exposes a `ComponentCustomProperties` interface designed to be augmented via [TypeScript module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation):