TypeScript - Advanced Type Systems, Generics & Design Patterns Flashcards

Question 1

What are Generics in TypeScript and why are they useful?

Accepted Answer

Generics allow you to write components that can work with a variety of types rather than a single one. They provide a way to make components reusable and type-safe by capturing the type of the arguments that are passed in, ensuring type consistency across different parts of the component without sacrificing flexibility.

**Example:** A function that returns the first element of an array, regardless of the array's element type.

Question 2

Write a generic function `getFirstElement` that takes an array of any type and returns the first element, or `undefined` if the array is empty.

Accepted Answer

```typescript
function getFirstElement<T>(arr: T[]): T | undefined {
  return arr.length > 0 ? arr[0] : undefined;
}

// Usage:
const numbers = getFirstElement([1, 2, 3]); // numbers is type number | undefined
const strings = getFirstElement(['a', 'b']); // strings is type string | undefined
```

Question 3

Define a generic interface `Box<T>` that can hold an item of any specified type `T`.

Accepted Answer

```typescript interface Box { value: T; } // Usage: const stringBox: Box = { value: 'Hello' }; const numberBox: Box = { value: 123 }; ```

Question 4

Explain Type Narrowing in TypeScript and provide an example.

Accepted Answer

Type narrowing is the process by which TypeScript refines the type of a variable within a certain code block. This is typically done using conditional checks (type guards) that allow TypeScript to infer a more specific type for the variable, enabling safer operations.

**Example:**
```typescript
function printId(id: string | number) {
  if (typeof id === 'string') {
    // id is narrowed to 'string' here
    console.log(id.toUpperCase());
  } else {
    // id is narrowed to 'number' here
    console.log(id.toFixed(2));
  }
}
```

Question 5

How does the `typeof` operator act as a type guard?

Accepted Answer

The `typeof` operator is a built-in JavaScript operator that returns a string indicating the type of the unevaluated operand. In TypeScript, it acts as a type guard for primitive types (`'string'`, `'number'`, `'boolean'`, `'symbol'`, `'undefined'`, `'bigint'`). When used in a conditional block, TypeScript narrows the type of the variable accordingly.

**Example:** `if (typeof value === 'string') { /* value is string */ }`

Question 6

How does the `instanceof` operator act as a type guard?

Accepted Answer

The `instanceof` operator is a built-in JavaScript operator that checks if an object is an instance of a particular class. In TypeScript, it acts as a type guard for class instances. If the condition `value instanceof MyClass` is true, TypeScript narrows the type of `value` to `MyClass` within that block.

**Example:**
```typescript
class Dog { bark() {} }
class Cat { meow() {} }

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark(); // animal is narrowed to Dog
  } else {
    animal.meow(); // animal is narrowed to Cat
  }
}
```

Question 7

What are Discriminated Unions and how do they enhance type safety?

Accepted Answer

Discriminated unions are a powerful pattern in TypeScript that combine union types with a common, literal property (the 'discriminant'). This discriminant property allows TypeScript to narrow down the specific type within the union based on its value, providing exhaustive type checking and enhancing type safety, especially in `switch` statements or `if/else` chains.

**Example:** Different event types sharing a `type` property.

Question 8

Create a discriminated union for different shapes (circle, square) using a `kind` property.

Accepted Answer

```typescript
interface Circle {
  kind: 'circle';
  radius: number;
}

interface Square {
  kind: 'square';
  sideLength: number;
}

type Shape = Circle | Square;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2; // shape is Circle
    case 'square':
      return shape.sideLength ** 2;    // shape is Square
  }
}
```

Question 9

Explain the syntax and purpose of Conditional Types (`T extends U ? X : Y`).

Accepted Answer

Conditional types allow you to express non-uniform type mappings based on a condition. The syntax `T extends U ? X : Y` means: if type `T` is assignable to type `U`, then the resulting type is `X`; otherwise, it's `Y`. They are fundamental for creating advanced utility types and complex type transformations.

**Purpose:** To define types that depend on other types, enabling powerful type-level logic.

Question 10

How can you implement a custom `Exclude<T, U>` utility type using conditional types?

Accepted Answer

The `Exclude` utility type constructs a type by excluding from `T` all union members that are assignable to `U`. **Implementation:** ```typescript type MyExclude = T extends U ? never : T; // Usage: type T0 = MyExclude<'a' | 'b' | 'c', 'a'>; // 'b' | 'c' type T1 = MyExclude void), Function>; // string | number ```

Question 11

How can you implement a custom `Extract<T, U>` utility type using conditional types?

Accepted Answer

The `Extract` utility type constructs a type by extracting from `T` all union members that are assignable to `U`. **Implementation:** ```typescript type MyExtract = T extends U ? T : never; // Usage: type T0 = MyExtract<'a' | 'b' | 'c', 'a' | 'f'>; // 'a' type T1 = MyExtract void), Function>; // () => void ```

Question 12

What are Mapped Types in TypeScript and what problem do they solve?

Accepted Answer

Mapped types allow you to create new types by transforming the properties of an existing type. They iterate over the properties of a type and apply a transformation to each property, such as making them optional, readonly, or changing their type. They solve the problem of repetitive type definitions when you need to derive similar types from a base type.

**Syntax:** `{[P in K]: T}` where `K` is a union of string literal types (often `keyof SomeType`).

Question 13

Explain the `Partial<T>` utility type and provide an example.

Accepted Answer

The `Partial` utility type constructs a type with all properties of `T` set to optional. This is useful when you want to represent an object that might only have some of the properties of a full object. **Example:** ```typescript interface User { id: number; name: string; email: string; } type PartialUser = Partial; /* Equivalent to: interface PartialUser { id?: number; name?: string; email?: string; } */ const userUpdate: PartialUser = { name: 'Alice' }; // Valid ```

Question 14

Explain the `Readonly<T>` utility type and provide an example.

Accepted Answer

The `Readonly` utility type constructs a type with all properties of `T` set to `readonly`. This means that once an object of this type is created, its properties cannot be reassigned. **Example:** ```typescript interface Point { x: number; y: number; } type ReadonlyPoint = Readonly; /* Equivalent to: interface ReadonlyPoint { readonly x: number; readonly y: number; } */ const origin: ReadonlyPoint = { x: 0, y: 0 }; // origin.x = 1; // Error: Cannot assign to 'x' because it is a read-only property. ```

Question 15

Explain the `Pick<T, K>` utility type and provide an example.

Accepted Answer

The `Pick` utility type constructs a type by picking a set of properties `K` (a union of string literals) from type `T`. It's useful for creating a new type that is a subset of an existing type. **Example:** ```typescript interface Product { id: string; name: string; price: number; description: string; } type ProductSummary = Pick; /* Equivalent to: interface ProductSummary { id: string; name: string; price: number; } */ const summary: ProductSummary = { id: 'p1', name: 'Laptop', price: 1200 }; ```

Question 16

Explain the `Omit<T, K>` utility type and provide an example.

Accepted Answer

The `Omit` utility type constructs a type by picking all properties from `T` and then removing `K` (a union of string literals representing property keys). It's the inverse of `Pick`. **Example:** ```typescript interface Product { id: string; name: string; price: number; description: string; } type ProductDetails = Omit; /* Equivalent to: interface ProductDetails { name: string; description: string; } */ const details: ProductDetails = { name: 'Laptop', description: 'Powerful machine' }; ```

Question 17

Explain the `ReturnType<T>` utility type and provide an example.

Accepted Answer

The `ReturnType` utility type constructs a type consisting of the return type of function type `T`. It's useful for inferring the output type of a function without explicitly declaring it. **Example:** ```typescript function greet(name: string): string { return `Hello, ${name}!`; } type GreetReturnType = ReturnType; // GreetReturnType is 'string' function calculateSum(a: number, b: number) { return a + b; } type SumResult = ReturnType; // SumResult is 'number' ```

Question 18

What are Template Literal Types and how are they used?

Accepted Answer

Template literal types are string literal types that can be composed using template literal syntax. They allow you to define types that match specific string patterns, often combining literal strings with union types or other string literal types. They are powerful for creating types for CSS properties, event names, or API endpoints.

**Syntax:** `` `prefix${UnionType}suffix` ``

Question 19

Create a type `MarginProperty` that represents all possible CSS `margin` properties (e.g., `'margin-top'`, `'margin-left'`, `'margin-bottom'`, `'margin-right'`).

Accepted Answer

```typescript
type Direction = 'top' | 'right' | 'bottom' | 'left';
type MarginProperty = `margin-${Direction}`;

// Usage:
let prop1: MarginProperty = 'margin-top';    // Valid
let prop2: MarginProperty = 'margin-bottom'; // Valid
// let prop3: MarginProperty = 'margin-center'; // Error
```

Question 20

What is a key difference between `interface` and `type` aliases regarding declaration merging?

Accepted Answer

A key difference is that `interface` declarations can be *merged* (or 'augmented'). If you declare two interfaces with the same name, TypeScript will merge their properties into a single interface. `type` aliases, however, do not support declaration merging; redeclaring a `type` alias with the same name will result in a compilation error.

**Example (Interface Merging):**
```typescript
interface User { name: string; }
interface User { age: number; }
// User is now { name: string; age: number; }
```

Question 21

When would you prefer `type` over `interface` in TypeScript?

Accepted Answer

You would prefer `type` aliases when you need to:
1.  Define **union types** (`type MyUnion = A | B;`).
2.  Define **intersection types** (`type MyIntersection = A & B;`).
3.  Define **primitive aliases** (`type ID = string;`).
4.  Define **tuple types** (`type MyTuple = [string, number];`).
5.  Use **template literal types**.
6.  Use `typeof` to capture the type of a variable or import.

Question 22

When would you prefer `interface` over `type` in TypeScript?

Accepted Answer

You would prefer `interface` when you need to:
1.  Define **object shapes** for classes or plain objects, especially when you anticipate declaration merging (e.g., extending global types or third-party library types).
2.  Implement **object-oriented patterns** where classes implement interfaces (`class MyClass implements MyInterface {}`).
3.  Benefit from **declaration merging** for extensibility (e.g., adding properties to an existing interface from a library).
4.  Follow a more **traditional OOP approach** or when working with React component props/state.

Question 23

How does the `in` operator act as a type guard?

Accepted Answer

The `in` operator is a built-in JavaScript operator that checks if an object (or its prototype chain) has a specified property. In TypeScript, it acts as a type guard for properties. If the condition `'propertyName' in object` is true, TypeScript narrows the type of `object` to include types that definitely have `propertyName`.

**Example:**
```typescript
interface Bird { fly(): void; }
interface Fish { swim(): void; }

function move(animal: Bird | Fish) {
  if ('fly' in animal) {
    animal.fly(); // animal is narrowed to Bird
  } else {
    animal.swim(); // animal is narrowed to Fish
  }
}
```

Question 24

How do you create a User-Defined Type Guard in TypeScript?

Accepted Answer

A user-defined type guard is a function that tells the TypeScript compiler that if it returns true, a specific type assertion can be made. It's defined by a special return type called a 'type predicate' in the form `parameterName is Type`.

**Example:**
```typescript
interface Dog { bark(): void; }
interface Cat { meow(): void; }

function isDog(animal: Dog | Cat): animal is Dog {
  return (animal as Dog).bark !== undefined;
}

function pet(animal: Dog | Cat) {
  if (isDog(animal)) {
    animal.bark(); // animal is narrowed to Dog
  } else {
    animal.meow(); // animal is narrowed to Cat
  }
}
```

Question 25

Explain the `NonNullable<T>` utility type and provide an example.

Accepted Answer

The `NonNullable` utility type constructs a type by excluding `null` and `undefined` from `T`. It's useful when you have a type that might include `null` or `undefined` but you need to work with its non-nullable form. **Example:** ```typescript type MyStringOrNull = string | null | undefined; type NonNullableString = NonNullable; // NonNullableString is 'string' function processValue(value: MyStringOrNull) { if (value !== null && value !== undefined) { // value is implicitly narrowed to string here // Or explicitly using NonNullable: const nonNullableValue: NonNullableString = value; console.log(nonNullableValue.toUpperCase()); } } ```

TypeScript - Advanced Type Systems, Generics & Design Patterns

Cards in this deck

Related Flashcard Sets

TypeScript & Advanced Type Systems - Generics, Utility Types & Design Patterns

Harvard ECON1011 - Intermediate Microeconomics: Game Theory & Market Structures

MIT 18.03 - Differential Equations: Ordinary Differential Equations, Laplace & Fourier

CPA Exam FAR - Financial Accounting & Reporting: US GAAP & Revenue Recognition