TypeScript - Advanced Type System, Generics & Utility Types Flashcards

Question 1

What problem do **Generics** solve in TypeScript?

Accepted Answer

Generics provide a way to create reusable components that can work with a variety of types rather than a single one. They allow you to write code that is type-safe without sacrificing flexibility, by parameterizing types.

Question 2

Provide a basic example of a **generic function** in TypeScript.

Accepted Answer

```typescript function identity(arg: T): T { return arg; } let output1 = identity("myString"); // type of output1 is string let output2 = identity(123); // type of output2 is number (type inference) ```

Question 3

How do you apply **generic constraints** in TypeScript?

Accepted Answer

Generic constraints limit the types that can be used with a generic type parameter. This is done using the `extends` keyword, allowing you to access properties or methods of the constrained type.
```typescript
interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length); // Now we know 'arg' has a .length property
  return arg;
}

loggingIdentity({ length: 10, value: 3 });
// loggingIdentity(3); // Error: Argument of type 'number' is not assignable to parameter of type 'Lengthwise'.
```

Question 4

Explain the concept of **Mapped Types** in TypeScript.

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 one, often using a `for...in` like syntax.

Question 5

What is the basic syntax for a **Mapped Type**?

Accepted Answer

The basic syntax uses `[P in K]`, where `P` is a new property name and `K` is a union of string literal types (often `keyof T`).
```typescript
type MyMappedType<T> = {
  [P in keyof T]: T[P]; // Iterates over properties of T, keeping their original types
};
```

Question 6

How can you make all properties of a type **optional** using a Mapped Type?

Accepted Answer

By adding a `?` modifier to the property type within the mapped type. This is how the built-in `Partial` utility type works. ```typescript type Partial = { [P in keyof T]?: T[P]; // Makes all properties optional }; ```

Question 7

How can you make all properties of a type **readonly** using a Mapped Type?

Accepted Answer

By adding a `readonly` modifier to the property within the mapped type. This is how the built-in `Readonly` utility type works. ```typescript type Readonly = { readonly [P in keyof T]: T[P]; // Makes all properties readonly }; ```

Question 8

Describe the purpose and common use case of the **`Partial<T>` utility type**.

Accepted Answer

`Partial` constructs a type with all properties of `T` set to optional. It's useful when you need to create an object that might only contain a subset of the properties of an existing type, for example, when updating an entity. ```typescript interface User { id: number; name: string; email: string; } type UserUpdate = Partial; // UserUpdate is equivalent to: { id?: number; name?: string; email?: string; } ```

Question 9

Describe the purpose and common use case of the **`Pick<T, K>` utility type**.

Accepted Answer

`Pick` constructs a type by picking the 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's properties. ```typescript interface Product { id: string; name: string; price: number; description: string; } type ProductSummary = Pick; // ProductSummary is equivalent to: { id: string; name: string; price: number; } ```

Question 10

Describe the purpose and common use case of the **`Record<K, T>` utility type**.

Accepted Answer

`Record` constructs an object type whose property keys are `K` (a union of string, number, or symbol literals) and whose property values are `T`. It's useful for creating dictionary-like types where all keys have the same value type. ```typescript type Page = "home" | "about" | "contact"; interface PageInfo { title: string; url: string; } const pages: Record = { home: { title: "Home", url: "/" }, about: { title: "About Us", url: "/about" }, contact: { title: "Contact Us", url: "/contact" }, }; ```

Question 11

What are **Conditional Types** in TypeScript?

Accepted Answer

Conditional types allow you to choose between two possible types based on a condition that checks the relationship between two types. They use a syntax similar to the ternary operator in JavaScript: `T extends U ? X : Y`.

Question 12

Provide an example of a **Conditional Type**.

Accepted Answer

```typescript type IsString = T extends string ? "Yes" : "No"; type A = IsString; // "Yes" type B = IsString; // "No" type C = IsString; // "Yes" | "No" (distributive over union) ```

Question 13

Explain the purpose of the **`infer` keyword** within Conditional Types.

Accepted Answer

The `infer` keyword is used within the `extends` clause of a conditional type to "capture" a type that is part of the type being checked. It allows you to extract a type from another type and use it in the "true" branch of the conditional.

Question 14

How can you use `infer` to extract the **return type of a function**?

Accepted Answer

The built-in `ReturnType` utility type uses `infer` to achieve this. ```typescript type ReturnType = T extends (...args: any[]) => infer R ? R : any; function greet(name: string): string { return `Hello, ${name}!`; } type GreetReturnType = ReturnType; // string type NumberReturnType = ReturnType<() => number>; // number ```

Question 15

What is a **Discriminated Union** pattern?

Accepted Answer

A discriminated union is a type pattern that combines a union type with a common, literal property (the "discriminant") that allows TypeScript to narrow down the specific type within the union. This enables type-safe handling of different data shapes.

Question 16

Provide an example of a **Discriminated Union** and how it enables type narrowing.

Accepted Answer

```typescript
interface SuccessResult {
  status: "success";
  data: any;
}

interface ErrorResult {
  status: "error";
  message: string;
  code: number;
}

type APIResult = SuccessResult | ErrorResult;

function handleResult(result: APIResult) {
  if (result.status === "success") {
    console.log(result.data); // 'result' is narrowed to SuccessResult
  } else {
    console.log(result.message, result.code); // 'result' is narrowed to ErrorResult
  }
}
```

Question 17

What are **Strict Null Checks** (`strictNullChecks`) in TypeScript?

Accepted Answer

When `strictNullChecks` is enabled in `tsconfig.json`, `null` and `undefined` are no longer assignable to every type. They become their own distinct types (`null` and `undefined`), and you must explicitly handle them, leading to more robust and error-free code by preventing common `null` or `undefined` related runtime errors.

Question 18

How does the **non-null assertion operator (`!`)** work and when should it be used?

Accepted Answer

The `!` operator tells TypeScript that you are certain a value is not `null` or `undefined` at a particular point, even if TypeScript's type analysis can't prove it. It bypasses strict null checks. Use it sparingly and only when you have external guarantees that the value is present, as it can lead to runtime errors if your assertion is incorrect.
```typescript
let myElement: HTMLElement | null = document.getElementById("myId");
myElement!.textContent = "Hello"; // Asserts myElement is not null
```

Question 19

Describe the purpose of the **`Omit<T, K>` utility type**.

Accepted Answer

`Omit` constructs a type by picking all properties from `T` and then removing `K` (a union of string literals). It's the inverse of `Pick`. ```typescript interface User { id: number; name: string; email: string; passwordHash: string; } type PublicUser = Omit; // PublicUser is equivalent to: { id: number; name: string; email: string; } ```

Question 20

Describe the purpose of the **`Exclude<T, U>` utility type**.

Accepted Answer

`Exclude` constructs a type by excluding from `T` all union members that are assignable to `U`. It's useful for filtering out specific types from a union. ```typescript type AllColors = "red" | "green" | "blue" | "yellow"; type PrimaryColors = "red" | "blue"; type NonPrimaryColors = Exclude; // "green" | "yellow" ```

Question 21

Describe the purpose of the **`Extract<T, U>` utility type**.

Accepted Answer

`Extract` constructs a type by extracting from `T` all union members that are assignable to `U`. It's the inverse of `Exclude`, useful for selecting specific types from a union. ```typescript type Mixed = string | number | boolean; type OnlyStrings = Extract; // string type OnlyNumbersAndBooleans = Extract; // number | boolean ```

Question 22

Describe the purpose of the **`NonNullable<T>` utility type**.

Accepted Answer

`NonNullable` constructs a type by excluding `null` and `undefined` from `T`. It's useful for ensuring a type cannot be `null` or `undefined`. ```typescript type MaybeString = string | null | undefined; type GuaranteedString = NonNullable; // string ```

TypeScript - Advanced Type System, Generics & Utility Types

Cards in this deck

Related Flashcard Sets

TypeScript - Advanced Types & Tooling

TypeScript - Advanced Types, Generics & Utility Types

TypeScript - Advanced Type Systems, Generics & Design Patterns

Harvard ECON1011 - Intermediate Microeconomics: Game Theory & Market Structures