【Interview Essentials】Top 8 TypeScript Interview Questions & Expert Answers

1. Why use TypeScript?

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<type>.

• 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?

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

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

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

• 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.

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

8. Difference Between interface and type

// Interface Example
interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = { name: "John", age: 30 };

// Type Example
type User = {
  name: string;
};

// Error: Cannot redeclare block-scoped variable 'User'
type User = {
  age: number;
};

// Union and Intersection Types
type NameOrAge = string | number; // Union Type
type Person = { name: string } & { age: number }; // Intersection Type

// Primitive Type Aliases
type StringAlias = string;
type NumberAlias = number;

// Mapped Types
type ReadOnly<T> = {
  readonly [P in keyof T]: T[P];
};

type User = {
  name: string;
  age: number;
};

type ReadOnlyUser = ReadOnly<User>;