diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md index 5fa87fef04..c7c0ed4a87 100644 --- a/src/guide/typescript/composition-api.md +++ b/src/guide/typescript/composition-api.md @@ -164,7 +164,8 @@ year.value = '2020' Sometimes we may need to specify complex types for a ref's inner value. We can do that by using the `Ref` type: ```ts -import { ref, Ref } from 'vue' +import { ref } from 'vue' +import type { Ref } from 'vue' const year: Ref = ref('2020') @@ -269,7 +270,8 @@ function handleChange(event: Event) { Provide and inject are usually performed in separate components. To properly type injected values, Vue provides an `InjectionKey` interface, which is a generic type that extends `Symbol`. It can be used to sync the type of the injected value between the provider and the consumer: ```ts -import { provide, inject, InjectionKey } from 'vue' +import { provide, inject } from 'vue' +import type { InjectionKey } from 'vue' const key = Symbol() as InjectionKey diff --git a/src/guide/typescript/options-api.md b/src/guide/typescript/options-api.md index 79ee9f42d3..b6d668f221 100644 --- a/src/guide/typescript/options-api.md +++ b/src/guide/typescript/options-api.md @@ -35,7 +35,8 @@ However, the runtime `props` options only support using constructor functions as To annotate complex props types, we can use the `PropType` utility type: ```ts -import { defineComponent, PropType } from 'vue' +import { defineComponent } from 'vue' +import type { PropType } from 'vue' interface Book { title: string @@ -69,7 +70,8 @@ export default defineComponent({ Because of a [design limitation](https://github.com/microsoft/TypeScript/issues/38845) in TypeScript, you have to be careful when using function values for `validator` and `default` prop options - make sure to use arrow functions: ```ts -import { defineComponent, PropType } from 'vue' +import { defineComponent } from 'vue' +import type { PropType } from 'vue' interface Book { title: string