---
title: "TypeScript"
description: "了解如何在 Nuxt Bridge 中使用 TypeScript。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/bridge/typescript"
---
# TypeScript

> 了解如何在 Nuxt Bridge 中使用 TypeScript。

## 移除模块

- 移除 `@nuxt/typescript-build`：Bridge 已提供相同功能
- 移除 `@nuxt/typescript-runtime` 和 `nuxt-ts`：Nuxt 2 已内置运行时支持

### 设置 `bridge.typescript`

```ts
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    typescript: true,
    nitro: false, // If migration to Nitro is complete, set to true
  },
})
```

## 更新 `tsconfig.json`

如果你正在使用 TypeScript，可以编辑你的 `tsconfig.json` 以利用自动生成的 Nuxt 类型：

```diff [tsconfig.json]
{
+ "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    ...
  }
}
```

::note
由于 `.nuxt/tsconfig.json` 是生成的并不会被提交到版本控制，你需要在运行测试前生成该文件。在测试前添加 `nuxi prepare` 作为一个步骤，否则你会看到 `TS5083: Cannot read file '~/.nuxt/tsconfig.json'`

对于现代 Nuxt 项目，我们建议使用 [TypeScript 项目引用](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/tsconfig)，而不是直接扩展 `.nuxt/tsconfig.json`。
::

::note
请记住，所有从 `./.nuxt/tsconfig.json` 扩展过来的选项将会被你 `tsconfig.json` 中定义的选项覆盖。用你自己的配置覆盖诸如 `"compilerOptions.paths"` 的选项会导致 TypeScript 不再考虑来自 `./.nuxt/tsconfig.json` 的模块解析。这可能会导致诸如 `#imports` 之类的模块解析无法被识别。

如果你需要在 `./.nuxt/tsconfig.json` 提供的选项基础上进一步扩展，可以在你的 `nuxt.config` 中使用 `alias` 属性。`nuxi` 会拾取这些别名并相应地扩展 `./.nuxt/tsconfig.json`。
::


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.