TypeScript 配置

当你运行 [wxt prepare](/api/cli/wxt-prepare) 时，WXT 会在 <rootDir>/.wxt/tsconfig.json> 中为你项目生成一个基 TSConfig 文件。

在最基础的情况下，你需要在你的根目录中创建一个 TSConfig，如下所示：

// <rootDir>/tsconfig.json
{
  "extends": ".wxt/tsconfig.json",
}

或者如果你使用的是 monorepo，你可能不想继承配置。如果不进行扩展，则需要将 .wxt/wxt.d.ts 添加到 TypeScript 项目中：

/// <reference path="./.wxt/wxt.d.ts" />

编译选项

要指定自定义的编译选项，请在 <rootDir>/tsconfig.json> 中添加它们：

// <rootDir>/tsconfig.json
{
  "extends": ".wxt/tsconfig.json",
  "compilerOptions": {
    "jsx": "preserve",
  },
}

TSConfig 路径

WXT 提供一组默认的路径别名。

Alias	To	示例
~~	<rootDir>/*	import "~~/scripts"
@@	<rootDir>/*	import "@@/scripts"
~	<srcDir>/*	import { toLowerCase } from "~/utils/strings"
@	<srcDir>/*	import { toLowerCase } from "@/utils/strings"

要添加自定义的别名，请不要将它们添加到你的 tsconfig.json 中！相反，使用 wxt.config.ts 中的 [alias选项](/api/reference/wxt/interfaces/InlineConfig#alias)。

这会将你的自定义别名在下一次运行 wxt prepare 时添加到 <rootDir>/.wxt/tsconfig.json>。它还将其别名添加到打包器中，以便它可以解决导入。

import { resolve } from 'node:path';

export default defineConfig({
  alias: {
    // 目录：
    testing: resolve('utils/testing'),
    // 文件：
    strings: resolve('utils/strings.ts'),
  },
});

import { fakeTab } from 'testing/fake-objects';
import { toLowerCase } from 'strings';