TypeScript - Advanced Type Systems & Mapped Types Flashcards

Question 1

What are TypeScript Generics?

Accepted Answer

Generics allow you to write reusable code that works with a variety of types, rather than a single one. They provide a way to make components work with any data type while still providing type safety. Example: `function identity<T>(arg: T): T { return arg; }`

Question 2

Explain the `keyof` type operator.

Accepted Answer

The `keyof` operator takes an object type and produces a string or string literal union of its keys. For example, `type Point = { x: number; y: number; }; type PointKeys = keyof Point;` would make `PointKeys` equivalent to `'x' | 'y'`.

Question 3

Explain the `typeof` type operator in TypeScript.

Accepted Answer

In a type context, `typeof` refers to the *type* of a variable or property. It allows you to extract the type of a value at runtime and use it as a type in your type declarations. Example: `const person = { name: 'Alice', age: 30 }; type PersonType = typeof person;`

Question 4

What is a Mapped Type in TypeScript?

Accepted Answer

Mapped types are a powerful feature that allows you to create new object types based on existing ones by transforming each property. They iterate over keys of an existing type and apply a transformation. Syntax: `type NewType<T> = { [P in keyof T]: T[P]; }`

Question 5

How does `Partial<T>` utility type work?

Accepted Answer

`Partial` constructs a type with all properties of `T` set to optional. This is useful for creating types for objects that might only have a subset of the original type's properties. Example: ```typescript type User = { name: string; age: number; }; type PartialUser = Partial; // { name?: string; age?: number; } ```

Question 6

Explain `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. Example: `type PageInfo = Record<'home' | 'about', { title: string; }>;`

Question 7

What are Conditional Types?

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 JavaScript's ternary operator: `SomeType extends OtherType ? TrueType : FalseType;`

Question 8

How is the `infer` keyword used with Conditional Types?

Accepted Answer

The `infer` keyword is used within the `extends` clause of a conditional type to "capture" a type that's part of the type being checked. This captured type can then be used in the `TrueType` branch. Example: `type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;`

Question 9

Explain `ReturnType<T>` utility type.

Accepted Answer

`ReturnType` extracts the return type of a function type `T`. It's implemented using conditional types and the `infer` keyword. Example: `type MyFunc = () => string; type Res = ReturnType;` // `string`

Question 10

What are Template Literal Types?

Accepted Answer

Template literal types allow you to create new string literal types by concatenating other string literals, similar to JavaScript template literals. They can be used with union types to generate many new string literal types. Example: `type Greeting = 'hello' | 'hi'; type LoudGreeting = `${Uppercase<Greeting>}!`;` // `'HELLO!' | 'HI!'`

Question 11

What is a Discriminated Union?

Accepted Answer

A discriminated union (or tagged union) is a type that combines several types into a single union, where each type in the union has a common, literal property (the "discriminant") that TypeScript can use to narrow down the type. This enables powerful type narrowing with `switch` or `if/else` statements.

Question 12

Provide an example of a Discriminated Union.

Accepted Answer

```typescript
interface Circle { kind: "circle"; radius: number; }
interface Square { kind: "square"; sideLength: number; }
type Shape = Circle | Square;

function getArea(shape: Shape) {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2; // shape is narrowed to Circle
  }
  return shape.sideLength ** 2; // shape is narrowed to Square
}
```

Question 13

How can you make properties optional or `readonly` in a Mapped Type?

Accepted Answer

You can add or remove `readonly` and `?` (optional) modifiers using `+` or `-` prefixes. `+` is the default and can be omitted. Example: `type Mutable = { -readonly [P in keyof T]: T[P]; }` (removes `readonly`) `type RequiredProps = { [P in keyof T]-?: T[P]; }` (removes `?`, makes required)

Question 14

Explain the concept of Key Remapping in Mapped Types.

Accepted Answer

Key remapping allows you to change the names of properties in a mapped type using the `as` clause. This is useful for transforming property names, e.g., adding prefixes, suffixes, or changing casing. Example: `type Getters = { [K in keyof T as `get${Capitalize}`]: () => T[K] };`

Question 15

What is Type Narrowing in TypeScript?

Accepted Answer

Type narrowing is the process by which TypeScript refines the type of a variable within a certain code block, based on runtime checks. This allows for more precise type safety and intelligent autocomplete.

Question 16

List common Type Narrowing patterns.

Accepted Answer

Common Type Narrowing patterns include:
*   `typeof` checks (e.g., `typeof x === 'string'`)
*   `instanceof` checks (e.g., `x instanceof MyClass`)
*   `in` operator checks (e.g., `'prop' in obj`)
*   Equality narrowing (e.g., `x === null`)
*   Truthiness narrowing (e.g., `if (x)`)
*   User-defined type guards (functions returning `arg is Type`)
*   Discriminated unions

Question 17

Define Covariance in TypeScript type relationships.

Accepted Answer

A type `A` is covariant with `B` if `A` is a subtype of `B`, and `Array` is a subtype of `Array`. In TypeScript, object properties and function return types are generally covariant. This means you can use a more specific type where a less specific type is expected.

Question 18

Define Contravariance in TypeScript type relationships.

Accepted Answer

A type `A` is contravariant with `B` if `A` is a subtype of `B`, but `(arg: B) => void` is a subtype of `(arg: A) => void`. In TypeScript, function parameter types are generally contravariant. This means you can use a less specific type where a more specific type is expected for parameters.

Question 19

What is `Parameters<T>` utility type?

Accepted Answer

`Parameters` extracts the parameter types of a function type `T` as a tuple. It's implemented using conditional types and the `infer` keyword. Example: `type MyFunc = (a: number, b: string) => void; type Params = Parameters;` // `[number, string]`

Question 20

Explain `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 representing keys). It's the opposite of `Pick`. Example: `type User = { id: number; name: string; email: string; }; type UserWithoutEmail = Omit;` // `{ id: number; name: string; }`

Question 21

Explain `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`. Example: `type User = { id: number; name: string; email: string; }; type UserName = Pick;` // `{ name: string; }`

Question 22

What is `NonNullable<T>` utility type?

Accepted Answer

`NonNullable` constructs a type by excluding `null` and `undefined` from `T`. Example: `type NullableString = string | null | undefined; type NonNullString = NonNullable;` // `string`

Question 23

How do Generic Constraints work?

Accepted Answer

Generic constraints allow you to restrict the types that can be used with a generic type parameter. You use the `extends` keyword to specify that the type parameter must be assignable to a certain type. Example: `function longest<T extends { length: number }>(a: T, b: T) { return a.length > b.length ? a : b; }`

Question 24

What is the purpose of `Required<T>` utility type?

Accepted Answer

`Required` constructs a type consisting of all properties of `T` made required. It removes the `?` modifier from all properties. Example: `type PartialUser = { name?: string; age?: number; }; type FullUser = Required;` // `{ name: string; age: number; }`

Question 25

When would you use `Exclude` vs. `Extract`?

Accepted Answer

* `Exclude`: Constructs a type by excluding from `T` all union members that are assignable to `U`. Useful for removing specific types from a union. * `Extract`: Constructs a type by extracting from `T` all union members that are assignable to `U`. Useful for keeping only specific types from a union.

TypeScript - Advanced Type Systems & Mapped Types

Cards in this deck

Related Flashcard Sets

TypeScript - Advanced Type Systems, Generics & Design Patterns

TypeScript - Advanced Type Systems & Utility Types

TypeScript - Advanced Type Systems, Generics & Utility Types

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