Hello, TypeScript

This course is for someone new to TypeScript who already knows JavaScript. You should be able to write a function with parameters and a return value, loop over an array, read object properties, use if/else, and print with console.log. You do not need intermediate JavaScript or promises. If these are unfamiliar, start with JavaScript beginner. For a readiness check, explain what a function that adds two numbers would return before continuing.

TypeScript adds a checker to JavaScript. A type describes values the code is allowed to use: number, string, boolean, and later shapes of objects. Checking happens before execution. The checker follows assignments and function calls to find some mistakes without running them.

In const minutes: number = 25, : number is a type annotation. It describes minutes; it does not convert a string into a number. The compiler checks the source, then produces JavaScript with the annotation removed. JavaScript still does the arithmetic.

Our editors run locally in your browser. Check types shows genuine TypeScript compiler diagnostics. Check & run checks first and runs only when there are no errors. The first check loads the compiler and can take a moment. Each editor is a separate program; definitions from another box are not shared. They have console output, not a webpage DOM. Reset restores the example. Download saves your current source as main.ts. Edits last for this page visit; download work you want to keep before leaving.

The course uses strict checks. A clean check means the program meets the rules the checker can see. It does not prove a calculation is correct, a website response is trustworthy, or a number is positive. You will practise those distinctions all week.

Bring your JavaScript skills

You do not need to finish JavaScript intermediate first. These beginner lessons supply the JavaScript used here:

• Functions and return values, then scope and default parameters.
• Objects, references and copies, and array callbacks.
• Input validation, errors, tests, and JSON.

The JavaScript example below uses no TypeScript annotations yet. It runs in the same editor because ordinary JavaScript syntax is valid TypeScript too. Here the checker can infer the record properties from the local data. New TypeScript syntax—unions, generics and type guards—will be introduced before you need it.

const sessions = [
  { topic: "Types", minutes: 25, done: true },
  { topic: "DOM", minutes: 40, done: false }
];
let completedMinutes = 0;

for (const session of sessions) {
  if (session.done) {
    completedMinutes += session.minutes;
  }
}

console.log(completedMinutes);

25

The loop visits actual records, so you do not have to assume that index 0 exists. Later we will teach safe indexed access explicitly.

const sessions = [
  { topic: "Types", minutes: 25, done: true },
  { topic: "DOM", minutes: 40, done: false },
  { topic: "Loops", minutes: 10, done: true }
];
let completedMinutes = 0;

// Loop over sessions and add only completed minutes.
console.log(completedMinutes);

const sessions = [
  { topic: "Types", minutes: 25, done: true },
  { topic: "DOM", minutes: 40, done: false },
  { topic: "Loops", minutes: 10, done: true }
];
let completedMinutes = 0;

for (const session of sessions) {
  if (session.done) {
    completedMinutes += session.minutes;
  }
}

console.log(completedMinutes);

35

Predict, check, then run

Before running, write down the output and explain which information the checker knows. Click Check types first, then Check & run.

const minutes: number = 25;
const sessions: number = 2;

console.log(minutes * sessions);

50

Read a real compiler error

Click Check types. Read the line number and the two types in the message. Do not remove the annotation just to silence the mismatch.

const minutes: number = "25";

console.log(minutes);

Your turn

// Declare sessions and minutesPerSession, then print the total.

const sessions: number = 3;
const minutesPerSession: number = 20;

console.log(sessions * minutesPerSession);

60

Change it and explain it

Change sessions to zero, then to a negative number. Both pass type checking. Explain why a study planner might still reject the negative value. Spend the last two minutes writing the difference between a type annotation and Number(text).