メインコンテンツにスキップ
バージョン: 3.5.2

TypeScriptのサポート

DocusaurusはTypeScriptで記述されており、TypeScriptを完全にサポートしています。

必要な最小バージョンは TypeScript 5.1 です。

初期化​

Docusaurusは、TypeScriptのテーマコンポーネントの記述と使用をサポートしています。初期化テンプレートにTypeScriptのバリアントが提供されている場合、--typescript フラグを使用することで、TypeScriptを完全にサポートするサイトを直接初期化できます。

npx create-docusaurus@latest my-website classic --typescript

以下は、既存のプロジェクトをTypeScriptに移行する方法に関するガイドです。

セットアップ​

プロジェクトに以下のパッケージを追加します。

npm install --save-dev typescript @docusaurus/module-type-aliases @docusaurus/tsconfig @docusaurus/types

次に、以下の内容で tsconfig.json をプロジェクトルートに追加します。

tsconfig.json
{
  "extends": "@docusaurus/tsconfig",
  "compilerOptions": {
    "baseUrl": "."
  }
}

Docusaurusは、プロジェクトのコンパイルにこの tsconfig.json を使用しません。これは、より良いエディターエクスペリエンスのために追加されたもので、必要に応じて tsc を実行してコードの型チェックを自分で行うか、CI で行うことができます。

これで、TypeScriptのテーマコンポーネントの記述を開始できます。

設定ファイルの型指定​

Docusaurusでは、TypeScriptの設定ファイルを使用できます。

docusaurus.config.ts
import type {Config} from '@docusaurus/types';
import type * as Preset from '@docusaurus/preset-classic';

const config: Config = {
  title: 'My Site',
  favicon: 'img/favicon.ico',

  /* Your site config here */

  presets: [
    [
      'classic',
      {
        /* Your preset config here */
      } satisfies Preset.Options,
    ],
  ],

  themeConfig: {
    /* Your theme config here */
  } satisfies Preset.ThemeConfig,
};

export default config;
JSDocによる型注釈を.jsファイル内で使用することも可能です。

デフォルトでは、DocusaurusのTypeScript設定はJavaScriptファイルの型チェックを行いません。

// @ts-check コメントは、npx tsc を実行したときに設定ファイルが正しく型チェックされるようにします。

docusaurus.config.js
// @ts-check

/** @type {import('@docusaurus/types').Config} */
const config = {
  tagline: 'Dinosaurs are cool',
  favicon: 'img/favicon.ico',

  /* Your site config here */

  presets: [
    [
      '@docusaurus/preset-classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      (
        {
          /* Your preset config here */
        }
      ),
    ],
  ],
  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    (
      {
        /* Your theme config here */
      }
    ),
};

export default config;
ヒント

型注釈は非常に便利で、IDEが設定オブジェクトの型を理解するのに役立ちます！

優れたIDE（VS Code、WebStorm、IntelliJなど）は、優れた自動補完エクスペリエンスを提供します。

TypeScriptテーマコンポーネントのスウィズル​

TypeScriptのテーマコンポーネントをサポートするテーマの場合、swizzle コマンドの最後に --typescript フラグを追加することで、TypeScriptのソースコードを取得できます。たとえば、次のコマンドを実行すると、index.tsx と styles.module.css が src/theme/Footer に生成されます。

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

Docusaurusの公式テーマはすべて、theme-classic、theme-live-codeblock、theme-search-algolia など、TypeScriptのテーマコンポーネントをサポートしています。TypeScriptのサポートを追加したいDocusaurusテーマパッケージの作成者は、ライフサイクルAPIのドキュメントを参照してください。