Skip to main content

TypeScript サポート

DocusaurusはTypeScriptで書かれており、最上級クラスのTypeScriptサポートを提供します。

The minimum required version is TypeScript 5.1.

初期設定​

Docusaurus は TypeScript を使ったテーマコンポーネントの作成とその使用をサポートしています。 If the init template provides a TypeScript variant, you can directly initialize a site with full TypeScript support by using the --typescript flag.

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

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

セットアップ​

Add the following packages to your project:

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 のテーマコンポーネントを書き始めることができます。

設定ファイルを入力する​

It is possible to use a TypeScript config file in Docusaurus.

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;
It is also possible to use JSDoc type annotations within a .js file:

デフォルトでは、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 テーマコンポーネントをサポートするテーマの場合、--typescript フラグをswizzleの最後に追加して、TypeScript のソースコードを取得できます。 たとえば、次のコマンドは src/theme/Footer 以下に index.tsx と styles.module.css を生成します。

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

Docusaurus公式テーマは全て、theme-classic・theme-live-codeblock・theme-search-algoliaを含むTypeScriptテーマコンポーネントをサポートしています。 あなたがDocusaurusテーマパッケージの作成者で、TypeScriptに対応させたいと考えている場合、ライフサイクルAPIの説明を参照してください。