Type annotations

Types for JavaScript variables are determined at runtime. Types for JavaScript variables can also change at runtime. For example, a variable that holds a number can later be replaced by a string. Usually, this is unwanted behavior and can result in a bug in our app.

TypeScript annotations let us declare variables with specific types when we are writing our code. This allows the TypeScript compiler to check that the code adheres to these types before the code executes at runtime. In short, type annotations allow TypeScript to catch bugs where our code is using the wrong type much earlier than we would if we were writing our code in JavaScript.

TypeScript annotations let us declare variables with types using the :Type syntax.

1. Let's browse to the TypeScript playground and enter the following variable declaration into the left-hand pane:

let unitPrice: number;

1. The transpiled JavaScript will appear on the right-hand side as follows:

var unitPrice;

1. Let's add a second line to our program:

unitPrice = "Table";

Notice that a red line appears under unitPrice, and if you hover over it, you are correctly informed that there is a type error:

1. You can also add type annotations to function parameters for the return value using the same :Type syntax. Let's enter the following function into the playground:

function getTotal(unitPrice: number, quantity: number, discount: number): number {
  const priceWithoutDiscount = unitPrice * quantity;
  const discountAmount = priceWithoutDiscount * discount;
  return priceWithoutDiscount - discountAmount;
}

We've declared unitPrice, quantity, and discount parameters, all as numbers. The return type annotation comes after the function's parentheses, which is also a number in the preceding example.

1. Let's call our function with an incorrect type for quantity and assign the result to a variable with an incorrect type:

let total: string = getTotal(500, "one", 0.1);

We find that one is underlined in red, highlighting that there is a type error:

1. If we then correct one to 1, total should be underlined in red, highlighting that there is a type problem with that:

The TypeScript compiler uses type annotations to check whether values assigned to variables and function parameters are valid for their type.

This strong type checking is something that we don't get in JavaScript, and it is very useful in large code bases because it helps us immediately detect type errors.