Type Annotations in TypeScript for Beginners

Learn what type annotations are and why they can make your code safer from bugs.

Estefania Cassingena Navone's photo
Estefania Cassingena Navone
·

5 min read

Type Annotations in TypeScript for Beginners

Table of contents

What are Type Annotations?

Welcome! Now we will talk about variable type annotations in TypeScript. This will be a quick introduction to the concept of type annotations.

A type annotation is a way to tell TypeScript the data type of the values that a variable can store.

💡
A "Type Annotation" is also commonly referred to as a "Type Declaration".

But before we dive into the details of type annotations, let's compare our current approach in JavaScript with our approach in TypeScript.

In JavaScript

In JavaScript, when we define a variable, we do not have to specify the data type of its values. We just declare or define the variable and then we assign a value to it.

let message = "Hello World";

This might seem correct at first, right?

However, there is something quite risky about it.

What if later on in our code, we assign a value of a different data type to the variable?

We might do this by mistake or intentionally without fully understanding its consequences.

For example:

let message = 45;

Is 45 a message? No, it's not.

This unintentional change in the data type can cause serious issues in our program. It's major risk that we face in JavaScript and we have no way to prevent it.

In TypeScript

This is where TypeScript comes in to save the day! In TypeScript, we have type annotations to specify the data type of the values that a variable can store.

This is an example:

let message: string = "Hello World";

That way, we can prevent unexpected changes.

If we try to assign a value of a different data type:

let message = 45;

We will see this error:

Type 'number' is not assignable to type 'string'.

The best part of this is that we will see the error without even running the code because TypeScript has static typing.

💡
Static typing is a feature of a programming language that allows the compiler (in this case, a transpiler) to check the data types of variables and expressions at compile time.

That is why TypeScript is much safer than JavaScript. We cannot change or mix data types by mistake.

Type Annotation Syntax

In general, you can write a type annotation with the following syntax:

let variableName: dataType = value;

From left to right, we find:

  • The keyword let, var, or const. (We use let to define a variable whose value can be reassigned).

  • The name of the variable.

  • A colon (:).

  • The data type of the values that the variable can store.

  • The assignment operator (=).

  • The value that will be assigned to the variable.

  • A semicolon (;).

Data Types in TypeScript

Awesome. Now that you know how to write type annotations, let's talk about the data types that you can assign.

💡
Remember that TypeScript is a superset of JavaScript, so the data types in JavaScript are also valid data types in TypeScript. TypeScript also has a few additional types.

Primitive types include:

  • number

  • string

  • boolean

We also have:

  • Arrays

  • Tuples

  • enum

  • unknown

  • any

💡
You can find more information about these data types in this handbook from the TypeScript official documentation. We will cover them in more detail in this series of articles.

Advantages of Type Annotations

  • They can make your code easier to read and maintain. If you use type annotations, you will be able to identify the data type of a variable very easily and you will be guaranteed to keep the same data type throughout the program.

  • They help you to catch errors early in the development process. Static typing warns you of any type mismatches and potential bugs, so you won't have to run the code to see what is wrong.

  • They can help you to improve code quality. With fewer bugs to fix, you will be able to focus on what truly matters, the quality of your code and implementing new features.

  • They are very dynamic and powerful. You can also specify multiple valid data types for a variable in case you need to handle multiple options.

Examples

Let's see some examples of type annotations in TypeScript:

// Primitives
const message: string = "Hello, World";
var numProducts: number = 15;
let isLoggedIn: boolean = true;

Here we have examples with arrays:

// Arrays
const grades: number[] = [56, 23, 84, 100, 55];
const numbers: Array<number> = [1, 2, 3, 4, 5];

A tuple:

// Tuple
const petInfo: [string, number] = ["Gino", 7];

This is an example of a function with type annotations in the parameters and the return value:

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

These examples can give you an idea of what you can do with type annotations in TypeScript but this is only the start.

💡
This topic is very broad and there are many variations and use cases. We will talk about them in more detail in this series of articles. (Stay tuned! 😉).

Conclusion

  • Type annotations are very powerful in TypeScript. They can help you to write clean code that is ready to read and maintain.

  • Type annotations can help you to write better code with fewer bugs.

  • Type annotations are easy to learn and use. They are like "icing on the cake" on top of the JavaScript syntax that you are already familiar with.

Thanks for reading my article! Now you know more about type annotations. To learn more about TypeScript, check out my series below.

If you would like to find more coding tutorials, follow me on YouTube (Coding with Estefania) and Twitter (EstefaniaCassN). Have an awesome day. 🔅

TypeScriptTypeScript Tutorial