From 297d6f3ac40c99f9b52bd101f9497ddf44b8ce48 Mon Sep 17 00:00:00 2001
From: jmcooper <jim@cooperplanet.com>
Date: Thu, 6 Jul 2023 12:59:05 -0600
Subject: [PATCH] Add instructions for type-only imports

Because Vue uses isolatedModules, it is necessary to used type-only import syntax when importing types. Discovering the resolution for this edge case is difficult when first beginning to work with TypeScript and Vue/Vite.
---
 src/guide/typescript/overview.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/guide/typescript/overview.md b/src/guide/typescript/overview.md
index e3c519406e..5ffd5296bd 100644
--- a/src/guide/typescript/overview.md
+++ b/src/guide/typescript/overview.md
@@ -208,6 +208,21 @@ let x: string | number = 1
 If using Vue CLI or a webpack-based setup, TypeScript in template expressions requires `vue-loader@^16.8.0`.
 :::
 
+### Importing Types
+Because [`compilerOptions.isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) is set to `true` (due to Vite using [esbuild](https://esbuild.github.io/) for transpiling), it is necessary when using [`type only imports`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html) to use the `import type` syntax.
+
+In other words, when importing a type you would typically use:
+
+```vue
+import { Product } from 'product.interface
+```
+
+Instead, you should use:
+
+```vue
+import type { Product } from 'product.interface
+```
+
 ### Usage with TSX
 
 Vue also supports authoring components with JSX / TSX. Details are covered in the [Render Function & JSX](/guide/extras/render-function.html#jsx-tsx) guide.