对 TypeScript 的支持

安装设置#

Docusaurus 支持用 TypeScript 编写的主题组件。要开始使用 TypeScript，请在项目中添加 @docusaurus/module-type-aliases 以及一些 @types 依赖项：

npm
Yarn

npm install --save-dev typescript @docusaurus/module-type-aliases @types/react @types/react-router-dom @types/react-helmet @tsconfig/docusaurus

然后在项目的根目录下添加 tsconfig.json 文件，此文件包含的内容如下：

tsconfig.json

{
  "extends": "@tsconfig/docusaurus/tsconfig.json",
  "include": ["src/"]
}

Docusaurus 在编译您的项目时并不会用到 tsconfig.json 文件。添加此文件的目的只是为了获得更好的编辑器体验（虽然您可以通过手工或在 CI 上运行 tsc 来对你的代码进行类型检查）。

现在就可以用 TypeScript 来编写主题组件了。

替换用 TypeScript 编写的主题组件#

对于使用 TypeScript 编写的主题组件，可以在 swizzle 命令的末尾添加 --typescript 标记来获取该组件的 TypeScript 源码。例如，以下命令将在 src/theme/Footer 目录下生成 index.tsx 和 styles.module.css 文件。

npm
Yarn

npm run swizzle @docusaurus/theme-classic Footer -- --typescript

目前，唯一支持用 TypeScript 编写主题组件的官方 Docusaurus 主题是 @docusaurus/theme-classic。如果您是一名 Docusaurus 主题作者，并希望添加对 TypeScript 的支持，请参阅生命周期 API 文档。