Mastering TypeScript for Interviews
Introduction to TypeScript
JavaScript with Superpowers
Think of TypeScript as JavaScript, but with a cape. It's what's known as a "superset" of JavaScript, which means any valid JavaScript code is also valid TypeScript code. The reverse, however, isn't true. TypeScript adds extra features on top of JavaScript, with the most important one being static typing.
Developed and maintained by Microsoft, TypeScript's main goal is to help you catch errors early in the development process, long before your code ever reaches a user's browser. It does this by adding a layer of type safety, making your code more predictable and easier to manage, especially in large, complex applications.
Why Bother with Types?
JavaScript is dynamically typed. This means you can create a variable and change the type of data it holds whenever you want. You can start with a number and later assign a string to the same variable, and JavaScript won't complain.
While this flexibility is great for quick scripts, it can lead to tricky bugs in bigger projects. Imagine a function that expects a number but accidentally receives a string. JavaScript might try its best to make it work, often with unexpected results, and you might not find the error until your application is already running.
TypeScript is a powerful tool that enhances your JavaScript code by adding static typing, which helps catch errors early, improves code readability, and makes your projects more scalable.
TypeScript introduces static typing. You declare what type of data a variable should hold, and TypeScript's compiler will check your code for mistakes. If you try to assign a string to a variable that's supposed to be a number, you'll know immediately—not after your users do.
Let's see a quick example. Here's some simple JavaScript:
function add(a, b) {
return a + b;
}
// This will return 3, as expected.
add(1, 2);
// This will return "12", which is probably not what you wanted.
add(1, "2");
Now, here's how TypeScript helps prevent that mistake:
function add(a: number, b: number) {
return a + b;
}
// This works fine.
add(1, 2);
// This line will show an error *before* you even run the code!
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.
add(1, "2");
This immediate feedback is a game-changer. It makes your code more robust and easier to understand for other developers (and your future self).
Getting Started
Browsers don't understand TypeScript directly. It needs to be compiled—or transpiled—into plain JavaScript first. Setting this up is straightforward.
First, you need Node.js and its package manager, npm, installed on your system. If you have those, you can install TypeScript globally with a single command in your terminal:
npm install -g typescript
Once installed, you can create a TypeScript file (with a .ts extension) and write some code.
// greeting.ts
function greet(person: string) {
return "Hello, " + person;
}
let user = "World";
console.log(greet(user));
To compile this file into JavaScript, run the TypeScript compiler, tsc, from your terminal:
tsc greeting.ts
This will create a new file, greeting.js, containing standard JavaScript that any browser can run. While you can do this manually, most modern development tools and frameworks have this compilation step built into their workflow, making it seamless.
What is the primary relationship between TypeScript and JavaScript?
What problem does TypeScript's static typing primarily solve?