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.