TypeScript Core - Advanced Generics, Utility Types & Type Inference Flashcards

Question 1

What are TypeScript Generics and why are they useful?

Accepted Answer

TypeScript Generics allow you to write components that can work with a variety of data types, rather than a single one. They enable you to create reusable code that is both flexible and type-safe, ensuring type consistency across different parts of your application without sacrificing flexibility. They are often used with functions, classes, and interfaces.

Question 2

How do you constrain a generic type parameter in TypeScript?

Accepted Answer

You can constrain a generic type parameter using the `extends` keyword. This ensures that the generic type must either be, or extend from, a specified type. This allows you to apply operations specific to the constrained type within your generic code.

```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;
}
```

Question 3

Explain the basic syntax and purpose of TypeScript's conditional types.

Accepted Answer

Conditional types allow you to choose one of two possible types based on a condition that checks the relationship between two types. Their syntax is `T extends U ? X : Y`, meaning 'if type `T` is assignable to type `U`, then the type is `X`; otherwise, it's `Y`'. They are fundamental for creating advanced utility types and type transformations.

Question 4

What is the `infer` keyword used for within conditional types?

Accepted Answer

The `infer` keyword is used within the `extends` clause of a conditional type to declare a new type variable that can be 'inferred' from the type being checked. It allows you to extract parts of a type into a new type variable for further use. For example, `infer R` can extract the return type of a function type: `type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;`

Question 5

Describe how conditional types behave when applied to union types (Distributive Conditional Types).

Accepted Answer

When a conditional type operates on a generic type T that is a union (e.g., A | B | C), and T is a 'naked' type parameter (not wrapped in an array or other type), the conditional type becomes distributive. This means the conditional type is applied to each member of the union individually, and the results are then combined back into a new union type.

Example: type MyType<T> = T extends string ? 'isString' : 'notString';
MyType<string | number> would resolve to MyType<string> | MyType<number>, which is 'isString' | 'notString'.

Question 6

What are Mapped Types in TypeScript and what is their primary use case?

Accepted Answer

Mapped Types are a powerful feature that allows you to create new object types by transforming the properties of an existing object type. They iterate over the properties of a type using a `[P in K]` syntax, where `K` is typically `keyof T`. Their primary use case is to create variations of existing types, such as making all properties optional, readonly, or changing their types, often used in conjunction with utility types.

Question 7

Explain the `keyof` operator and provide an example.

Accepted Answer

The `keyof` operator takes an object type and produces a string or string literal union of its property keys. It's commonly used with mapped types to iterate over the keys of an existing type.

```typescript
interface User { id: number; name: string; age: number; }
type UserKeys = keyof User; // 'id' | 'name' | 'age'

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

const user: User = { id: 1, name: 'Alice', age: 30 };
const userName = getProperty(user, 'name'); // Type: string
```

Question 8

How can you rename properties in a mapped type?

Accepted Answer

You can rename properties in a mapped type using the `as` clause within the property signature. This allows you to map an old property key to a new one, creating a new type with transformed keys. ```typescript type Event = { id: string; timestamp: Date; payload: any; }; type EventLog = { [K in keyof T as `log${Capitalize}`]: T[K] }; type LoggedEvent = EventLog; // Result: { logId: string; logTimestamp: Date; logPayload: any; } ```

Question 9

What does the `Partial<T>` utility type do?

Accepted Answer

The `Partial` utility type constructs a type with all properties of `T` set to optional. This is useful when you want to create an object that might only contain a subset of the properties of another type, for example, when updating an existing record. ```typescript interface Todo { title: string; description: string; completed: boolean; } type PartialTodo = Partial; // { title?: string; description?: string; completed?: boolean; } ```

Question 10

What does the `Readonly<T>` utility type do?

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. It's useful for ensuring immutability. ```typescript interface Point { x: number; y: number; } type ReadonlyPoint = Readonly; // { readonly x: number; readonly y: number; } ```

Question 11

Explain `Pick<T, K>` and its usage.

Accepted Answer

The `Pick` utility type constructs a type by picking a set of properties `K` from type `T`. `K` must be a union of string literals or a single string literal representing keys of `T`. It's useful for creating a new type with only specific properties from an existing one. ```typescript interface User { id: number; name: string; email: string; } type UserPreview = Pick; // { id: number; name: string; } ```

Question 12

Explain `Omit<T, K>` and its usage.

Accepted Answer

The `Omit` utility type constructs a type by omitting a set of properties `K` from type `T`. `K` must be a union of string literals or a single string literal representing keys of `T`. It's the inverse of `Pick`, useful for creating a new type without certain properties. ```typescript interface User { id: number; name: string; email: string; passwordHash: string; } type PublicUser = Omit; // { id: number; name: string; email: string; } ```

Question 13

Describe `Record<K, T>` and when to use it.

Accepted Answer

The `Record` utility type 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 ideal for creating dictionary-like or map-like types where all keys are of a specific type and all values are of another specific type. ```typescript type Page = 'home' | 'about' | 'contact'; type PageInfo = Record; // { home: { title: string; path: string; }; about: { ... }; contact: { ... }; } ```

Question 14

What is the purpose of `Exclude<T, U>`?

Accepted Answer

The `Exclude` utility type 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 = Exclude; // 'red' | 'green' | 'blue' ```

Question 15

How do you create a user-defined type guard in TypeScript?

Accepted Answer

A user-defined type guard is a function that returns a boolean, but its return type is a type predicate of the form `parameterName is Type`. When such a function returns `true`, TypeScript narrows the type of `parameterName` to `Type` within the scope where the guard was called.

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

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

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

Question 16

Explain the `typeof` type guard.

Accepted Answer

The `typeof` type guard is a built-in mechanism that checks the JavaScript runtime type of a variable. TypeScript can use the results of `typeof` checks (`'string'`, `'number'`, `'boolean'`, `'symbol'`, `'undefined'`, `'object'`, `'function'`, `'bigint'`) to narrow down the type of a variable within a conditional block.

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

Question 17

Define union types and provide an example.

Accepted Answer

A union type allows a variable to hold values of several different types. It's declared using the `|` (pipe) symbol. If a value can be `A` OR `B`, it has a union type `A | B`. This is useful for functions that accept multiple types of arguments or variables that can change their type over time.

```typescript
let id: number | string;
id = 123; // OK
id = 'abc'; // OK
id = true; // Error: Type 'boolean' is not assignable to type 'string | number'.
```

Question 18

Define intersection types and provide an example.

Accepted Answer

An intersection type combines multiple types into one, requiring an object to have all properties of all combined types. It's declared using the `&` (ampersand) symbol. If a value must be `A` AND `B`, it has an intersection type `A & B`. This is useful for mixing in properties from different interfaces or types.

```typescript
interface HasName { name: string; }
interface HasAge { age: number; }

type Person = HasName & HasAge;

const user: Person = { name: 'Alice', age: 30 }; // Must have both properties
```

Question 19

What are discriminated unions and why are they powerful?

Accepted Answer

Discriminated unions are a powerful pattern combining union types with literal type properties (the 'discriminant') that allow TypeScript to narrow down the specific type within the union based on the value of that shared property. They are powerful because they enable type-safe handling of different data shapes, often used for representing different states or events.

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

type Shape = Circle | Square;

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

Question 20

What is the benefit of enabling `strictNullChecks` in TypeScript?

Accepted Answer

Enabling `strictNullChecks` (a compiler option) means that `null` and `undefined` are no longer implicitly assignable to every type. This forces developers to explicitly handle `null` or `undefined` values, significantly reducing common runtime errors like 'Cannot read property of undefined' and making code more robust and predictable.

Question 21

When and how should you use the non-null assertion operator (`!`)?

Accepted Answer

The non-null assertion operator (`!`) tells the TypeScript compiler that you are certain a value is not `null` or `undefined`, even if its type suggests it could be. It should be used sparingly and only when you have external knowledge (e.g., from a DOM query that always returns an element, or a prior check) that guarantees the value's presence. Overuse can undermine type safety.

```typescript
function processValue(value: string | null) {
  // Assume we know 'value' is not null here due to external logic
  console.log(value!.toUpperCase()); // Assert 'value' is non-null
}
```

Question 22

Explain optional chaining (`?.`) and its role in null safety.

Accepted Answer

Optional chaining (`?.`) allows you to safely access properties or call methods on an object that might be `null` or `undefined` without explicitly checking for nullability at each step. If a property in the chain is `null` or `undefined`, the expression short-circuits and evaluates to `undefined` instead of throwing a runtime error. It significantly improves code readability and reduces boilerplate for null checks.

```typescript
interface User { name?: string; address?: { street: string; }; }
const user: User = {};
const street = user.address?.street; // street is undefined, no error
```

Question 23

Describe the nullish coalescing operator (`??`) and its difference from `||`.

Accepted Answer

The nullish coalescing operator (`??`) provides a default value for an expression if the expression evaluates to `null` or `undefined`. It's similar to the logical OR operator (`||`) but with a crucial difference: `??` only treats `null` and `undefined` as 'falsy' values, whereas `||` treats *any* falsy value (e.g., `0`, `''`, `false`) as a trigger for the default. This makes `??` safer when `0`, `''`, or `false` are valid, non-default values.

```typescript
const count = 0;
const result1 = count || 10; // result1 is 10 (0 is falsy)
const result2 = count ?? 10; // result2 is 0 (0 is not null/undefined)
```

TypeScript Core - Advanced Generics, Utility Types & Type Inference

Cards in this deck

Related Flashcard Sets

JLPT N2 - Upper-Intermediate Japanese Kanji, Grammar & Expressions

CompTIA Network+ (N10-008) - Networking Fundamentals & Subnetting

HSK 4 - Intermediate Chinese Vocabulary & Grammar

CompTIA Network+ (N10-008) - Networking Fundamentals & Protocols