Installation

Requirements

TypeDoc requires Node.js to be installed on your system. If you haven't done that already, head over to their site and follow their install instructions.

Installing TypeDoc is available as a node package. Using npm ensures that all relevant dependencies are setup correctly. You can choose to either install locally to your project or globally to the CLI.

TypeDoc aims to support the two latest TypeScript releases for the latest release. Depending on the scale of breaking changes introduced in a new TypeScript version, a given version may support more versions of TypeScript.

TypeDoc Version TypeScript Version(s)
0.25 4.6 through 5.2
0.24 4.6 through 5.1
0.23 4.6 through 5.0
0.22 4.0 through 4.7
0.21 4.0 through 4.4
0.20 3.9 through 4.2
0.19 3.9 through 4.0

Installation

If you want to use TypeDoc from your command line in a project, use the API in your project code, or TypeDoc in an npm script, a local installation is the recommended approach. First install TypeDoc in your project:

$ npm install typedoc --save-dev

or via yarn

$ yarn add -D typedoc

By saving TypeDoc to the project package.json file with the previous command, anyone who runs npm install on the project will have typedoc installed at the specific version required for the project.

The name of TypeDoc's executable is typedoc. To verify that it works, you can now invoke the CLI in your project using npx (npx is a tool bundled with npm), passing TypeDoc the --version argument:

$ npx typedoc --version

TypeDoc 0.23.0
Using TypeScript 4.7.2 from /home/gerrit/typedoc/node_modules/typescript/lib

Command line interface

The CLI can be used both from your terminal or from npm scripts. All arguments that are not passed with flags are parsed as entry points. Use either the --out or --json arguments to define the format and destination of your documentation.

typedoc --out docs src/index.ts

JSON Configuration

Instead of passing all arguments via the command line, the CLI also supports reading TypeDoc configuration from json files.

typedoc.json

When running typedoc from the CLI, you can define options in a json file named typedoc.json.

{
// Comments are supported, like tsconfig.json
"entryPoints": ["src/index.ts"],
"out": "docs"
}

tsconfig.json

TypeDoc options can be defined within an existing tsconfig.json file. Use a typedocOptions section to define options as a json model.

{
"compilerOptions": {
"normalTypeScriptOptions": "here"
},
"typedocOptions": {
"entryPoints": ["src/index.ts"],
"out": "docs"
}
}

Node module

If you would like dynamic configuration or would like to run typedoc without using the CLI, import the node module and build the documentation yourself.

const TypeDoc = require("typedoc");

async function main() {
// Application.bootstrap also exists, which will not load plugins
// Also accepts an array of option readers if you want to disable
// TypeDoc's tsconfig.json/package.json/typedoc.json option readers
const app = await TypeDoc.Application.bootstrapWithPlugins({
entryPoints: ["src/index.ts"],
});

const project = await app.convert();

if (project) {
// Project may not have converted correctly
const outputDir = "docs";

// Rendered docs
await app.generateDocs(project, outputDir);
// Alternatively generate JSON output
await app.generateJson(project, outputDir + "/documentation.json");
}
}

main().catch((error) => {
console.log(error);
process.exit(1);
});

Integrating with Docusaurus

Assuming we have a react project called my-app and inside my-app directory there is a Docusaurus-generated project at my-app/docs directory, we will simply put up the script above with slight modifications:

  • The file is docs/scripts/typedoc.js
  • The my-app's tsconfig.json is in the parent directory of docusaurus doc directory
  • We will also be having image-enriched TypeDoc so we will add a media option
  • The generated TypeDoc HTML will be co-located with Docusaurus doc build; so it will be under ./build/api. In the mean time, the Docusaurus build command will be "build": "docusaurus build && node scripts/typedoc.js"
const TypeDoc = require("typedoc");

async function main() {
const app = await TypeDoc.Application.bootstrap({
entryPoints: ["../packages/"],
exclude: "../**/*+(test|env.d|setupTests).*",
entryPointStrategy: "expand",
tsconfig: "../tsconfig.json",
media: "static/img/typedoc",
});

app.options.addReader(new TypeDoc.TSConfigReader());
app.options.addReader(new TypeDoc.TypeDocReader());

const project = await app.convert();

if (!project) {
throw new Error(`app.convert() was not successful`); // early return
}

const outputDir = "./build/api";
app.generateDocs(project, outputDir);
app.generateJson(project, outputDir + "/documentation.json");
}

main().catch((error) => {
console.log(error);
process.exit(1);
});

Since TypeDoc depends on my-apps tsconfig.json(../tsconfig.json), we need to run npm install in my-app directory and then yarn in docs directory to compile everything. For example, to

---
name: Release

"on":
push:
branches:
- master

env:
USER: YOUR_GITHUB_USERNAME # replace this with your username
EMAIL: YOUR_GITHUB_EMAIL # replace this with your email

jobs:
test:
uses: ./.github/workflows/test.yml
secrets: inherit

deploy-documentation:
needs: test
name: Deploy Documentation to GitHub Pages
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./docs/
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies of the documented project so that TypeDoc process source files properly
run: |
cd ../
yarn install # or 'npm install'

- name: Install doc dependencies
run: yarn install
- name: Build documentation
run: yarn build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: $
publish_dir: ./docs/build
user_name: $
user_email: $

At this point, we can run yarn build inside my-app/doc. When my-app is using TypeScript, however, the "Cannot find module error when importing an static file using typescript" error might occur. We deal with it by creating a .d.ts file src/my-app-env.d.ts and put :

/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />

declare namespace NodeJS {
interface ProcessEnv {
readonly NODE_ENV: "development" | "production" | "test";
readonly PUBLIC_URL: string;
}
}

declare module "*.avif" {
const src: string;
export default src;
}

declare module "*.bmp" {
const src: string;
export default src;
}

declare module "*.gif" {
const src: string;
export default src;
}

declare module "*.jpg" {
const src: string;
export default src;
}

declare module "*.jpeg" {
const src: string;
export default src;
}

declare module "*.png" {
const src: string;
export default src;
}

declare module "*.webp" {
const src: string;
export default src;
}

declare module "*.svg" {
import * as React from "react";

export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;

const src: string;
export default src;
}

declare module "*.module.css" {
const classes: { readonly [key: string]: string };
export default classes;
}

declare module "*.module.scss" {
const classes: { readonly [key: string]: string };
export default classes;
}

declare module "*.module.sass" {
const classes: { readonly [key: string]: string };
export default classes;
}