Typedoc tutorial | Typescript Documentation API generator

What is typedoc in typescript?

TypeDoc is a Documentation API Generator for generating documentation for typescript applications.

This is similar to JSDoc, ESdoc, and JavaDoc.

Documentation for any project is one of the key factors for successful application development.

s tool takes typescript files or typescript projects as input, parses it, and generates Documentation in a different format as output.

HTML is one of the generated formats that contains, Links, Styles, and HTML of code.

This will be generated by reading typescript code elements like classes, interfaces, and methods.

How to Install and Setup typedoc in the Typescript application?

Typedoc can be used as a standalone NPM command line or can integrate with a webpack, gulp, and grunt tools.

Before installation of typedoc, First, Install nodejs software. Please make sure that the npm and node commands should run successfully. You can install it either globally or locally. The -g option will install globally, without the -g option, and the `—save-dev option installs locally.

npm install -g typedoc

This installs globally and the typedoc command will be available from the command line.

B:\Workspace\blog>typedoc --version
TypeDoc 0.12.0
Using TypeScript 3.0.3 from C:\Users\Kiran\AppData\Roaming\npm\node_modules\typedoc\node_modules\typescript\lib

And, also you can configure the typedoc command and run it as an npm command using the below configuration Add the below entry in package.json

"scripts":{
   "tdocs":"npm run typedocs [options] "
}

Once the configuration is added, you can run it via the npm command “npm tdocs”.

typedoc command-line Options

Options provided with typedoc command are a double hyphen(--).

Option	Description
out	It is the output Directory for which documentation is generated for it.
model	Output mode of the compiled project ie file or modules
theme	Specify theme for Generated documentation template, which can be the default, minimal, or path to the custom theme
target	Configure EcmaScript js versions ES5, ES6 that need to compile with it
include	It included all files for generation
exclude	Excluding all files for generations

typedoc generator Example

We will see how we will generate documentation for the Typescript file. First Create a typescript file - Animal.ts.

class Animal {
  public nonveg: boolean;

  constructor() {
    console.log("new animal created");
  }
  eat(): void {
    console.log("new animal Eat method");
  }
}
class Lion extends Animal {
  constructor() {
    super();
    this.nonveg = true;
  }
  eat(): void {
    console.log("Lion Eat method");
  }
}
class Cat extends Animal {
  constructor() {
    super();
    this.nonveg = true;
  }
  eat(): void {
    console.log("Cat Eat method");
  }
}

How to Generate Html Documentation in Typescript?

Using the typedoc command, please issue the below command

typedoc --out docs

And the output-generated documentation is below the screenshot

typescript documentation generator tutorials with example

Typedoc comes with tdconfig.json files which contain configuration options required to generate documentation.

This file contains typescript compiler options and include which files are included to generate Documentation. The Exclude option excludes the files for generations.

Typedoc bundler plugins

Typedoc can be also used with JavaScript build tools. There are already plugins and npm packages available.

Grunt - grunt-typedoc
Gulp - gulp-typedoc
Webpack - typedoc-webpack-plugin

Conclusion

Learn what is typedoc npm tool is, and install and set it up in the local environment.

How to generate documentation for Node javascript application with examples