Declaring Variables And Basic Data Types And Type Annotation Supported By TypeScript

Introduction

 
In this article we are going to learn about how to declare variables and basic data types supported by TypeScript and Type Annotation.
 

Overview

 
TypeScript is static typed language which allows us to declare variables of various data types, so that we ensure only the desired type of data is being used in the application. So let's get started with the practical info. 
 

Declaring Variables

 
Declaration of a variable is used to assign a data type and an identifier to a variable. Declaration of variables in TypeScript is like JavaScript variable declaration. Below is the table of Variables used in typescript,
 
DataType 
 Explanation
 Var
  • Variable declared with this type would have function scope. 
  • When Variable declared outside the function, it would have global scope and automatically attaches itself to the window object. 
  • They can be re-assigned and re-defined.  
 let
  • Variable declared with this type would have a block-level scope. 
  • They can be re-assigned and cannot be redefined.  
 const
  • Variable declared with this type would have a block-level scope. 
  • They can be neither re-assigned nor re-defined.  
 
Basic Datatypes
  • Data type mentions the type of value assigned to a variable. It is used for variable declarations.

  • Since TypeScript supports static typing, the data type of the variable can be determined at the compilation time itself.

Types of Datatype 
  • Boolean
    boolean is a data type that accepts only true or false as value for the variable it is been declared.
    Ex,
    1. let ShowAvailable : Boolean =true;  
  • Number
    number type represents numeric values. All TypeScript numbers are floating point values.
    Ex,
    1. let Id : number =1;  
  • String
    string is used to assign textual values or template strings. String values are written in quotes – single or double.
    Ex,
    1. let Name : string ='XYZ';  
Template strings are a type of string value that can have multiple lines and embedded expressions. They are surrounded by the backquote\backtick (`) character, and embedded expressions of the form ${ expr }.
  1. let message : string = `The name is ${Name}`;  
any
 
any type is used to declare a variable whose type can be determined dynamically at runtime with the value supplied to it. If no type annotation is mentioned while declaring the variable, any type will be assigned by default.
  1. let height : Any;  
  2. height = 150  
  3. height=140  
Here, height is assigned at runtime as per the perticular individual so we have used any as a datatype.
  •  

void

 
void type represents undefined as the value. undefined value represents "no value".

A variable can be declared with void type as below,
  1. let person:void = undefined;  
void is commonly used to declare function return type. The function which does not return a value can be declared with void return type. If we don’t mention any return type for the function, void return type will be assigned by default.
  1. function displayPersondetails() : void  
  2. {  
  3.    Console.Log("Name is : xyz");  
  4. }  
Type Annotation
 
Type Annotation is a way to enforce type restriction to a specific variable or a function. If a variable is declared with a specific data type and another type of value is assigned to the variable, compilation error will be thrown.
 
Ex 1
  1. let id:Number = 1;   
id variable is declared with number datatype.here, we are insuring that only numeric values can be assign to id variable. Now have a look at the below declaration,
  1. id=" xyz";  
If we assign string value, we will get error stating - Type string is not assignable to type number.
 
Ex 2
 
Function is defined with the parameter of type int and return type as string,
  1. function getPersonDetails (id:number): string{  
  2.    return "id"+id;  
  3. }   
Here, 
  1. getPersonDetails("xyz");   
Envoking function with string parameter throws comilation error stating - "Argument of type 'string' is not assignable to parameter of type 'number'" 
 

Summary

 
In this article, we discussed about declaration of variables, datatypes and Type Annotation in typescript. I hope you like the article. Happy Reading Cheers