Your First TypeScript Program: Annotations, Errors and the Compiled JavaScript

Let us write a small program, deliberately break it, and see how TypeScript helps.

The program#

const customer: string = "Asha";
const items: number = 3;
const pricePerItem: number = 149.5;

function total(count: number, price: number): number {
  return count * price;
}

console.log(`${customer} ordered ${items} items`);
console.log(`Total: ₹${total(items, pricePerItem).toFixed(2)}`);

Asha ordered 3 items
Total: ₹448.50

The new parts are the type annotations, written as a colon and a type after a name:

Reading compiler errors#

Change the value of items to a string:

const items: number = "3";

error TS2322: Type 'string' is not assignable to type 'number'.

Misspell a method name:

const customer: string = "Asha";
console.log(customer.toUppercase());

error TS2551: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?

Call the function with the wrong number of arguments:

function total(count: number, price: number): number {
  return count * price;
}
total(3);

error TS2554: Expected 2 arguments, but got 1.

Each error has a code (TS2322), a message, and, in the full output, the file name, line and column. In VS Code, the same messages appear when you hover over the red underline. Searching for the error code online usually finds a good explanation.

What the compiler produces#

For the program above, tsc outputs JavaScript like this:

const customer = "Asha";
const items = 3;
const pricePerItem = 149.5;
function total(count, price) {
    return count * price;
}
console.log(`${customer} ordered ${items} items`);
console.log(`Total: ₹${total(items, pricePerItem).toFixed(2)}`);

The annotations are simply removed. This is the most important idea in TypeScript: types exist only at compile time. At runtime, it is plain JavaScript, so TypeScript cannot check data that arrives while the program runs, such as user input or API responses. You will learn how to handle that safely in later lessons (any, unknown and never, Async Code and API Data).

You do not need to annotate everything#

TypeScript works out many types by itself. These two lines are equivalent:

const city: string = "Pune";
const town = "Pune";          // TypeScript infers that this is a string
console.log(city === town);

true

Annotating function parameters is required, while most variables can rely on inference. The Type Inference lesson explains when to annotate.

Practice#

function bmi(weightKg: number, heightM: number): number {
  return weightKg / (heightM * heightM);
}

console.log(bmi(68, 1.72).toFixed(1));

23.0

function bmi(weightKg: number, heightM: number): number {
  return weightKg / (heightM * heightM);
}
bmi("68", 1.72);

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Key takeaway#