TypeScript - Advanced Types & Modern Web Development Flashcards

Question 1

What is `Partial<T>` and when would you use it?

Accepted Answer

`Partial` is a TypeScript utility type that constructs a type with all properties of `T` set to optional. It's useful when you want to create an object that might only have a subset of properties from an existing type, for example, when updating an entity. ```typescript interface User { id: number; name: string; email: string; } type PartialUser = Partial; // Equivalent to: { id?: number; name?: string; email?: string; } const updateUser = (id: number, changes: PartialUser) => { /* ... */ }; ```

Question 2

Explain `Readonly<T>` and its primary use case.

Accepted Answer

`Readonly` is a utility type that constructs a type with all properties of `T` set to `readonly`. This prevents modification of an object's properties once it has been assigned, enforcing immutability. ```typescript interface Point { x: number; y: number; } type ReadonlyPoint = Readonly; // Equivalent to: { readonly x: number; readonly y: number; } const origin: ReadonlyPoint = { x: 0, y: 0 }; // origin.x = 1; // Error: Cannot assign to 'x' because it is a read-only property. ```

Question 3

Differentiate between `Pick` and `Omit`.

Accepted Answer

* `Pick` constructs a type by picking the set of properties `K` (a union of string literals) from type `T`. * `Omit` constructs a type by picking all properties from `T` and then removing `K`. Both are useful for creating new types based on existing ones with specific properties included or excluded. ```typescript interface Product { id: string; name: string; price: number; description: string; } type ProductSummary = Pick; // { id: string; name: string; price: number; } type ProductDetails = Omit; // { name: string; price: number; description: string; } ```

Question 4

What are Conditional Types in TypeScript? Provide an example.

Accepted Answer

Conditional types allow you to choose one of two possible types based on a condition that takes the form of a type relationship test. They use the `extends` keyword in a ternary operator-like structure: `SomeType extends OtherType ? TrueType : FalseType;`. ```typescript type IsString = T extends string ? "Yes" : "No"; type A = IsString; // "Yes" type B = IsString; // "No" ```

Question 5

Explain Mapped Types and their common use cases.

Accepted Answer

Mapped types allow you to create new types by transforming the properties of an existing type. They iterate over keys of a type using `[P in K]`, where `P` is a new property name and `K` is a union of string literals (often `keyof T`). They are fundamental to utility types like `Partial`, `Readonly`, etc. ```typescript type Nullable = { [P in keyof T]: T[P] | null }; interface User { name: string; age: number; } type NullableUser = Nullable; // { name: string | null; age: number | null; } ```

Question 6

When should you use an `interface` versus a `type` alias in TypeScript?

Accepted Answer

*   **`interface`**: Primarily used for defining the shape of objects, classes, and function types. They support declaration merging (can be reopened to add new members) and are generally preferred for public APIs and object shapes.
*   **`type` alias**: Can define types for primitives, unions, tuples, and also object shapes. They do not support declaration merging. They are more versatile for complex type manipulations (e.g., conditional types, mapped types).
In many simple object shape cases, they are interchangeable, but `interface` often offers better performance and error reporting in complex scenarios.

Question 7

What are Generics in TypeScript and why are they important?

Accepted Answer

Generics allow you to write components that can work with a variety of types instead of a single one. They provide a way to make functions, classes, and interfaces reusable and type-safe by parameterizing types. This reduces code duplication and improves flexibility while maintaining strong type checking. ```typescript function identity(arg: T): T { return arg; } let output = identity("myString"); // output is string let output2 = identity(123); // output2 is number (type inference) ```

Question 8

How do you add constraints to a generic type parameter?

Accepted Answer

Generic constraints limit the types that can be used with a generic component. You use the `extends` keyword to specify that a type parameter must be a subtype of another type. This allows you to safely access properties or methods on the generic type.
```typescript
interface Lengthwise {
  length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length); // Now 'length' is guaranteed to exist
  return arg;
}
// loggingIdentity(3); // Error: Argument of type 'number' is not assignable to parameter of type 'Lengthwise'.
loggingIdentity({ length: 10, value: 3 }); // OK
```

Question 9

What are Decorators in TypeScript?

Accepted Answer

Decorators are a special kind of declaration that can be attached to classes, methods, accessors, properties, or parameters. They are functions that modify or augment the behavior of the declaration they are attached to. Decorators are an experimental feature (Stage 3 proposal for ECMAScript) and are commonly used in frameworks like Angular for metadata annotation and dependency injection.
```typescript
function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}
@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}
```

Question 10

What is the purpose of a `.d.ts` declaration file?

Accepted Answer

A `.d.ts` (declaration) file provides type information for JavaScript code. It allows TypeScript to understand the types of variables, functions, and classes defined in existing JavaScript libraries or modules, enabling type checking and autocompletion without rewriting the original JavaScript. This is crucial for integrating untyped JavaScript into a TypeScript project.

Question 11

How do you define a functional component with TypeScript in React?

Accepted Answer

In React, you can define a functional component using `React.FC` (or `React.FunctionComponent`) or by explicitly typing `props`. `React.FC` implicitly provides `children` and `defaultProps` (though `children` is now often explicitly typed). ```typescript // Using React.FC import React from 'react'; interface MyComponentProps { message: string; count?: number; } const MyComponent: React.FC = ({ message, count = 0 }) => { return

{message} - {count}

; }; // Explicitly typing props (often preferred for better control over children) const MyComponent2 = ({ message, count = 0 }: MyComponentProps) => { return

{message} - {count}

; }; ```

Question 12

How does TypeScript enhance state management with `useState` in React?

Accepted Answer

TypeScript provides strong type inference for `useState`. If you initialize `useState` with a value, TypeScript infers its type. You can also explicitly provide a type argument for more complex scenarios or when the initial state might be `null` or `undefined`. ```typescript import React, { useState } from 'react'; interface User { name: string; age: number; } const UserProfile = () => { const [user, setUser] = useState(null); // Explicitly type for null initial state const [count, setCount] = useState(0); // Type inferred as number const fetchUser = () => { /* ... */ setUser({ name: "Alice", age: 30 }); }; return (

{user ?

Name: {user.name}

:

No user

}

Count: {count}

); }; ```

Question 13

How is TypeScript typically used in an Angular application?

Accepted Answer

Angular is built entirely with TypeScript. It leverages TypeScript for:
*   **Component & Service Definitions**: Classes are typed, ensuring correct property and method usage.
*   **Dependency Injection**: Types guide the injector to provide correct dependencies.
*   **Templates**: Type checking can extend into templates (with Ivy's strict template checking).
*   **Decorators**: Heavily uses decorators (`@Component`, `@Injectable`, etc.) which are a TypeScript feature.
This provides strong compile-time checks, better tooling, and improved maintainability for large-scale applications.

Question 14

How do you define reactive state with TypeScript in Vue 3 Composition API?

Accepted Answer

In Vue 3, `ref` and `reactive` are used for reactive state. TypeScript infers types from initial values, but you can also explicitly provide them. * `ref`: For primitive values or when you need to pass reactivity around. * `reactive`: For objects, creating a reactive proxy. ```typescript import { ref, reactive, computed } from 'vue'; interface User { id: number; name: string; } export default { setup() { const count = ref(0); // Type inferred as Ref const user = reactive({ id: 1, name: 'Alice' }); // Explicitly typed reactive object const increment = () => { count.value++; }; const userName = computed(() => user.name.toUpperCase()); return { count, user, increment, userName }; } }; ```

Question 15

What is `keyof` and `typeof` in TypeScript?

Accepted Answer

*   `keyof`: The `keyof` type operator takes an object type and produces a string or string literal union of its keys. It's useful for creating types that represent valid property names.
    ```typescript
    interface Person { name: string; age: number; }
    type PersonKeys = keyof Person; // "name" | "age"
    ```
*   `typeof`: The `typeof` type operator can be used in a type context to refer to the type of a variable or property. It's useful for deriving types from existing values.
    ```typescript
    const user = { name: "Bob", id: 1 };
    type UserType = typeof user; // { name: string; id: number; }
    ```

Question 16

Explain the `infer` keyword in 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 powerful for extracting parts of a type. ```typescript type GetReturnType = T extends (...args: any[]) => infer R ? R : never; type Func = () => string; type Result = GetReturnType; // string type NoFunc = GetReturnType; // never ```

Question 17

What are Type Guards and how do you create a user-defined type guard?

Accepted Answer

Type guards are special expressions that perform a runtime check to guarantee the type of a variable within a certain scope. User-defined type guards are functions that return a boolean and have a return type predicate of the form `parameterName is Type`.
```typescript
interface Dog { bark(): void; }
interface Cat { meow(): void; }

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

function petAnimal(animal: Dog | Cat) {
  if (isDog(animal)) {
    animal.bark(); // TypeScript now knows 'animal' is a Dog
  } else {
    animal.meow(); // TypeScript knows 'animal' is a Cat
  }
}
```

Question 18

What is the difference between Type Assertion and Type Narrowing?

Accepted Answer

*   **Type Assertion**: (e.g., `value as Type` or `<Type>value`) tells the TypeScript compiler, "Trust me, I know this value is of this type, even if you can't prove it." It's a way to override TypeScript's type inference and should be used cautiously. It has no runtime effect.
*   **Type Narrowing**: Is the process by which TypeScript refines the type of a variable based on runtime checks (e.g., `typeof`, `instanceof`, `in` operator, equality checks, user-defined type guards). It helps TypeScript understand the actual type of a variable in a specific code block, enabling safer access to properties and methods.

Question 19

How can `Record<K, T>` be used in advanced type scenarios?

Accepted Answer

`Record` 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 useful for creating dictionary-like types or when you need to define an object where all keys conform to a specific type and all values conform to another. ```typescript type Page = 'home' | 'about' | 'contact'; interface PageInfo { title: string; path: string; } type PageMap = Record; /* Equivalent to: { home: { title: string; path: string; }; about: { title: string; path: string; }; contact: { title: string; path: string; }; } */ const pages: PageMap = { home: { title: 'Home Page', path: '/' }, about: { title: 'About Us', path: '/about' }, contact: { title: 'Contact Us', path: '/contact' }, }; ```

Question 20

What are some best practices for type safety in large-scale TypeScript applications?

Accepted Answer

*   **Strict Mode**: Enable all strict compiler options (`strict: true` in `tsconfig.json`) for maximum type safety.
*   **Explicit Types**: While inference is great, explicitly type function parameters, return values, and complex state where clarity is paramount.
*   **Generics**: Use generics to create reusable, type-safe components and functions.
*   **Interfaces/Type Aliases**: Consistently define clear interfaces for data structures and APIs.
*   **Declaration Files (`.d.ts`)**: Ensure external JS libraries have type definitions.
*   **Type Guards**: Use type guards for robust runtime type checking, especially with union types.
*   **Avoid `any`**: Minimize or eliminate the use of `any`. Use `unknown` when types are truly unknown and require explicit narrowing.
*   **ESLint/Prettier**: Integrate linting tools with TypeScript plugins to enforce coding standards and catch type-related issues.

Question 21

Explain `ReturnType` and `Parameters` utility types.

Accepted Answer

* `ReturnType`: Extracts the return type of a function type `T`. ```typescript type MyFunction = (a: number, b: string) => boolean; type ResultType = ReturnType; // boolean ``` * `Parameters`: Extracts the parameter types of a function type `T` as a tuple. ```typescript type MyFunction = (a: number, b: string) => boolean; type ArgsType = Parameters; // [a: number, b: string] ``` These are powerful for creating new types based on existing function signatures, especially in scenarios like mocking or adapting functions.

Question 22

How can TypeScript help with `props` drilling and context API in React?

Accepted Answer

TypeScript ensures that the `value` provided to a React `Context.Provider` matches the expected type defined by `createContext`. When consuming context, TypeScript guarantees that the destructured values from `useContext` are correctly typed, preventing runtime errors related to missing or mistyped properties, even when `props` are passed deeply through the component tree. ```typescript // Context definition interface Theme { primaryColor: string; secondaryColor: string; } const defaultTheme: Theme = { primaryColor: '#007bff', secondaryColor: '#6c757d' }; const ThemeContext = React.createContext(defaultTheme); // Provider usage const App = () => { const currentTheme: Theme = { primaryColor: 'red', secondaryColor: 'blue' }; return ( ); }; // Consumer usage const MyComponent = () => { const theme = React.useContext(ThemeContext); // 'theme' is correctly typed as Theme return

Hello

; }; ```

TypeScript - Advanced Types & Modern Web Development

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