Skip to main content

TypeScript Support

CodeHarborHub runs on Docusaurus, which is written entirely in TypeScript and provides first-class TypeScript support.

The minimum recommended version is TypeScript 5.1.

Initialization​

You can start a new CodeHarborHub site with full TypeScript support right from the scaffolding step.
Use the --typescript flag when creating the project:

terminal
npx create-docusaurus@latest my-site classic --typescript

This automatically sets up .ts and .tsx support for theme components and pages.

Setup for Existing Projects​

If you’re migrating an existing CodeHarborHub site to TypeScript, install these packages:

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

Then create a tsconfig.json at your project root:

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

Docusaurus itself does not compile your TypeScript files. The tsconfig.json improves editor IntelliSense, and you can run tsc to type-check code locally or in CI.

Typing the Config File​

You can write your site configuration in TypeScript for better type safety.

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

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

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

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

export default config;
Using JSDoc in a JavaScript config

If you prefer to keep docusaurus.config.js, you can still get type checking by adding // @ts-check and JSDoc annotations:

docusaurus.config.js
// @ts-check
/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'CodeHarborHub',
  favicon: 'img/favicon.ico',
  presets: [
    [
      '@docusaurus/preset-classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        /* preset options */
      }),
    ],
  ],
  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      /* theme options */
    }),
};

export default config;

Swizzling TypeScript Theme Components​

When swizzling (overriding) components, add the --typescript flag to generate TypeScript files:

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

This creates a Footer/index.tsx and a matching styles.module.css in src/theme.

All official Docusaurus themes support TypeScript swizzling, including:

If you maintain a custom theme, see the Lifecycle APIs guide to add TypeScript support.

✅ With TypeScript configured, CodeHarborHub gains type safety, autocompletion, and better developer experience across the entire documentation platform.