Introduction to TypeScript

JavaScript with Superpowers

Imagine you're building with LEGOs. JavaScript is like having a giant box with every kind of brick imaginable. You can build anything, but it's easy to grab the wrong piece and not realize it until your creation collapses. TypeScript is like having the same box of LEGOs, but with a guide that highlights the right pieces for each step, preventing mistakes before you even make them.

TypeScript is a strongly typed superset of JavaScript that compiles to plain JavaScript.

Developed by Microsoft in 2012, TypeScript was created to make large-scale JavaScript development more manageable. It's not a different language; it's a layer on top of JavaScript. This means any valid JavaScript code is also valid TypeScript code. The key difference is that TypeScript adds static typing.

Static Typing

noun

A programming language feature where variable types are checked at compile-time (before the code runs). This helps catch errors early in the development process.

Why Use TypeScript?

JavaScript is dynamically typed, meaning you don't have to declare the type of a variable. This offers flexibility but can lead to subtle bugs that are hard to find. For example, you might accidentally try to add a number to a string, resulting in unexpected behavior that only appears when you run the code.

TypeScript solves this by letting you define what kind of data a variable can hold. If you try to assign the wrong type, TypeScript will show you an error right in your code editor, long before you run the program.

The only job of TypeScript is static checking—a fancy way of saying it catches errors while you're typing, before your code even runs.

This leads to several key benefits:

Fewer Bugs: Catching errors early means more reliable code.
Better Tooling: Code editors can provide smarter autocompletion, suggestions, and refactoring tools because they understand your code better.
Improved Readability: Type annotations make your code self-documenting. It's easier for you (or a teammate) to understand what a function expects and what it returns just by looking at its signature.

JavaScript vs. TypeScript

Here’s a quick comparison to highlight the main differences.

Feature	JavaScript	TypeScript
Typing	Dynamic	Static (Optional)
Error Checking	At runtime (when you run the code)	At compile-time (before you run the code)
Tooling	Good	Excellent (better autocompletion & error detection)
Learning Curve	Easier for beginners	Steeper, requires learning types
Browser Support	Runs directly in browsers	Must be compiled into JavaScript first

The last point is important. Browsers don't understand TypeScript directly. You need a tool called a compiler to translate your TypeScript code (.ts files) into plain JavaScript (.js files) that browsers can execute. This process is called transpilation.

Setting Up Your Environment

To start using TypeScript, you need Node.js and its package manager, npm, installed. If you don't have them, you can download them from the official Node.js website.

Once Node.js is set up, open your terminal or command prompt and install TypeScript globally with this command:

npm install -g typescript

This gives you access to the TypeScript compiler, tsc. You can check that it was installed correctly by running:

tsc -v

This should print the version number of TypeScript you just installed.

Next, create a new project folder and inside it, create a file named tsconfig.json. This file tells the compiler how to handle your project. A basic configuration looks like this:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true
  }
}

This tells the compiler to convert our TypeScript into modern JavaScript (ES6) and enables strict type-checking rules, which is highly recommended for catching more errors.

Now you're ready to write some TypeScript! Create a file named hello.ts and add this code:

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet("World");

Notice the : string part. This is a type annotation, telling TypeScript that the name parameter must be a string. If you tried to call greet(42), TypeScript would give you an error right away.

To compile this file into JavaScript, run this command in your terminal:

tsc hello.ts

This will create a new file, hello.js, containing plain JavaScript that any browser can run. You've successfully written and compiled your first TypeScript code!

Ready to test your knowledge?

Quiz Questions 1/5

What is the primary feature that TypeScript adds to JavaScript?

Quiz Questions 2/5

Any valid JavaScript code is also valid TypeScript code.

TypeScript Essentials