Introduction to TypeScript

Meet TypeScript

JavaScript powers interactive websites, web applications, and much more. It’s flexible and powerful, but that flexibility can sometimes make mistakes difficult to catch.

TypeScript builds on JavaScript by adding a type system. It helps developers describe what kind of information their code should work with, making certain mistakes easier to spot before the code runs.

If you already know a little JavaScript, you’re off to a great start. TypeScript uses familiar JavaScript syntax while introducing tools that help you write more predictable code.

Catch Mistakes Before They Become Problems

Imagine creating a variable to store someone’s age. You expect a number, but somewhere in your program, a piece of text accidentally gets assigned instead.

let age = 25;
age = "twenty-five";

JavaScript allows this because variables can hold values of different types. That flexibility can be useful, but it can also lead to unexpected behavior later.

let age: number = 25;
age = "twenty-five"; // Type error!

The : number annotation tells TypeScript that age should contain a number. Assigning text conflicts with that expectation, so TypeScript reports an error.

Give Your Data a Clear Identity

TypeScript includes types for common kinds of information. Three you’ll use frequently are string, number, and boolean.

const username: string = "Alex";
const score: number = 100;
const isLearning: boolean = true;

console.log(username);
console.log(score);
console.log(isLearning);

A string represents text, a number represents numeric values, and a boolean represents either true or false.

You’ll explore these types in much greater detail in the next lesson.

TypeScript Can Figure Things Out

Here’s something useful: you don’t always need to write a type annotation. TypeScript can often determine a variable’s type from the value you give it.

let city = "Los Angeles";
let temperature = 72;

city = "San Diego";       // Allowed
temperature = 75;         // Allowed

// temperature = "warm";  // Type error

TypeScript infers that city is a string and temperature is a number. It can then check later assignments against those types.

How Does TypeScript Run?

Browsers normally execute JavaScript, not TypeScript source code. TypeScript-specific syntax, such as : string, needs to be removed before the code can run in a browser.

The TypeScript compiler performs this conversion. The process is commonly called transpilation.

const message: string = "Hello, TypeScript!";
console.log(message);

const message = "Hello, TypeScript!";
console.log(message);

Notice that the type annotation disappears. Types help TypeScript check your program, but they don’t become runtime JavaScript instructions.

Write a Friendly Greeting

Let’s combine what you’ve learned into a small program that stores information and prints a personalized greeting.

const developer: string = "Alex";
const course: string = "TypeScript";

console.log("Hello, " + developer + "!");
console.log("Welcome to " + course + ".");

Each variable has a clear type, and console.log() prints the resulting messages. If you try assigning a number to one of these string variables, TypeScript can report the mismatch.

You’re Ready to Write TypeScript!

You’ve learned what TypeScript is, why types are useful, and how TypeScript becomes JavaScript before running in a browser.

Now it’s time to experiment. You’ll write a small program, change its values, and see the results in a real TypeScript sandbox.

Don’t worry about memorizing every type or rule yet. Focus on understanding how types describe your data and help you catch mistakes.