Triple-slash directives in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of triple-slash directive reference

What will be the output of the following TypeScript code when compiled and run in Node.js?

/// <reference path="./helper.ts" />

console.log(helperFunction());

Assume helper.ts contains export function helperFunction() { return 'Hello from helper'; } and is correctly referenced.

Typescript

/// <reference path="./helper.ts" />

console.log(helperFunction());

A ReferenceError: helperFunction is not defined

B Hello from helper

C SyntaxError: Unexpected token <

D TypeError: helperFunction is not a function

💡 Hint

Triple-slash directives only provide compile-time information, not runtime imports.

Triple-slash directives like /// <reference path=... /> tell the TypeScript compiler about dependencies but do not import code at runtime. Without an actual import statement, helperFunction is undefined at runtime, causing a ReferenceError.

🧠 Conceptual

intermediate

Purpose of triple-slash directives

What is the primary purpose of triple-slash directives in TypeScript?

A To execute code before the main program runs

B To include external JavaScript files at runtime

C To provide compiler with additional type information or dependencies

D To define global variables accessible everywhere

💡 Hint

Think about what happens during compilation, not runtime.

Triple-slash directives are comments that instruct the TypeScript compiler about dependencies or types. They do not affect runtime behavior or include code.

🔧 Debug

advanced

Why does this triple-slash directive cause an error?

Consider this triple-slash directive:

/// <reference types="nonexistent-package" />

console.log('Test');

What error will the TypeScript compiler produce?

A Runtime error: module not found.

B SyntaxError: Invalid triple-slash directive syntax.

C No error, code compiles and runs fine.

D Cannot find type definition file for 'nonexistent-package'.

💡 Hint

The directive references a type package that does not exist.

The types attribute in triple-slash directives tells the compiler to include type definitions from a package. If the package is missing, the compiler reports it cannot find the type definition file.

📝 Syntax

advanced

Identify the correct triple-slash directive syntax

Which of the following is the correct syntax for a triple-slash directive referencing a type definition package?

A /// <reference types="express" />

B // <reference types="express" />

C /// reference types="express" /

D /// <reference path="express" />

💡 Hint

Triple-slash directives start with exactly three slashes and use XML-like syntax.

The correct syntax uses three slashes, the reference tag with the types attribute, and is self-closing with />.

🚀 Application

expert

Effect of triple-slash directive on compilation

Given these two files:

// math.d.ts
export function add(a: number, b: number): number;

// main.ts
/// 

console.log(add(2, 3));

What will happen when compiling and running main.ts with tsc and Node.js?

A Compilation fails with error: Cannot find name 'add'.

B Compilation succeeds, runtime throws ReferenceError: add is not defined

C Compilation and runtime succeed, output: 5

D Compilation succeeds, runtime throws TypeError: add is not a function

💡 Hint

Triple-slash directives provide type info but do not import implementations.

The triple-slash directive references a declaration file for type checking only. The actual function implementation is missing at runtime, causing a ReferenceError.

Practice

1. What is the main purpose of /// <reference> triple-slash directives in TypeScript?

easy

A. To import external JavaScript libraries at runtime

B. To add comments visible in the final JavaScript output

C. To define variables globally across files

D. To provide compiler instructions about file dependencies and types

Solution

1. Step 1: Understand triple-slash directive role

   Triple-slash directives are special comments that give instructions to the TypeScript compiler, mainly about type information and file dependencies.

2. Step 2: Identify correct purpose

   They do not affect runtime or add global variables but help the compiler understand relationships between files.

3. Final Answer:

   To provide compiler instructions about file dependencies and types -> Option D

4. Quick Check:

   Triple-slash directives = compiler instructions [OK]

Hint: Triple-slash directives guide the compiler, not runtime code [OK]

Common Mistakes:

• Thinking they add runtime imports
• Confusing with normal comments
• Assuming they define global variables

2. Which of the following is the correct syntax for a triple-slash reference directive in TypeScript?

easy

A. ///

B. //

C. /* */

D.

Solution

1. Step 1: Recall triple-slash directive syntax

   The correct syntax starts with three slashes followed by a space and then the XML-like tag with attributes.

2. Step 2: Match correct option

   /// matches the exact syntax: /// <reference path="..." />. Others miss slashes or use wrong comment style.

3. Final Answer:

   /// <reference path="./types.d.ts" /> -> Option A

4. Quick Check:

   Triple-slash directive syntax = /// <reference ... /> [OK]

Hint: Triple-slash directives always start with exactly three slashes [OK]

Common Mistakes:

• Using two slashes instead of three
• Using block comments instead of triple-slash
• Omitting the closing slash in the tag

3. Given these two TypeScript files:

// file: types.d.ts interface User { name: string; age: number; } // file: app.ts /// <reference path="./types.d.ts" /> const user: User = { name: "Alice", age: 30 }; console.log(user.name);

What will be the output when compiling and running app.ts?

medium

A. undefined

B. Alice

C. Compilation error: User not found

D. Runtime error

Solution

1. Step 1: Understand reference directive effect

   The triple-slash directive includes the type definitions from types.d.ts, so the User interface is known in app.ts.

2. Step 2: Check code behavior

   The object user matches the User interface and logs user.name, which is "Alice".

3. Final Answer:

   Alice -> Option B

4. Quick Check:

   Reference directive allows type use = "Alice" output [OK]

Hint: Reference directives enable type info, so code compiles and runs [OK]

Common Mistakes:

• Assuming missing import causes error
• Confusing type-only files with runtime code
• Expecting runtime errors from type declarations

4. Consider this TypeScript file snippet:

/// <reference path="./types.d.ts" /> const user: User = { name: "Bob", age: 25 }; /// <reference path="./extra.d.ts" /> console.log(user.age);

What is the problem with this code?

medium

A. Triple-slash directives must be at the very top before any code

B. You cannot use multiple triple-slash directives in one file

C. The User type is not defined in any referenced file

D. Console.log cannot be used after triple-slash directives

Solution

1. Step 1: Recall triple-slash directive placement rules

   Triple-slash directives must appear at the very top of the file, before any other code or statements.

2. Step 2: Identify violation in code

   Here, the second triple-slash directive appears after a variable declaration, which is invalid and causes a compiler error.

3. Final Answer:

   Triple-slash directives must be at the very top before any code -> Option A

4. Quick Check:

   Triple-slash directives = top of file only [OK]

Hint: Always place all triple-slash directives before any code [OK]

Common Mistakes:

• Placing directives after code lines
• Thinking multiple directives are disallowed
• Confusing runtime code with compiler instructions

5. You have three TypeScript files:

// types.d.ts interface Config { url: string; timeout: number; } // settings.d.ts /// <reference path="./types.d.ts" /> declare const config: Config; // app.ts /// <reference path="./settings.d.ts" /> console.log(config.url);

What is the correct way to ensure app.ts compiles without errors and recognizes config and Config types?

hard

A. Declare config and Config again inside app.ts

B. Add a triple-slash directive in app.ts referencing both settings.d.ts and types.d.ts

C. Place all triple-slash directives at the top of app.ts referencing settings.d.ts only

D. Remove all triple-slash directives and import modules instead

Solution

1. Step 1: Understand reference chaining

   Since settings.d.ts references types.d.ts, app.ts only needs to reference settings.d.ts to access both Config and config.

2. Step 2: Confirm directive placement

   All triple-slash directives must be at the top of app.ts before any code to work correctly.

3. Final Answer:

   Place all triple-slash directives at the top of app.ts referencing settings.d.ts only -> Option C

4. Quick Check:

   Reference chaining means one directive suffices [OK]

Hint: Reference chaining means only top-level file needs directive [OK]

Common Mistakes:

• Adding redundant references
• Placing directives after code
• Re-declaring types unnecessarily