TypeScript Advanced Concepts - Type System & Design Patterns 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 flexible, type-safe code that can adapt to different data types without sacrificing type checking.

Question 2

Provide an example of a generic function.

Accepted Answer

```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 let output3 = identity(true); // type inference: boolean ``` Here, `T` is a type variable that captures the type of the argument and uses it for the return type.

Question 3

How can Generics be used with interfaces or type aliases?

Accepted Answer

```typescript interface Box { value: T; } type Pair = { first: T; second: U; }; let stringBox: Box = { value: "hello" }; let numberPair: Pair = { first: 1, second: "two" }; ``` Generics allow these types to hold values of any specified type `T` or `U`.

Question 4

Explain the `Partial<T>` utility type with an example.

Accepted Answer

`Partial` constructs a type with all properties of `T` set to optional. This is useful for creating types for arguments that represent modifications to an existing object. ```typescript interface User { id: number; name: string; email: string; } type PartialUser = Partial; // { id?: number; name?: string; email?: string; } const userUpdate: PartialUser = { name: "Jane Doe" }; ```

Question 5

Explain the `Pick<T, K>` utility type with an example.

Accepted Answer

`Pick` constructs a type by picking the set of properties `K` from `T`. `K` must be a union of string literal or numeric literal (or `keyof T`). ```typescript interface Product { id: number; name: string; price: number; description: string; } type ProductSummary = Pick; // { name: string; price: number; } const summary: ProductSummary = { name: "Laptop", price: 1200 }; ```

Question 6

Explain the `Omit<T, K>` utility type with an example.

Accepted Answer

`Omit` constructs a type by picking all properties from `T` and then removing `K`. It's the inverse of `Pick`. ```typescript interface Task { id: string; title: string; description: string; completed: boolean; } type NewTask = Omit; // { title: string; description: string; } const newTask: NewTask = { title: "Buy groceries", description: "Milk, eggs, bread" }; ```

Question 7

Explain the `Record<K, T>` utility type with an example.

Accepted Answer

`Record` constructs an object type whose property keys are `K` and whose property values are `T`. This is useful for creating dictionary-like types. ```typescript type Page = "home" | "about" | "contact"; interface PageInfo { title: string; url: string; } type Pages = Record; /* { home: PageInfo; about: PageInfo; contact: PageInfo; } */ const sitePages: Pages = { home: { title: "Home", url: "/" }, about: { title: "About Us", url: "/about" }, contact: { title: "Contact", url: "/contact" }, }; ```

Question 8

Explain the `ReturnType<T>` utility type with an example.

Accepted Answer

`ReturnType` constructs a type consisting of the return type of function type `T`. ```typescript function getUser() { return { id: 1, name: "Alice" }; } type UserType = ReturnType; // { id: number; name: string; } const user: UserType = { id: 2, name: "Bob" }; ```

Question 9

What are 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 making them optional, readonly, or changing their value type.

Question 10

Provide a basic example of a Mapped Type.

Accepted Answer

```typescript type Readonly = { readonly [P in keyof T]: T[P]; }; interface Point { x: number; y: number; } type ReadonlyPoint = Readonly; // { readonly x: number; readonly y: number; } const p: ReadonlyPoint = { x: 10, y: 20 }; // p.x = 5; // Error: Cannot assign to 'x' because it is a read-only property. ``` Here, `[P in keyof T]` iterates over each property `P` in `T`.

Question 11

How can you remap keys in a Mapped Type using the `as` clause?

Accepted Answer

The `as` clause in a mapped type allows you to change the names of the properties. ```typescript type Getters = { [P in keyof T as `get${Capitalize}`]: () => T[P]; }; interface User { name: string; age: number; } type UserGetters = Getters; /* { getName: () => string; getAge: () => number; } */ ``` `Capitalize` is another utility type that capitalizes the first letter of a string literal type.

Question 12

What is a custom type guard in TypeScript?

Accepted Answer

A custom type guard is a function that tells the TypeScript compiler about the type of a variable within a certain scope. It's used to narrow down types, especially when dealing with union types or unknown types, by performing runtime checks.

Question 13

Provide an example of a custom type guard using the `is` keyword.

Accepted Answer

The `is` keyword is crucial for type guards. The return type `parameterName is Type` signals to the compiler that if the function returns `true`, then `parameterName` is of `Type`.
```typescript
interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

function isBird(pet: Bird | Fish): pet is Bird {
  return (pet as Bird).fly !== undefined;
}

function getAnimalAction(pet: Bird | Fish) {
  if (isBird(pet)) {
    pet.fly(); // TypeScript knows 'pet' is Bird here
  } else {
    pet.swim(); // TypeScript knows 'pet' is Fish here
  }
}
```

Question 14

What are Conditional Types in TypeScript?

Accepted Answer

Conditional types allow you to define a type that depends on a condition. They take the form `T extends U ? X : Y`, meaning "if type `T` is assignable to type `U`, then the type is `X`, otherwise the type is `Y`."

Question 15

Provide a basic 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<"hello">; // "Yes" (literal string is assignable to string) type TypeName = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends undefined ? "undefined" : T extends Function ? "function" : "object"; type D = TypeName<() => void>; // "function" ```

Question 16

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

Accepted Answer

The `infer` keyword allows you to "infer" a type within the `extends` clause of a conditional type and then use that inferred type in the true branch. It's often used to extract parts of a type. ```typescript type GetArrayElementType = T extends (infer E)[] ? E : T; type A = GetArrayElementType; // number type B = GetArrayElementType; // string type C = GetArrayElementType; // boolean (T is not an array) type GetPromiseValue = T extends Promise ? U : T; type D = GetPromiseValue>; // string type E = GetPromiseValue; // number ```

Question 17

What are the key differences between `interface` and `type` aliases in TypeScript?

Accepted Answer

1.  **Declaration Merging:** `interface`s can be declared multiple times, and their definitions will merge. `type` aliases cannot.
2.  **Extending/Implementing:** `interface`s can `extend` other interfaces/classes and can be `implemented` by classes. `type` aliases can only be extended via intersection types (`&`).
3.  **Primitives/Literals:** `type` aliases can define primitive types, union types, tuple types, and mapped types. `interface`s are primarily for object shapes.
4.  **Self-referencing:** `type` aliases can be self-referencing (recursive) more easily than interfaces.

Question 18

When should you prefer using `interface` over `type` aliases?

Accepted Answer

*   When defining the shape of an object or a class contract.
*   When you need declaration merging (e.g., extending a library's types).
*   When defining public APIs where extensibility is important, as interfaces are generally more extensible.
*   When defining types that will be `implemented` by classes.

Question 19

When should you prefer using `type` aliases over `interface`?

Accepted Answer

*   When defining primitive types, union types (`A | B`), intersection types (`A & B`), or tuple types.
*   When you need to define a type for a function signature.
*   When you need to use mapped types or conditional types.
*   When defining types that are self-referencing (recursive types).
*   When you need to alias a complex type for readability.

Question 20

What does "strict type safety" mean in TypeScript, and what are its benefits?

Accepted Answer

Strict type safety refers to enabling a set of compiler options (like `strict: true`, `noImplicitAny`, `strictNullChecks`, `strictFunctionTypes`, etc.) that enforce more rigorous type checking.
**Benefits:**
*   **Fewer Runtime Errors:** Catches common programming mistakes (e.g., null/undefined access) at compile time.
*   **Improved Code Quality:** Encourages more explicit and robust code.
*   **Better Maintainability:** Makes code easier to understand and refactor.
*   **Enhanced Developer Experience:** Provides more accurate IntelliSense and better refactoring tools.

Question 21

Explain the `keyof` type operator with an example.

Accepted Answer

The `keyof` operator takes an object type and produces a string or number literal union of its keys.
```typescript
interface Person {
  name: string;
  age: number;
}

type PersonKeys = keyof Person; // "name" | "age"

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

const user = { name: "Alice", age: 30 };
let userName = getProperty(user, "name"); // string
let userAge = getProperty(user, "age");   // number
// getProperty(user, "email"); // Error: Argument of type '"email"' is not assignable to parameter of type '"name" | "age"'.
```

Question 22

Explain the `typeof` operator when used in a type context.

Accepted Answer

In a type context, `typeof` is used to refer to the type of a variable or property. It allows you to extract the type of an existing value.
```typescript
const myObject = {
  id: 1,
  name: "Test",
  isActive: true
};

type MyObjectType = typeof myObject;
/*
{
  id: number;
  name: string;
  isActive: boolean;
}
*/

function greet(name: string) {
  return `Hello, ${name}`;
}

type GreetFunctionType = typeof greet; // (name: string) => string
```
This is different from the JavaScript `typeof` operator which returns a string indicating the primitive type of a value at runtime.

TypeScript Advanced Concepts - Type System & Design Patterns

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