Introduction to TypeScript

What is TypeScript?

Think of TypeScript as JavaScript with superpowers. It's a programming language developed by Microsoft that builds on top of JavaScript. This means any valid JavaScript code is also valid TypeScript code. The main feature TypeScript adds is static typing.

In regular JavaScript, you might not know what type of data a variable holds until your code runs, which can lead to unexpected bugs. TypeScript solves this by allowing you to define types for your variables, function parameters, and return values right in your code. This process happens during development, before the code even runs in a browser.

Advantages Over JavaScript

The biggest advantage of TypeScript is catching errors early. Because types are checked before you run the code, you can find and fix many common mistakes right in your editor. This is much better than discovering a bug in production.

For example, imagine you have a function in JavaScript that's supposed to add two numbers:

// JavaScript
function add(a, b) {
  return a + b;
}

// This will not cause an error, but it's probably not what you wanted.
// It returns "52" instead of 7.
add(5, "2");

JavaScript happily concatenates the number and the string, resulting in "52". This could lead to subtle bugs that are hard to track down. Now, let's see the same function in TypeScript:

// TypeScript
function add(a: number, b: number): number {
  return a + b;
}

// This will show an error right in your editor!
add(5, "2"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

TypeScript spots the mistake immediately. This type safety makes your code more reliable, easier to read, and simpler to maintain, especially in large projects with many developers.

TypeScript helps you write code that is more predictable and less prone to errors.

Key Features

Beyond static typing, TypeScript offers several features that improve the development experience:

Type Inference: TypeScript is smart. If you don't explicitly declare a type, it can often figure it out for you based on the value you assign. This saves you from writing extra code.
Modern JavaScript: You can use the latest features of JavaScript, even if they aren't supported by all browsers yet. TypeScript will compile them down to an older, more compatible version of JavaScript.
Better Tooling: Code editors like VS Code have amazing support for TypeScript. You get intelligent code completion, refactoring, and error-checking that make you a more productive developer.

// Type Inference in action
let luckyNumber = 7; // TypeScript infers this is a number
luckyNumber = 'seven'; // Error: Type 'string' is not assignable to type 'number'.

// Defining the shape of an object with an Interface
interface User {
  name: string;
  id: number;
}

const user: User = {
  name: "Alice",
  id: 101
};

Setting Up Your Environment

To start using TypeScript, you'll need Node.js and its package manager, npm, which comes bundled with it. If you have those installed, you can install TypeScript globally on your computer by running this command in your terminal:

npm install -g typescript

Once installed, you can create a TypeScript file (with a .ts extension) and compile it into a plain JavaScript file. Let's create a file named greeter.ts:

// greeter.ts
function greet(person: string) {
  return "Hello, " + person;
}

let user = "Jane User";
console.log(greet(user));

To compile this, run the TypeScript compiler (tsc) in your terminal:

tsc greeter.ts

This command creates a new file called greeter.js containing the compiled JavaScript, which can be run in any browser or Node.js environment.

Now that you know the basics of what TypeScript is and why it's so useful, it's time to test your knowledge.

Quiz Questions 1/5

What is the primary relationship between TypeScript and JavaScript?

Quiz Questions 2/5

What is the main advantage of using static typing in TypeScript?

TypeScript provides a powerful way to add safety and structure to your JavaScript projects, making them easier to manage as they grow.

TypeScript for Python Developers