Type Annotations

Type annotations are a fundamental part of TypeScript. They allow you to tell TypeScript what type a variable, parameter, or return value should be.

What are type annotations?

Type annotations are a way to specify the type of a value in TypeScript. They use a colon (:) followed by the type name such as a string.

Variable type annotations

The most common place you'll use type annotations is when declaring variables:

let user: string = "James";
let occupation: number = 30;
let isActive: boolean = true;

Here, we're telling TypeScript the following:

• user should be a string
• age should be a number
• isActive should be a boolean

Why use type annotations?

Type annotations help TypeScript catch errors before your code runs:

let user: string = "James";
user = 42; // Type 'number' is not assignable to type 'string'

let user: string = "James";
user = 42; // Type 'number' is not assignable to type 'string'

Run the code above to see the result. Without type annotations this error may get missed,, or it might infer the wrong type.

Function parameter annotations

You can also annotate function parameters. This allows the values the function receives to be restricted to a certain type:

function greet(user: string) {
  return `Hello, ${user}!`;
}

This tells TypeScript that the user parameter must be a string. Test this out by calling the function with a number:

function greet(user: string) {
  return `Hello, ${user}!`;
}

greet(42); // Argument of type 'number' is not assignable to parameter of type 'string'

function greet(user: string) {
  return `Hello, ${user}!`;
}

greet(42); // Argument of type 'number' is not assignable to parameter of type 'string'

Return type annotations

You can also specify what type a function should return:

function add(a: number, b: number): number {
  return a + b;
}

The : number after the parentheses tells TypeScript that this function returns a number.

Multiple parameters

Functions can also have multiple parameters, each having its own type annotation:

function createUser(name: string, age: number, isActive: boolean): string {
  return `${name} is ${age} years old and is ${isActive ? 'active' : 'inactive'}`;
}

function createUser(name: string, age: number, isActive: boolean): string {
  return `${name} is ${age} years old and is ${isActive ? 'active' : 'inactive'}`;
}

When type annotations are required

In some cases, TypeScript can infer (work out) the type automatically, so type annotations are not always required. However, there are times where they are helpful or required:

1. Function parameters: Require type annotations (unless they have default values)
2. Return types: Optional but recommended
3. Variables without initial values: These require type annotations

// Type annotation needed - no initial value
let username: string;
username = "Chris";

// Type annotation optional - TypeScript can infer from the provided value
let message = "Hello"; // TypeScript knows this is a string

// Type annotation needed - no initial value
let username: string;
username = "Chris";

// Type annotation optional - TypeScript can infer from the provided value
let message = "Hello"; // TypeScript knows this is a string

Type annotation syntax

The general syntax for type annotations is:

variableName: type = value;

Or for functions:

function functionName(parameter: type): returnType {
  // function body
}

Type annotations are your first step into the world of TypeScript. In the next lesson, you will learn more about type inference, which allows TypeScript to automatically figure out types automatically.