TypeScript - Advanced Types & Tooling Flashcards

Question 1

What are TypeScript Generics (`<T>`) and why are they useful?

Accepted Answer

Generics allow you to write components that can work with a variety of types instead of a single one, providing flexibility while maintaining type safety. They enable you to create reusable functions, classes, and interfaces that adapt to the types they operate on.

Question 2

Provide an example of a generic function in TypeScript.

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 // Type argument inference often allows omitting : let output3 = identity("anotherString"); // type of output3 is string ```

Question 3

How can generics be used with interfaces or type aliases?

Accepted Answer

Generics can define type parameters for interfaces or type aliases, making them reusable for different data types. ```typescript interface Box { value: T; } let stringBox: Box = { value: "hello" }; let numberBox: Box = { value: 123 }; ```

Question 4

Explain the primary purpose of the `interface` keyword in TypeScript.

Accepted Answer

An `interface` in TypeScript is used to define the shape of an object, specifying the names and types of its properties and methods. It acts as a contract that classes can implement or objects can conform to, ensuring type consistency.

Question 5

Explain the primary purpose of the `type` keyword (type alias) in TypeScript.

Accepted Answer

A `type` alias creates a new name for an existing type. It can be used to define primitive types, union types, intersection types, tuples, and even complex object shapes, similar to interfaces.

Question 6

What is a key difference between `interface` and `type` regarding declaration merging?

Accepted Answer

`interface` supports "declaration merging," meaning if you declare multiple interfaces with the same name, TypeScript will merge them into a single interface. `type` aliases, however, do not support declaration merging; redeclaring a `type` with the same name will result in a compilation error.

Question 7

When might you prefer using an `interface` over a `type` alias?

Accepted Answer

Prefer `interface` when defining the shape of an object, especially when you anticipate future extensions (e.g., via `extends` or declaration merging) or when implementing with classes (`implements`).

Question 8

When might you prefer using a `type` alias over an `interface`?

Accepted Answer

Prefer `type` alias when defining primitive aliases, union types, intersection types, tuple types, or when you need to define a type that is not an object shape (e.g., `type ID = string | number;`).

Question 9

What are TypeScript Union Types?

Accepted Answer

Union types allow a variable to hold values of several different types. You define a union type using the `|` (pipe) symbol between the types. For example, `string | number` means a variable can be either a `string` or a `number`.

Question 10

Provide an example of a Union Type and how it affects property access.

Accepted Answer

```typescript
type StringOrNumber = string | number;
let value: StringOrNumber = "hello";
value = 123;

Question 11

What are TypeScript Intersection Types?

Accepted Answer

Intersection types combine multiple types into one. An object of an intersection type must have all properties of all the constituent types. You define an intersection type using the `&` (ampersand) symbol.

Question 12

Provide an example of an Intersection Type.

Accepted Answer

```typescript
interface Person {
  name: string;
}
interface Employee {
  employeeId: number;
}

type BusinessPerson = Person & Employee;

const worker: BusinessPerson = {
  name: "Alice",
  employeeId: 101
};
// An object of type BusinessPerson must have both 'name' and 'employeeId'.
```

Question 13

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

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 contain a subset of properties from another type. ```typescript interface User { id: number; name: string; email: string; } type PartialUser = Partial; // PartialUser is equivalent to: // { id?: number; name?: string; email?: string; } const userUpdate: PartialUser = { name: "Bob" }; // Valid ```

Question 14

Explain the `Readonly<T>` utility type and provide an example.

Accepted Answer

`Readonly` constructs a type with all properties of `T` set to `readonly`. This means the properties of the constructed type cannot be reassigned after an object is created. ```typescript interface Point { x: number; y: number; } type ReadonlyPoint = Readonly; // ReadonlyPoint is equivalent to: // { 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. ```

Question 15

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

Accepted Answer

`Pick` constructs a type by picking the set of properties `K` (a union of string literals) from type `T`. ```typescript interface Product { id: string; name: string; price: number; description: string; } type ProductSummary = Pick; // ProductSummary is equivalent to: // { name: string; price: number; } const item: ProductSummary = { name: "Laptop", price: 1200 }; ```

Question 16

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

Accepted Answer

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

Question 17

What are Type Guards in TypeScript?

Accepted Answer

Type guards are special expressions that perform a runtime check to guarantee the type of a variable within a certain scope. They allow TypeScript's compiler to narrow down the type of a variable, enabling access to type-specific properties and methods without errors.

Question 18

How does the `typeof` operator act as a type guard? Provide an example.

Accepted Answer

The `typeof` operator is a built-in type guard that checks the primitive type of a variable (e.g., `"string"`, `"number"`, `"boolean"`, `"symbol"`, `"undefined"`, `"object"`, `"function"`).
```typescript
function printLength(x: string | number) {
  if (typeof x === "string") {
    console.log(x.length); // x is narrowed to string
  } else {
    console.log(x); // x is narrowed to number
  }
}
```

Question 19

How does the `instanceof` operator act as a type guard? Provide an example.

Accepted Answer

The `instanceof` operator is a type guard that checks if an object is an instance of a particular class. It works for classes, not interfaces or type aliases.
```typescript
class Dog {
  bark() { console.log("Woof!"); }
}
class Cat {
  meow() { console.log("Meow!"); }
}

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

Question 20

What is the purpose of the `tsconfig.json` file in a TypeScript project?

Accepted Answer

The `tsconfig.json` file in the root of a TypeScript project specifies the root files and the compiler options required to compile the project. It tells the TypeScript compiler (`tsc`) how to compile the project.

Question 21

Explain the `target` compiler option in `tsconfig.json`.

Accepted Answer

The `target` option specifies the ECMAScript target version for the generated JavaScript code. Common values include `ES5`, `ES2015` (or `ES6`), `ES2017`, `ES2020`, or `ESNext`. A lower target ensures broader browser compatibility.

Question 22

Explain the `module` compiler option in `tsconfig.json`.

Accepted Answer

The `module` option specifies the module code generation strategy. It determines how modules are emitted (e.g., `CommonJS` for Node.js, `ESNext` for modern browsers/bundlers, `UMD`, `AMD`).

Question 23

What does the `strict` compiler option in `tsconfig.json` do?

Accepted Answer

The `strict` option enables a broad range of strict type-checking options with a single flag. Setting it to `true` (recommended) turns on `noImplicitAny`, `noImplicitThis`, `alwaysStrict`, `strictNullChecks`, `strictFunctionTypes`, `strictPropertyInitialization`, and `strictBindCallApply`.

Question 24

Briefly explain `rootDir` and `outDir` in `tsconfig.json`.

Accepted Answer

*   `rootDir`: Specifies the root directory of input files. TypeScript will only compile files within this directory.
*   `outDir`: Specifies the output directory for compiled JavaScript files. The directory structure of `rootDir` is mirrored in `outDir`.

TypeScript - Advanced Types & Tooling

Cards in this deck

Related Flashcard Sets

Korean TOPIK I - Basic Vocabulary & Grammar

BIO101 - Cell Biology & Genetics Fundamentals

CompTIA Network+ (N10-008) - Network Infrastructure & Security

STAT101 - Introduction to Statistics & Probability