TypeScript & Modern Frontend Architecture Flashcards

Question 1

Indexed Access Types (`T[K]`)

Accepted Answer

Indexed access types look up a specific property type on another type using key indexing. Example: `type Age = Person["age"]` extracts the exact type of the `age` property from `Person`.

Question 2

Const Assertions (`as const`)

Accepted Answer

An assertion that instructs the compiler to infer the narrowest literal type for primitives, turn array literals into `readonly` tuples, and mark all object properties as `readonly` depth-wise.

Question 3

TypeScript Top & Bottom Types: `any`, `unknown`, and `never`

Accepted Answer

`any` turns off all type-checking. `unknown` is the type-safe top type that requires type narrowing (via type guards) before performing operations. `never` is the bottom type representing values that can never occur, such as functions that always throw exceptions or unreachable code paths.

Question 4

Structural Typing (Duck Typing)

Accepted Answer

TypeScript utilizes a **structural type system**. Type compatibility and equivalence are determined solely by the shape and members of a type, rather than its explicit name or class declaration hierarchy (which is nominal typing).

Question 5

`interface` vs. `type` Alias

Accepted Answer

`interface` is primarily designed for defining object shapes and supports **declaration merging** (adding fields across multiple declarations). `type` aliases can represent primitives, unions, tuples, and intersections, but **cannot** be declaration-merged.

Question 6

Union (`|`) vs. Intersection (`&`) Types

Accepted Answer

A **Union** (`A | B`) represents a value that can be *either* type `A` or type `B`, allowing access only to shared members unless narrowed. An **Intersection** (`A & B`) combines multiple types into one, requiring the value to satisfy all combined types simultaneously.

Question 7

Generics and Generic Constraints (`T extends U`)

Accepted Answer

Generics abstract over types to build reusable components while retaining type safety. Generic constraints using `T extends U` restrict the allowed types passed to generic parameter `T` to those compatible with type `U`.

Question 8

Utility Types: `Partial` and `Required`

Accepted Answer

`Partial` constructs a type with all properties of `T` set to optional (`?`). `Required` does the inverse, constructing a type where all properties of `T` are explicitly required.

Question 9

Utility Types: `Pick` and `Omit`

Accepted Answer

`Pick` creates a new type by selecting a specified set of keys `K` from `T`. `Omit` constructs a type by picking all properties from `T` and then removing keys `K`.

Question 10

Utility Type: `Record<K, T>`

Accepted Answer

`Record<K, T>` constructs an object type whose property keys are of type `K` and property values are of type `T`. It is commonly used to map union keys to specific data structures.

Question 11

Utility Type: `Readonly<T>`

Accepted Answer

`Readonly<T>` constructs a type with all properties of `T` set to `readonly`, preventing reassignment of any of its shallow properties at compile time.

Question 12

The `keyof` Type Operator

Accepted Answer

The `keyof` operator takes an object type and produces a string or numeric literal union of its keys. Example: If `type Point = { x: number; y: number }`, `keyof Point` produces `'x' | 'y'`.

Question 13

The `typeof` Type Operator

Accepted Answer

In a type context, `typeof` extracts the TypeScript type of an existing variable, constant, or object. Example:
```typescript
const config = { host: "localhost", port: 8080 };
type Config = typeof config; // { host: string; port: number }
```

Question 14

Discriminated Unions (Tagged Unions)

Accepted Answer

A pattern for safe state modeling where every object type in a union shares a single common literal property (the *discriminant*). Control flow logic (e.g., `switch` statements) uses this tag to narrow down the specific type.

Question 15

User-Defined Type Predicates (`arg is Type`)

Accepted Answer

Functions that return a custom type predicate syntax `param is TargetType`. When the function returns `true`, TypeScript narrows the checked variable to `TargetType` in subsequent scopes.
```typescript
function isString(val: unknown): val is string {
  return typeof val === "string";
}
```

Question 16

Conditional Types (`T extends U ? X : Y`)

Accepted Answer

Conditional types select one of two possible types based on a type relationship test. Expressed as `T extends U ? X : Y`, they enable dynamic type generation based on input parameter types.

Question 17

The `infer` Keyword in Conditional Types

Accepted Answer

The `infer` keyword allows declaring a temporary type variable within the `extends` clause of a conditional type to extract or unwrap inner types.
```typescript
type UnpackArray<T> = T extends (infer U)[] ? U : T;
```

Question 18

Mapped Types

Accepted Answer

Mapped types create new object types by iterating over property keys using `in keyof`. Syntax: `{ [K in keyof T]: T[K] }`. Modifiers like `readonly` or `?` can be added or removed using `+` or `-` prefixes.

Question 19

Template Literal Types

Accepted Answer

Types built using template string syntax that resolve to unions of literal strings. Example:
```typescript
type Event = "click" | "hover";
type EventHandler = `on${Capitalize<Event>}`; // "onClick" | "onHover"
```

Question 20

The `satisfies` Operator

Accepted Answer

Introduced in TS 4.9, `satisfies` validates that an expression matches a given type **without** widening or mutating the inferred literal type of the expression.

TypeScript & Modern Frontend Architecture

Cards in this deck

Related Flashcard Sets

HSK 1 - Basic Chinese Vocabulary, Pinyin & Character Recognition

Functional Programming - Immutability, Pure Functions & Higher-Order Functions

Neuroscience - Neuroanatomy & Brain Function

Microsoft Azure Administrator (AZ-104) - Compute, Storage & Networking