Interview Questions for Web Developer - TypeScript
Tags: typescript, interview
Published: 2024-01-01 10:33:12

**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_](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)

**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_](https://www.typescriptlang.org/docs/handbook/2/generics.html#handbook-content) 

**6. How can Enums be used in TypeScript and what are their advantages?** - [_Answer_](https://www.typescriptlang.org/docs/handbook/enums.html#handbook-content) 

**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:

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

Usage example:

```typescript
//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?**

```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:

```typescript
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:

```typescript
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:

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

type BaseInfo = Partial<Person>;

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