> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TypeScript Triple-Slash Directive

Triple-slash directives are single-line comments containing a single XML tag that serve as compiler instructions in TypeScript. They are strictly processed during the compilation phase to dictate file inclusion, manage dependency resolution, and configure ambient declarations.

To be recognized by the TypeScript compiler, a triple-slash directive must be placed at the absolute top of the containing file. If a directive is preceded by a statement, a declaration, or any construct other than standard single-line comments, multi-line comments, or other triple-slash directives, the compiler downgrades it to a standard comment and ignores the XML payload.

```typescript theme={"dark"}
/// <directive_name attribute="value" />
```

## Core Directives and Compiler Mechanics

**`reference path`**
Instructs the compiler to add a specific file to the compilation context. The compiler resolves the provided path relative to the file containing the directive.

```typescript theme={"dark"}
/// <reference path="relative/path/to/file.ts" />
```

**`reference types`**
Instructs the compiler to include a specific declaration package (typically from `@types`) in the compilation context. The resolution mechanism mirrors the Node.js module resolution strategy used for `import` statements.

```typescript theme={"dark"}
/// <reference types="node" />
```

**`reference lib`**
Instructs the compiler to explicitly include a built-in TypeScript library file (such as `es2015` or `dom`) into the compilation context. This directive adds the specified library alongside the default libraries already defined in `tsconfig.json`; it does not bypass, override, or exclude them.

```typescript theme={"dark"}
/// <reference lib="es2017.string" />
```

**`reference no-default-lib`**
Marks the containing file as a default library. This instructs the compiler to omit the implicit inclusion of the standard default library (`lib.d.ts`) during compilation.

```typescript theme={"dark"}
/// <reference no-default-lib="true" />
```

**`amd-module`**
Instructs the compiler to assign a specific string identifier to an Asynchronous Module Definition (AMD) module, overriding the compiler's default behavior of generating anonymous AMD modules.

```typescript theme={"dark"}
/// <amd-module name="NamedModuleIdentifier" />
```

**`amd-dependency`**
*(Deprecated)* Injects an explicit dependency into the generated AMD `define` call. The compiler appends the specified path to the dependency array and binds it to the specified parameter name in the factory function. TypeScript officially deprecates this directive and strongly recommends using standard `import "moduleName";` statements instead.

```typescript theme={"dark"}
/// <amd-dependency path="legacy/module" name="legacyAlias" />
```

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor TypeScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
