Introduction to TypeScript

A Smarter Way to Write JavaScript

Think of TypeScript as JavaScript with superpowers. It’s a programming language developed by Microsoft that builds on JavaScript, adding new features without changing how JavaScript fundamentally works. In fact, any valid JavaScript code is also valid TypeScript code. The main superpower it gives you is something called static typing.

Why Bother with Types?

JavaScript is dynamically typed, which means you don't have to declare the type of a variable. While this offers flexibility, it can lead to unexpected errors that only appear when you run the code. For example, you might accidentally pass a number to a function that expects a string, causing a crash.

TypeScript solves this by adding static typing. You can define the types of your variables, function parameters, and return values. This means a tool called the TypeScript compiler can check your code for type errors before you run it, catching bugs early in the development process.

Adding types makes your code easier to read and understand. It acts as a form of documentation, making it clear what kind of data your functions expect and what they will return. This is incredibly helpful when working on large projects or with a team.

The Core Tools: Annotations and Interfaces

The most basic way to use types is with type annotations. Let's look at a simple JavaScript function:

// In JavaScript, we don't know what 'person' is.
function greet(person) {
  return "Hello, " + person;
}

In TypeScript, we can add an annotation to specify that person should be a string.

function greet(person: string) {
  return "Hello, " + person;
}

The : string part is the type annotation. Now, if you try to call this function with a number, like greet(42), TypeScript will give you an error before you even run the code.

For more complex data, like objects, we can use an interface. An interface is like a blueprint that defines the shape of an object.

interface User {
  name: string;
  id: number;
}

function welcomeUser(user: User) {
  return `Welcome, ${user.name}!`;
}

// This is valid
welcomeUser({ name: 'Alice', id: 1 });

// This will cause an error
// welcomeUser({ name: 'Bob' }); // Error: Property 'id' is missing

Here, the User interface ensures that any object passed to welcomeUser must have both a name (string) and an id (number).

From TypeScript to JavaScript

A key thing to remember is that browsers don't understand TypeScript directly. They only understand JavaScript. This is where the TypeScript compiler comes in. It takes your TypeScript code (usually in .ts files), checks it for type errors, and then converts it into clean, readable JavaScript code (in .js files) that any browser can run.

Setting Up Your Workspace

Getting started with TypeScript is straightforward. You'll need Node.js and npm (Node Package Manager) installed, which are standard tools for modern web development.

Install TypeScript: Open your terminal or command prompt and run the following command. This installs the TypeScript compiler globally on your system.

npm install -g typescript

Create a File: Make a new file named hello.ts. The .ts extension is for TypeScript files.

Write Some Code: Add the greet function from our earlier example into hello.ts.

function greet(person: string) {
  console.log("Hello, " + person);
}

greet("World");

Compile the Code: In your terminal, navigate to the folder containing your file and run:

tsc hello.ts

This command tells the TypeScript compiler (tsc) to process hello.ts. You'll now see a new file in your folder: hello.js. This is the compiled JavaScript output that can be run anywhere.

Now that you have the basics down, you're ready to start exploring how TypeScript can make your code safer and more maintainable.

TypeScript and React for Web Development