Interview Questions for Web Developer - TypeScript

1. What is TypeScript ?
TypeScript is an open-source programming language developed by Microsoft that extends JavaScript by adding static typing. It enables developers to write safer and more maintainable code by allowing the definition of variable types, interfaces, and other type annotations, catching errors during development and improving code quality and tooling support.

2. What are the advantages TypeScript has over JavaScript?
TypeScript offers advantages over JavaScript by providing static typing, better code readability, enhanced tooling support, early error detection, and improved maintainability in larger codebases.

3. What are data types in TypeScript and how are they used? - Answer

4. What is the difference between type and interface in TypeScript?
In TypeScript, a type can be used to create an alias for a particular type, allowing the definition of custom types, unions, intersections, etc., while an interface declares a structure defining the shape of an object, often used for describing contracts for object shapes, supporting declaration merging, and extending types or interfaces. Both type and interface can serve similar purposes in many cases, but type offers more flexibility, allowing the definition of more complex types, while interface can be extended to add new members.

5. How do Generics work in TypeScript and why are they useful? - Answer

6. How can Enums be used in TypeScript and what are their advantages? - Answer

7. What are Decorators in TypeScript and when are they used?
A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.
To enable experimental support for decorators, you must enable the experimentalDecorators compiler option either on the command line or in your tsconfig.json:

{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}

Usage example:

//Decorator that splits the string
function split(value?: string | RegExp) {
  return function (
    target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    const originalFunction = descriptor.value;

    descriptor.value = function (...args: any[]) {
      args[0] = args[0].split(value);
      originalFunction.apply(this, args);
    };
  };
}

class StringManager {
  @split("")
  print(str: string) {
    console.log(str);
  }
}

const stringManager = new StringManager();

stringManager.print('hello') // ['h', 'e', 'l', 'l', 'o']

8. How to type Objects like key-value pairs in TypeScript?

type MyObject = { [key: string]: any }; 

const obj: MyObject = { name: "Jone" };

// OR

type MyObject = Record<string, any>;

const obj: MyObject = { name: "Jone" };

9. What is Pick, Omit and Partial utility types in TypeScript?
Pick allows one to pick certain types from an existing type:

type Person = {
  name: string;
  age: number;
  email: string;
}

type BaseInfo = Pick<Person, "name" | "age">;

const john: BaseInfo = {
  name: "john",
  age: 20
}

Omit allows one to exclude certain types from an existing type:

type Person = {
  name: string;
  age: number;
  email: string;
}

type BaseInfo = Omit<Person, "name">;

const john: BaseInfo = {
  email: "test@email.com",
  age: 20
}

Partial creates a type where all properties of the provided type become optional by adding ? to each property:

type Person = {
  name: string;
  age: number;
  email: string;
}

type BaseInfo = Partial<Person>;

const john: BaseInfo = {
  name: "John"
}