对 TypeScript 的支持

安装设置#

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

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.tsxstyles.module.css 文件。

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

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