【Interview Essentials】ommon TypeScript Interview Questions

github: https://github.com/Jessie-jzn
website:https://www.jessieontheroad.com/

1. Why use TypeScript?

1. Static Type Checking

TypeScript’s core advantage is its static type checking, which helps catch common errors during the compile phase rather than runtime. This enhances code reliability and stability.

2. Enhanced Code Editing Experience

TypeScript’s type system enables more accurate code completion, refactoring, navigation, and documentation features in editors, significantly boosting development efficiency.

3. Improved Code Maintainability

Type declarations make understanding code intentions and structure easier, which is particularly beneficial in team development environments.

4. Advanced Language Features

TypeScript supports advanced features not present in JavaScript, such as interfaces, enums, and generics, facilitating the development of more structured and scalable code.

5. Better Tool Support

TypeScript offers various compiler options to optimize generated JavaScript code and supports different JS environments by compiling TypeScript to compatible JavaScript.

2. TypeScript vs. JavaScript

3. Basic Data Types in TypeScript

• Boolean: Represents true or false values.
• Number: Represents both integer and floating-point numbers.
• String: Represents textual data, using single or double quotes.
• Array: Represents a collection of values of a specified type, using type[] or Array.
• Tuple: Represents an array with a fixed number of elements with specified types.
• Enum: Represents a set of named constants.
• Any: Represents any type of value. Provides no type checking.
• Void: Represents the absence of a value, commonly used as the return type of functions that do not return a value.
• Null and Undefined: Represent the absence of a value and uninitialized state, respectively.
• Never: Represents values that never occur, such as functions that throw errors or run indefinitely.
• Object: Represents non-primitive types.

4. What are Generics in TypeScript? How are they used?

Generics allow functions, classes, and interfaces to work with any type while still enforcing type safety.

Example:

function identity<T>(arg: T): T {
  return arg;
}

const numberIdentity = identity<number>(42);
const stringIdentity = identity<string>("Hello");

In this example, the identity function uses a generic , allowing it to accept and return values of any type.

5. Difference Between unknown and any in TypeScript

• any Type: Represents any type of value and bypasses all type checking. It can be assigned any value without type checks.
• unknown Type: Represents an unknown type. Values of unknown type must be checked before they can be used, providing a safer way to handle values whose type is uncertain.

let anyVar: any;
let unknownVar: unknown;

anyVar = 5;
anyVar.toUpperCase(); // No compile-time error, but might cause runtime error

unknownVar = "Hello";
if (typeof unknownVar === "string") {
  unknownVar.toUpperCase(); // Type check ensures safety
}

6. Difference Between readonly Modifier and const Keyword

• readonly Modifier: Used on object properties to make them immutable after initialization.
• const Keyword: Used to declare variables with immutable references. The object's properties can still be modified.

const obj = { name: "John" };
obj.name = "Doe"; // Allowed

interface User {
  readonly id: number;
  name: string;
}

const user: User = { id: 1, name: "John" };
user.name = "Doe"; // Allowed
user.id = 2; // Error, `id` is readonly

7. Decorators in TypeScript

Decorators are a special TypeScript feature that allows adding metadata or modifying classes, methods, properties, or parameters.

Types:

• Class Decorators: Applied to class constructors to modify class behavior or add metadata.
• Method Decorators: Applied to methods to change their behavior or add metadata.
• Accessor Decorators: Applied to get or set accessors to modify their behavior.
• Property Decorators: Applied to class properties to add metadata or modify their behavior.
• Parameter Decorators: Applied to method parameters to add metadata.

Examples:

• Class Decorator:

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}`;
  }
}

• Method Decorator:

function logMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyName} called with args: ${JSON.stringify(args)}`);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

Usage:

Decorators are enabled by setting experimentalDecorators to true in tsconfig.json.

8. Difference Between interface and type

interface and type are both used to define object types, but they have some differences:

The above is the detailed content of 【Interview Essentials】ommon TypeScript Interview Questions. For more information, please follow other related articles on the PHP Chinese website!