← Back to TypeScript Course | Chapter 9: Modules and Namespaces | Lesson 7 of 7

Triple-Slash Directives

Triple-slash directives are special comments beginning with three slash characters that provide instructions to the TypeScript compiler. They can reference declaration files, types, libraries, and project configuration.
Syntax
typescript
/// <reference path="./file.d.ts" />
/// <reference types="package-name" />

Reference Path Directive

The reference path directive tells TypeScript to include another declaration file when checking the current file, which was an early way of wiring dependencies together before modern module resolution.

Example: Reference Path Directive

typescript
/// <reference path="./other-file.d.ts" />
console.log("References another declaration file for type checking");

Reference Types Directive

The reference types directive tells TypeScript to include declarations from a type package (from node_modules/@types) in the current file's compilation, without needing an explicit import.

Example: Reference Types Directive

typescript
/// <reference types="node" />
console.log("Includes @types/node declarations without an explicit import");

Reference Lib Directive

The reference lib directive explicitly includes a built-in TypeScript library declaration — like a specific ECMAScript version's APIs — into the current file's checking, beyond what the project's tsconfig lib setting already includes.

Example: Reference Lib Directive

typescript
/// <reference lib="es2020.promise" />
console.log("Includes a specific built-in library beyond tsconfig's lib setting");

No-Default-Lib Directive

The no-default-lib directive marks a declaration file as not automatically including the default library, which is used when authoring a custom global environment that shouldn't inherit the standard built-ins.

Example: No-Default-Lib Directive

typescript
/// <reference no-default-lib="true"/>
console.log("Marks this file as not including the default TypeScript library");

When Triple-Slash Directives Are Useful

Modern TypeScript projects usually rely on imports and tsconfig.json for dependency management instead of triple-slash directives, so you'll mostly encounter these in older code or in hand-written .d.ts files.

Example: When Triple-Slash Directives Are Useful

typescript
// Modern projects prefer imports + tsconfig.json:
// import { something } from "./module";
// Triple-slash directives mainly appear in older code or hand-written .d.ts files.
console.log("Triple-slash directives are largely legacy today");
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Placing /// <reference ... /> after other code or comments-with-code, when it is only valid at the top of the file.
  2. Using a reference path directive in a modern project instead of include in tsconfig.json or an import.
  3. Referencing a types package that is not installed, such as types="node" without @types/node, which is an error.
Chapter Summary
  • ES modules use import and export, including default exports, to organize code into files.
  • Namespaces group related code, and declaration merging combines multiple declarations of the same name.
  • Ambient declarations and triple-slash directives describe code and dependencies that exist outside your source.
🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.