TypeScript, a superset of JavaScript, brings static typing to the dynamic nature of JavaScript. Its growing popularity in the development community makes it a crucial skill for developers. If you're preparing for a TypeScript interview, understanding the range of questions you might face is essential. This guide covers basic, intermediate, and advanced TypeScript interview questions to help you ace your interview.
5 Basic TypeScript Interview Questions
1. What is TypeScript, and how does it differ from JavaScript?
TypeScript is an open-source language developed by Microsoft. It is a strict syntactical superset of JavaScript, which means any valid JavaScript code is also valid TypeScript code. TypeScript introduces static typing, which helps in catching errors at compile time rather than runtime, and it includes features like interfaces, enums, and type aliases.
2. How do you install TypeScript in a project?
You can install TypeScript globally on your machine using npm with the command:
npm install -g typescript
Alternatively, you can add it to a project by running:
npm install typescript --save-dev
After installation, you can compile TypeScript files using the tsc command.
3. What is the purpose of a .tsconfig.json file?
The tsconfig.json file is used to configure how the TypeScript compiler (tsc) compiles your TypeScript code. It includes settings like the root directory of TypeScript files, the output directory for compiled JavaScript, and compiler options such as target ECMAScript version and module resolution strategy.
4. How do you declare a variable in TypeScript?
Variables in TypeScript can be declared using let, const, or var with explicit types:
let name: string = "John";
const age: number = 30;
var isActive: boolean = true;
If no type is specified, TypeScript will infer the type based on the assigned value.
5. Explain TypeScript interfaces and provide an example.
Interfaces in TypeScript define the structure of an object. They can specify property names, types, and methods that an object must have:
interface Person {
name: string;
age: number;
greet(): void;
}
const person: Person = {
name: "John",
age: 30,
greet() {
console.log("Hello!");
},
};
5 Intermediate TypeScript Interview Questions
1. What are generics in TypeScript, and why are they useful?
Generics provide a way to create reusable components. They allow you to define a component that can work with a variety of data types rather than a single one:
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString");
Generics ensure type safety and enable flexible code.
2. How do you implement inheritance in TypeScript?
Inheritance in TypeScript is implemented using the extends keyword. A class can inherit properties and methods from another class:
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number) {
console.log(`${this.name} moved ${distance} meters.`);
}
}
class Dog extends Animal {
bark() {
console.log("Woof! Woof!");
}
}
const dog = new Dog("Rex");
dog.bark();
dog.move(10);
3. What is the difference between interface and type in TypeScript?
While both interface and type can be used to define the shape of an object, they have subtle differences. interface is more suited for defining new data structures, whereas type is more versatile and can represent a variety of types including union, intersection, and primitive types. Interfaces can be extended and implemented, whereas types are more flexible and can be composed using union and intersection.
4. How can you create an alias for a type in TypeScript?
Type aliases are created using the type keyword. They allow you to give a name to a specific type:
type StringOrNumber = string | number;
let value: StringOrNumber;
value = "Hello"; // valid
value = 123; // valid
5. Describe the use of union and intersection types in TypeScript.
Union types allow a variable to hold multiple types:
let value: string | number;
value = "Hello";
value = 123;
Intersection types combine multiple types into one:
interface ErrorHandling {
success: boolean;
error?: { message: string };
}
interface ArtworksData {
artworks: { title: string }[];
}
type ArtworksResponse = ErrorHandling & ArtworksData;
let response: ArtworksResponse = {
success: true,
artworks: [{ title: "Mona Lisa" }],
};
5 Advanced TypeScript Interview Questions
1. How does TypeScript support Decorators, and how are they used?
Decorators are a special kind of declaration that can be attached to classes, methods, accessors, properties, or parameters. They are used to modify the behavior of the entity to which they are attached:
function sealed(target: Function) {
Object.seal(target);
Object.seal(target.prototype);
}
@sealed
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
Decorators are a stage 2 proposal for JavaScript and are available as an experimental feature in TypeScript.
2. Explain how TypeScript's any type works and why its usage should be minimized.
Any type in TypeScript is a type that disables type checking and allows any type to be assigned to it. It can be useful for gradually migrating JavaScript code to TypeScript, but overusing any defeats the purpose of TypeScript by removing type safety:
let something: any = "Hello World";
something = 42; // no error
something = true; // no error
Using any can lead to runtime errors that TypeScript is designed to prevent.
3. What are mapped types in TypeScript, and provide an example?
Mapped types allow you to create new types by transforming the properties of an existing type. They are particularly useful for creating transformations like making properties optional or read-only:
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
interface Person {
name: string;
age: number;
}
const readonlyPerson: Readonly<Person> = {
name: "John",
age: 30,
};
// readonlyPerson.name = "Doe"; // Error: Cannot assign to 'name' because it is a read-only property.
4. How does TypeScript handle module augmentation?
Module augmentation allows you to extend existing modules. This is particularly useful for adding new functionality to external libraries without modifying their original code:
// my-module.ts
export class MyClass {
doSomething() {}
}
// augmentation.ts
import { MyClass } from "./my-module";
declare module "./my-module" {
interface MyClass {
newMethod(): void;
}
}
MyClass.prototype.newMethod = function () {
console.log("New Method");
};
const instance = new MyClass();
instance.newMethod();
5. Describe advanced type inference in TypeScript with an example.
TypeScript's advanced type inference capabilities allow the compiler to automatically deduce more complex types from the context in which they are used:
function merge<T, U>(obj1: T, obj2: U): T & U {
return { ...obj1, ...obj2 };
}
const mergedObj = merge({ name: "John" }, { age: 30 });
// TypeScript infers that mergedObj has type { name: string; age: number; }
The merge function infers the combined type of the two objects passed to it.
Conclusion
Preparing for a TypeScript interview involves understanding a wide range of concepts from basic syntax to advanced features. This guide provides a comprehensive set of questions and answers that cover the essential aspects of TypeScript.
By mastering these questions, you'll be well-equipped to demonstrate your TypeScript knowledge and secure your next role as a developer. Remember, the key to success is not just knowing the answers but understanding the concepts behind them. Happy coding!