Skip to content

Commit 4fc8ad3

Browse files
Use 'import type' in TypeScript examples (#1656)
1 parent f4e39de commit 4fc8ad3

File tree

2 files changed

+8
-4
lines changed

2 files changed

+8
-4
lines changed

src/guide/typescript/composition-api.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,8 @@ year.value = '2020'
164164
Sometimes we may need to specify complex types for a ref's inner value. We can do that by using the `Ref` type:
165165

166166
```ts
167-
import { ref, Ref } from 'vue'
167+
import { ref } from 'vue'
168+
import type { Ref } from 'vue'
168169

169170
const year: Ref<string | number> = ref('2020')
170171

@@ -269,7 +270,8 @@ function handleChange(event: Event) {
269270
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:
270271

271272
```ts
272-
import { provide, inject, InjectionKey } from 'vue'
273+
import { provide, inject } from 'vue'
274+
import type { InjectionKey } from 'vue'
273275

274276
const key = Symbol() as InjectionKey<string>
275277

src/guide/typescript/options-api.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ However, the runtime `props` options only support using constructor functions as
3535
To annotate complex props types, we can use the `PropType` utility type:
3636

3737
```ts
38-
import { defineComponent, PropType } from 'vue'
38+
import { defineComponent } from 'vue'
39+
import type { PropType } from 'vue'
3940

4041
interface Book {
4142
title: string
@@ -69,7 +70,8 @@ export default defineComponent({
6970
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:
7071

7172
```ts
72-
import { defineComponent, PropType } from 'vue'
73+
import { defineComponent } from 'vue'
74+
import type { PropType } from 'vue'
7375

7476
interface Book {
7577
title: string

0 commit comments

Comments
 (0)