Triple-Slash Directives
In this page:
/// <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
/// <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
/// <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
/// <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
/// <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
// 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");
- Placing
/// <reference ... />after other code or comments-with-code, when it is only valid at the top of the file. - Using a reference path directive in a modern project instead of
includeintsconfig.jsonor animport. - Referencing a types package that is not installed, such as
types="node"without@types/node, which is an error.
- ES modules use
importandexport, 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: