TypeScript Programming Labs

Expert-level TypeScript: declaration files, module augmentation, and advanced utility types.

Expert Level - Module 7

Declaration files (.d.ts), module augmentation, and advanced utility type patterns.

Lab 19: Declaration Files (.d.ts)
Expert
Coding Challenge
Your Task: Master TypeScript declaration files - the bridge between TypeScript and JavaScript libraries. Learn to create type definitions for untyped code.

Detailed Requirements:
1. Basic declaration file structure:
// types/my-library.d.ts declare module "my-library" { export function greet(name: string): string; export const version: string; export default function init(): void; }

2. Declare global variables: For scripts that add to window:
// globals.d.ts declare global { interface Window { myApp: { config: AppConfig; init(): void; }; } var DEBUG: boolean; } export {};

3. Declare namespaces: For libraries with nested structure:
declare namespace MyLib { interface Options { timeout: number; retries: number; } function configure(opts: Options): void; namespace Utils { function format(value: number): string; } }

4. Declare classes:
declare class EventEmitter { constructor(); on(event: string, callback: Function): this; emit(event: string, ...args: any[]): boolean; }

5. Ambient module declarations:
declare module "*.json" { const value: any; export default value; } declare module "*.css" { const classes: { [key: string]: string }; export default classes; }

Expected Output:
Declaration file created Module declared: my-library Global interface extended: Window Namespace declared: MyLib Class declared: EventEmitter

Requirements Checklist

Declare a module with exports
Extend global Window interface
Create a namespace declaration
Declare a class with methods
Add ambient module declarations
Include function overloads
Output
// Click "Validate" to check your declarations
Hints & Tips
� Module: declare module "name" { }
� Global: declare global { interface Window { } }
� Namespace: declare namespace Name { }
� Class: declare class Name { }
� Ambient: declare module "*.ext" { }
Progress: 0/6
Score: 0/100
0%

Lab Results

Review feedback below

Lab 20: Module Augmentation
Expert
Coding Challenge
Your Task: Learn module augmentation to extend existing module types without modifying original source code.

Detailed Requirements:
1. Augment an existing module:
declare module "express" { interface Request { user?: { id: string; email: string; }; sessionId: string; } }

2. Augment global scope:
declare global { interface Array<T> { first(): T | undefined; last(): T | undefined; } } Array.prototype.first = function() { return this[0]; }; export {};

3. Augment ProcessEnv:
declare global { namespace NodeJS { interface ProcessEnv { NODE_ENV: "development" | "production"; API_KEY: string; } } }

Expected Output:
Module augmented: express Global augmented: Array, String ProcessEnv augmented Module augmentation complete!

Requirements Checklist

Augment an existing module interface
Augment global Array or String
Add methods to augmented interface
Use generics in augmentation
Augment ProcessEnv or namespace
Export to make it a module
Output
// Click "Run Code" to compile and execute
Hints & Tips
� Module augment: declare module "name" { interface X { } }
� Global augment: declare global { interface Array<T> { } }
� Must export: export {} at end
� ProcessEnv: namespace NodeJS { interface ProcessEnv }
Progress: 0/6
Score: 0/100
0%

Lab Results

Review feedback below

Lab 21: Advanced Utility Types
Expert
Coding Challenge
Your Task: Create advanced custom utility types with recursive types and conditional type inference.

Detailed Requirements:
1. DeepPartial - recursively make all properties optional:
type DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]> } : T;

2. DeepReadonly - recursively make immutable:
type DeepReadonly<T> = T extends object ? { readonly [P in keyof T]: DeepReadonly<T[P]> } : T;

3. Path type - get all possible paths:
type Path<T> = T extends object ? { [K in keyof T]: K | `${K}.${Path}` }[keyof T] : never;

4. UnionToIntersection:
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;

Expected Output:
DeepPartial: all nested optional DeepReadonly: all nested readonly Path type: extracts all paths Advanced utility types complete!

Requirements Checklist

Create DeepPartial utility type
Create DeepReadonly utility type
Create Path utility type
Create PathValue utility type
Create UnionToIntersection type
Test utility types with examples
Output
// Click "Run Code" to compile and execute
Hints & Tips
� Recursive: T extends object ? { [P in keyof T]: Type<T[P]> } : T
� Optional modifier: [P in keyof T]?:
� Template literal: `${K}.${Path<T[K]>}`
� Infer: P extends `${infer K}.${infer R}`
Progress: 0/6
Score: 0/100
0%

Lab Results

Review feedback below