An Essential Guide To Type Annotations in TypeScript

Summary: In this tutorial, you will learn about type annotations in TypeScript and how they help the TypeScript compiler check your code for type errors.

What is a Type Annotation in TypeScript #

TypeScript uses type annotations to explicitly specify types for identifiers such as variables, functions, objects, etc.

TypeScript uses the following syntax after an identifier as the type annotation, which type can be any valid type:

identifier: type;

In this syntax:

identifier can be a variable, constant, parameter, etc.
type can be any valid type in TypeScript.

Once you annotate an identifier with a type, you can use that identifier with the values of that type. If you assign values of different types, the TypeScript compiler will issue an error.

Type annotations in variables and constants #

The following syntax shows how to specify type annotations for variables and constants:

let variableName: type;
let variableName: type = value;
const constantName: type = value;

In this syntax, the type annotation comes after the variable or constant name and is preceded by a colon (:). For example, the following uses number type annotation for a variable:

let counter: number;

After this, you can only assign a number to the counter variable:

counter = 1;

If you assign a string (or any value that is not a number) to the counter variable, you’ll get an error:

let counter: number;
counter = 'Hello'; // compile error

Try it

Error:

Type '"Hello"' is not assignable to type 'number'.

You can use a type annotation for a variable and initialize it in a single statement like this:

let counter: number = 1;

Try it

In this example, we use the number annotation for the counter variable and initialize it to 1.

The following shows other examples of primitive type annotations:

let firstName: string = 'John';
let age: number = 25;
let active: boolean = true;

Try it

In this example, the firstName variable gets the string type, the age variable gets the number type, and the active variable gets the boolean type.

Type annotation examples #

Arrays #

To annotate an array type, you use a specific type followed by a square bracket : type[] :

let arrayName: type[];

For example, the following declares an array of strings:

let names: string[] = ['John', 'Jane', 'Peter', 'David', 'Mary'];

Try it

Objects #

To specify a type for an object, you use object type annotation. For example:

let person: {
  name: string;
  age: number;
};

person = {
  name: 'John',
  age: 25,
}; // valid

In this example, the person object only accepts an object that has two properties:

name of type string
age of type number

Function arguments & return types #

The following shows a function annotation with parameter type annotation and return type annotation:

function greeting(name: string): string {
  return `Hi ${name}`;
}

In the greeting function:

Accept the name parameter with the type string.
Return a value whose type is also string.

Here’s how you call the greeting function:

function greeting(name: string): string {
  return `Hi ${name}`;
}

let message = greeting('John');
console.log(message);

Try it

The following attempts to pass a number to the greeting function and results in an error:

function greeting(name: string): string {
  return `Hi ${name}`;
}

let message = greeting(1);
console.log(message);

Try it

Error:

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

Summary #

Use type annotation to explicitly specify a type for a variable, function parameter, function return type, etc.
TypeScript compiler uses type annotations to check for type errors.

Quiz #

Quiz

Understanding Type Annotations in TypeScript

5 questions

Review the lesson learning objectives

Was this helpful?