Triple-slash directives in Typescript

Introduction

Triple-slash directives help TypeScript find extra files or give special instructions before compiling. They tell the compiler about dependencies or settings.

When you want to include type information from another file.

When you need to reference external libraries or declaration files.

When you want to guide the compiler to find related files automatically.

When you want to add comments that affect compilation behavior.

When working with multiple TypeScript files that depend on each other.

Syntax

Typescript

/// <directiveName attribute="value" />

Triple-slash directives start with three slashes and are single-line comments.

They must be at the very top of the file before any code.

Examples

This tells TypeScript to include the declarations from the file types.d.ts.

Typescript

/// <reference path="./types.d.ts" />

This includes type definitions from the node package, useful when working with Node.js.

Typescript

/// <reference types="node" />

This sets the AMD module name for the compiled output.

Typescript

/// <amd-module name="myModule" />

Sample Program

This program uses a triple-slash directive to include type definitions from shapes.d.ts. It then defines a function that uses the Circle type and prints a message.

Typescript

/// <reference path="./shapes.d.ts" />

function drawCircle(radius: number) {
  const circle: Circle = { radius };
  console.log(`Drawing circle with radius ${circle.radius}`);
}

drawCircle(5);

Important Notes

Triple-slash directives are only for the TypeScript compiler and do not affect runtime JavaScript.

They must be placed at the top of the file before any other statements or imports.

Using /// <reference types="..." /> is common to include types from npm packages.

Summary

Triple-slash directives give instructions to the TypeScript compiler using special comments.

They help include type information and manage dependencies between files.

Always place them at the very top of your TypeScript files.