Table of contents
1.
Introduction
2.
Typescript Annotation
3.
Types of annotations
3.1.
1. Primitive types
3.2.
2. Arrays
3.3.
3. Any
3.4.
4. Object
4.
Why is type annotation used?
5.
FAQs
6.
Key Takeaways:
Last Updated: Mar 27, 2024

TypeScript Type Annotation

Introduction

Whenever we declare a variable in any programming language, we declare it using a datatype before the variable. But there is no such feature in Javascript, as it is not a typed language. So how do we declare a variable with a specific type in scripting languages? We cannot declare any type in JavaScript, and that is why we choose typescript for our projects.

Typescript Annotation

TypeScript is a scripting language in which we can specify the type of the variables like string, array, number, boolean, etc. We can specify any type by using colon (: Type) after a variable or property. The use of type annotation is not mandatory in typescript; it is optional. If no type is mentioned, typescript considers the variable as type ‘any’.

Syntax:

var variableName: TypeAnnotation = value;

Note: We can also use let or const based on the variable and its use in code.

Types of annotations

There are the annotations we can use to declare a variable in typescript. All the types are listed below:

1. Primitive types

The primitive type datatypes like string, number, and boolean can be given as a type for any variable.

var distance: number = 30; // number type annotation
var name: string = “coding ninjas”; // string type annotation
var valid: boolean = true; // boolean type annotation

2. Arrays

The arrays can also be given as a type in typescript using different kinds of type annotations. Let’s see how we can declare an array in different ways.

var fruits: []; // empty array 
var numbers: Array = [1, 2, 3];  // array with few numbers
var fruits: string[] = [‘Kiwi’, ‘peach’]; // a string array
var fruits: Array<string> = [‘kiwi’, ‘peach’]; // array declared as generic type
var info: Array (number | String) = [1, ‘kiwi’, 2, ‘peach’]; // multi-type arrays

3. Any

The :any annotation can declare a variable that can accept any data without restrictions.

var value: any;

4. Object

The object type annotation is given using curly braces.

var person: {
    Name: string = “coding ninjas”;
    Experience: number = 10;
}


Annotations are used to declare variables and define return types for functions and parameters in functions.

Why is type annotation used?

Type annotations are not mandatory in typescript. But using them can help the developers a lot.

  • Compilers check the type of the respective variable and raise errors to help the developer deal with different types. 
  • It is a better way of writing code for user readability and maintenance for others working on that code. 
  • When a variable is declared, you cannot change the value to a different data type of variable. If we try doing that, the compiler will display an error. 
  • The annotation helps us to declare variables according to our requirements.
     
var value: number = 8
var color: string = value


The above code gives us an error:

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

FAQs

  1. What is annotation in typescript?
    Type annotations are the variable types used to declare variables or functions that need a type specification.
     
  2. How do I use typescript annotations?
    Typescript annotations can be used by declaring variables with : Type. 
    For example, var value: number = 20; 
     
  3. Why are annotations used?
    Annotations provide additional information to compilers about the variable and its type to prevent users from giving values other than specified.

Key Takeaways:

Let’s briefly this article again to clearly understand type annotations.

  • TypeScript is a scripting language in which we can specify the type of the variables like string, array, number, boolean, etc.
  •  We can specify any type by using colon (: Type) after a variable or property. The type annotation is not mandatory in typescript.
  • We can use annotations to declare primitive types, objects, arrays, function parameters, and function return types.
  • Annotations provide additional information to compilers about the variable and its type to prevent users from giving values other than specified.
     

Hey ninjas! Don’t you find TypeScript interesting? We have found the best web development course to help you become a developer. Check this out, share the cool things you have learned on social media, and mention coding ninjas.
 

Happy Learning!

Live masterclass