TypeScript - Advanced Types, Interfaces & Generics Flashcards

Question 1

What are Generics 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 flexible and type-safe, enabling components to consume and produce values of any type.

Question 2

Example of a Generic Function

Accepted Answer

A generic function uses a type variable (e.g., `T`) to make the function work with different types while preserving type safety. ```typescript function identity(arg: T): T { return arg; } let output1 = identity("myString"); // type of output1 is string let output2 = identity(100); // type of output2 is number ```

Question 3

Example of a Generic Interface

Accepted Answer

Generic interfaces can describe the shape of an object that works with a generic type. ```typescript interface Box { value: T; } let stringBox: Box = { value: "hello" }; let numberBox: Box = { value: 123 }; ```

Question 4

Example of a Generic Class

Accepted Answer

Generic classes are useful for creating data structures or utility classes that operate on a specific type, which is determined at instantiation. ```typescript class GenericNumber { zeroValue: T; add: (x: T, y: T) => T; constructor(zeroValue: T, addFunction: (x: T, y: T) => T) { this.zeroValue = zeroValue; this.add = addFunction; } } let myGenericNumber = new GenericNumber(0, (x, y) => x + y); console.log(myGenericNumber.add(5, 10)); // 15 ```

Question 5

What are Generic Constraints?

Accepted Answer

Generic constraints allow you to restrict the types that a generic type parameter can be. This is useful when you need to perform operations on the generic type that are only available on a subset of types.

```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 }); // OK
// loggingIdentity(3); // Error: Argument of type 'number' is not assignable to parameter of type 'Lengthwise'.
```

Question 6

What are Intersection Types?

Accepted Answer

Intersection types combine multiple types into one. An object of an intersection type will have all the members of all the types it intersects. It's like an `AND` operator for types.

```typescript
type Draggable = { drag: () => void };
type Resizable = { resize: () => void };

type UIWidget = Draggable & Resizable;

let widget: UIWidget = {
  drag: () => console.log('Dragging...'),
  resize: () => console.log('Resizing...')
};
```

Question 7

What are Union Types?

Accepted Answer

Union types allow a value to be one of several types. It's like an `OR` operator for types. If a value has a union type, you can only access members that are common to *all* types in the union, unless you use type guards.

```typescript
type StringOrNumber = string | number;

function printId(id: StringOrNumber) {
  console.log(id);
}

printId(101); // OK
printId("abc"); // OK
```

Question 8

What are Type Guards?

Accepted Answer

Type guards are special expressions that perform a runtime check to guarantee the type of a variable within a certain scope. They are used to narrow down the type of a variable from a union type to a more specific type.

Question 9

`typeof` Type Guard Example

Accepted Answer

The `typeof` operator can be used as a type guard for primitive types (`string`, `number`, `boolean`, `symbol`, `bigint`, `undefined`, `object`, `function`).

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

Question 10

`instanceof` Type Guard Example

Accepted Answer

The `instanceof` operator can be used as a type guard for classes or constructor functions.

```typescript
class Dog { bark() { console.log('Woof!'); } }
class Cat { meow() { console.log('Meow!'); } }

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

Question 11

User-Defined Type Guards

Accepted Answer

You can define your own type guards using a type predicate in the return type of a function (e.g., `parameterName is Type`).

```typescript
interface Car { drive: () => void; }
interface Boat { sail: () => void; }

function isCar(vehicle: Car | Boat): vehicle is Car {
  return (vehicle as Car).drive !== undefined;
}

function operateVehicle(vehicle: Car | Boat) {
  if (isCar(vehicle)) {
    vehicle.drive(); // 'vehicle' is narrowed to 'Car'
  } else {
    vehicle.sail();  // 'vehicle' is narrowed to 'Boat'
  }
}
```

Question 12

`in` Operator Type Guard Example

Accepted Answer

The `in` operator can be used to check if an object has a certain property, narrowing its type.

```typescript
interface A { a: number; }
interface B { b: string; }

function printProperty(obj: A | B) {
  if ('a' in obj) {
    console.log(obj.a); // 'obj' is narrowed to 'A'
  } else {
    console.log(obj.b); // 'obj' is narrowed to 'B'
  }
}
```

Question 13

What are Mapped Types?

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 `keyof` and `in` operators.

Question 14

Example of Mapped Type: `Partial<T>`

Accepted Answer

`Partial` is a built-in utility type that makes all properties of `T` optional. ```typescript interface User { id: number; name: string; email: string; } type PartialUser = Partial; /* Equivalent to: type PartialUser = { id?: number; name?: string; email?: string; } */ let userUpdate: PartialUser = { name: "Jane Doe" }; // OK ```

Question 15

Example of Mapped Type: `Readonly<T>`

Accepted Answer

`Readonly` is a built-in utility type that makes all properties of `T` readonly. ```typescript interface Point { x: number; y: number; } type ReadonlyPoint = Readonly; /* Equivalent to: type ReadonlyPoint = { readonly x: number; readonly y: number; } */ let p: ReadonlyPoint = { x: 10, y: 20 }; // p.x = 5; // Error: Cannot assign to 'x' because it is a read-only property. ```

Question 16

Custom Mapped Type Example (`Mutable<T>`)

Accepted Answer

You can create custom mapped types to remove modifiers like `readonly` or `?` (optional). ```typescript type Mutable = { -readonly [P in keyof T]: T[P] }; interface ImmutableUser { readonly id: number; readonly name: string; } type MutableUser = Mutable; /* Equivalent to: type MutableUser = { id: number; name: string; } */ let user: MutableUser = { id: 1, name: "John" }; user.name = "Johnny"; // OK ```

Question 17

What are 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. They use a syntax similar to the ternary operator in JavaScript: `SomeType extends OtherType ? TrueType : FalseType`.

Question 18

Example of Conditional Type: `Exclude<T, U>`

Accepted Answer

`Exclude` is a built-in utility type that constructs a type by excluding from `T` all union members that are assignable to `U`. ```typescript type AllColors = 'red' | 'green' | 'blue' | 'yellow'; type PrimaryColors = 'red' | 'blue'; type NonPrimaryColors = Exclude; // NonPrimaryColors is 'green' | 'yellow' ```

Question 19

Example of Conditional Type: `Extract<T, U>`

Accepted Answer

`Extract` is a built-in utility type that constructs a type by extracting from `T` all union members that are assignable to `U`. ```typescript type AllShapes = 'circle' | 'square' | 'triangle' | 'pentagon'; type RoundShapes = 'circle' | 'oval'; type CommonShapes = Extract; // CommonShapes is 'circle' ```

Question 20

Custom Conditional Type Example (`NonNullable<T>`)

Accepted Answer

You can create custom conditional types. `NonNullable` (also a built-in utility) removes `null` and `undefined` from `T`. ```typescript type MyNonNullable = T extends null | undefined ? never : T; type NullableString = string | null | undefined; type CleanString = MyNonNullable; // CleanString is 'string' type NullableNumber = number | null; type CleanNumber = MyNonNullable; // CleanNumber is 'number' ```

Question 21

The `infer` keyword with Conditional Types

Accepted Answer

The `infer` keyword can be used within the `extends` clause of a conditional type to infer a type that can then be used in the true branch. It's powerful for extracting types from other types. ```typescript type ReturnType = T extends (...args: any[]) => infer R ? R : any; function greet(name: string): string { return `Hello, ${name}`; } type GreetReturnType = ReturnType; // GreetReturnType is 'string' class MyClass { getValue(): number { return 42; } } type GetValueReturnType = ReturnType; // GetValueReturnType is 'number' ```

Question 22

What are Template Literal Types?

Accepted Answer

Template literal types allow you to create new string literal types by concatenating existing string literals, union types, or other types into a template string. They enable powerful string manipulation at the type level.

Question 23

Template Literal Type Example

Accepted Answer

You can combine string literals and union types to generate a new set of string literal types.

```typescript
type Direction = 'left' | 'right';
type Position = 'top' | 'bottom';

type UIPlacement = `${Position}-${Direction}`;
/* UIPlacement is:
   'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
*/

let placement: UIPlacement = 'top-left'; // OK
// let invalidPlacement: UIPlacement = 'left-top'; // Error
```

TypeScript - Advanced Types, Interfaces & Generics

Cards in this deck

Related Flashcard Sets

Korean TOPIK I - Essential Vocabulary & Grammar (Levels 1-2)

Organic Chemistry Mechanisms - SN1/SN2 & E1/E2 Reactions

Cisco CCNA (200-301) - Enterprise Networking & IP Services

Stanford CS106A - Programming Methodology (Java Basics)