My Blog

Category: Uncategorized

  • Strings

    In TypeScript, a string represents a sequence of characters. The string type is a fundamental data type in TypeScript. Strings are important to hold data that can be represented in text form. Like JavaScript, TypeScript also supports both string primitives and String objects.

    The String object lets you work with a series of characters. It wraps the string primitive data type with a number of helper methods.

    You can invoke methods on primitive strings because TypeScript automatically wraps the string primitive and call the methods on wrapper object. The same applies to properties also.

    Creating Strings

    Strings in TypeScript can be created as primitives from string literals or as objects using the String() constructor.

    You can use the following syntax to create a String object in TypeScript −

    cost str =newString(value);

    Here str is the newly created String object and value is a series of characters.

    You can create string primitives using single quote, double quotes and backtick.

    let str1:string='a string primitive';let str2:string="another string";let str3:string=yet another string;

    The string primitives can also be created using the String() function without new keyword.

    let str:string=String(value);

    ‘string’ is a primitive, but ‘String’ is a wrapper object. Prefer using ‘string’ when possible.

    String Properties

    A list of the methods available in String object along with their description is given below −

    S.No.Property & Description
    1.ConstructorReturns a reference to the String function that created the object.
    2.LengthReturns the length of the string.
    3.PrototypeThe prototype property allows you to add properties and methods to an object.

    String Methods

    A list of the methods available in String object along with their description is given below −

    S.No.Method & Description
    1.charAt()Returns the character at the specified index.
    2.charCodeAt()Returns a number indicating the Unicode value of the character at the given index.
    3.concat()Combines the text of two strings and returns a new string.
    4.indexOf()Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.
    5.lastIndexOf()Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not found.
    6.localeCompare()Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.
    7.match()Used to match a regular expression against a string.
    8.replace()Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.
    9.search()Executes the search for a match between a regular expression and a specified string.
    10.slice()Extracts a section of a string and returns a new string.
    11.split()Splits a String object into an array of strings by separating the string into substrings.
    12.substr()Returns the characters in a string beginning at the specified location through the specified number of characters.
    13.substring()Returns the characters in a string between two indexes into the string.
    14.toLocaleLowerCase()The characters within a string are converted to lower case while respecting the current locale.
    15.toLocaleUpperCase()The characters within a string are converted to upper case while respecting the current locale.
    16.toLowerCase()Returns the calling string value converted to lower case.
    17.toString()Returns a string representing the specified object.
    18.toUpperCase()Returns the calling string value converted to uppercase.
    19.valueOf()Returns the primitive value of the specified object.

    Examples

    Lets understand the string types with the help of some examples in TypeScript.

    Example: Creating String Primitives

    In the example below, we use single quote, double quote and backtick to create the primitive strings str1, str2 and str3 respectively.

    Open Compiler

    let str1:string='a string primitive';console.log(str1);let str2:string="another string";console.log(str2);let str3:string=yet another string;console.log(str3);

    On compiling, it will generate the following JavaScript code.

    let str1 ='a string primitive';
console.log(str1);let str2 ="another string";
console.log(str2);let str3 =yet another string;
console.log(str3);

    The output of the above example code is as follows −

    a string primitive
another string
yet another string

    Example: Creating String Objects

    Here we create a String object using the String() constructor with new keyword.

    Open Compiler

    const email =newString('[email protected]');console.log(email);console.log(typeof email);

    On compiling, it will generate the following JavaScript code.

    const email =newString('[email protected]');
console.log(email);
console.log(typeof email);

    The output of the above example code is as follows −

    [email protected]
object

    Example: Concatenating TypeScript strings

    To concatenate two string, we can use + operator. Here, we concatenate two strings str1 and str2 and display the result in the console.

    Open Compiler

    let str1:string="Hello ";let str2:string="World!";let str3:string= str1 + str2;console.log(str3);

    On compiling, it will generate the following JavaScript code.

    let str1 ="Hello ";let str2 ="World!";let str3 = str1 + str2;
console.log(str3);

    The output of the above example code is as follows

    Hello World!

    Example: Accessing string elements using indexing

    In the example below, we access the string characters from the 1st and 6th indices.

    Open Compiler

    let message:string="Hello World!";console.log("Character at index 1 is => "+ message[1]);console.log("Character at index 6 is => "+ message[6]);

    On compiling, it will generate the following JavaScript code.

    let message ="Hello World!";
console.log("Character at index 1 is => "+ message[1]);
console.log("Character at index 6 is => "+ message[6]);

    The output of the above example code is as follows −

    Character at index 1 is => e
Character at index 6 is => W

    Example: String vs. string in TypeScript

    In TypeScript, type ‘String’ is a wrapper object and type ‘string’ is a primitive type. These both types cant be assigned to each other.

    In the example below, we tried to assign a string object to a variable of type string primitive.

    let str:string;
str =newString('shahid');

    The above example code will show the following error −

    Type 'String' is not assignable to type 'string'.
  'string' is a primitive, but 'String' is a wrapper object. Prefer using 'string' when possible.

  • Numbers

    TypeScript like JavaScript supports numeric values as Number objects. A number object converts numeric literal to an instance of the number class. The Number class acts as a wrapper and enables manipulation of numeric literals as they were objects.

    TypeScript number type represents the numeric values. All the numbers are represented as the floating point values. TypeScript also supports the binary, octal and hexadecimal numbers introduced in ECMAScript 2015.

    In TypeScript, we can create a number primitive as well as Number object.

    Syntax

    We can declare a variable of number type using colon (:) after the variable name followed by number −

    let varName:number= value;

    In the above syntax, we declared a variable named varName of number type. Here value is the any numeric value such as decimal, binary, octal or hexadecimal numbers.

    We can create the Number object. To create a Number object we can use the Number() constructor as follows −

    var var_name =newNumber(value)

    In case a non-numeric argument is passed as an argument to the Numbers constructor, it returns NaN (NotaNumber)

    The type ‘Number’ is a wrapper object but type ‘number’ is a primitive. Prefer using ‘number’ when possible. Type ‘Number’ is not assignable to type ‘number’.

    Creating Number Types

    In the below example, we created a variable count of number type. We assigned 10 to the count.

    Open Compiler

    let count:number=10;console.log(count);

    On compiling, it will generate the following JavaScript code.

    let count =10;
console.log(count);

    The output is as follows −

    10

    We can also assign float, binary, octal and hexadecimal values to a variable of number type. Look at the below TypeScript code snippet

    let decNum:number=10.6;// floating point numberlet binNum:number=0b101001;// binary numberlet octNum:number=0o45;// octal numberlet hexNum:number=0x80fd;// hexadecimal number

    Creating Number Object

    Open Compiler

    const count =newNumber(10);
console.log(count);
console.log(typeof count);

    On compiling, it will generate the same JavaScript code.

    The output of the above example code is as follows

    [Number: 10]
Object

    Number Properties

    The following table lists a set of properties of the Number object −

    S.No.Property & Description
    1.MAX_VALUEThe largest possible value a number in JavaScript can have 1.7976931348623157E+308.
    2.MIN_VALUEThe smallest possible value a number in JavaScript can have 5E-324.
    3.NaNEqual to a value that is not a number.
    4.NEGATIVE_INFINITYA value that is less than MIN_VALUE.
    5.POSITIVE_INFINITYA value that is greater than MAX_VALUE.
    6.prototypeA static property of the Number object. Use the prototype property to assign new properties and methods to the Number object in the current document.
    7.constructorReturns the function that created this object’s instance. By default, this is the Number object.

    Example

    Open Compiler

    console.log("TypeScript Number Properties: ");console.log("Maximum value that a number variable can hold: "+ Number.MAX_VALUE);console.log("The least value that a number variable can hold: "+ Number.MIN_VALUE);console.log("Value of Negative Infinity: "+ Number.NEGATIVE_INFINITY);console.log("Value of Negative Infinity:"+ Number.POSITIVE_INFINITY);

    On compiling, it will generate the same code in JavaScript.

    Its output is as follows −

    TypeScript Number Properties:  
Maximum value that a number variable can hold: 1.7976931348623157e+308 
The least value that a number variable can hold: 5e-324 
Value of Negative Infinity: -Infinity 
Value of Negative Infinity:Infinity

    Example: NaN

    Open Compiler

    var month =0if( month<=0|| month >12){ 
   month = Number.NaNconsole.log("Month is "+ month)}else{console.log("Value Accepted..")}

    On compiling, it will generate the same code in JavaScript.

    Its output is as follows −

    Month is NaN

    Example: prototype

    Open Compiler

    functionemployee(id:number,name:string){this.id = id 
   this.name = name 
}var emp =newemployee(123,"Smith") 
employee.prototype.email ="[email protected]"console.log("Employee's Id: "+emp.id)console.log("Employee's name: "+emp.name)console.log("Employee's Email ID: "+emp.email)

    On compiling, it will generate the following JavaScript code −

    //Generated by typescript 1.8.10functionemployee(id, name){this.id = id;this.name = name;}var emp =newemployee(123,"Smith");
employee.prototype.email ="[email protected]";

console.log("Employee 's Id: "+ emp.id);
console.log("Employee's name: "+ emp.name);
console.log("Employee's Email ID: "+ emp.email);

    Its output is as follows −

    Employee's Id: 123 
Emaployee's name: Smith 
Employee's Email ID: [email protected]

    Number Methods

    The Number object contains only the default methods that are a part of every object’s definition. Some of the commonly used methods are listed below −

    S.No.Methods & Description
    1.toExponential()Forces a number to display in exponential notation, even if the number is in the range in which JavaScript normally uses standard notation.
    2.toFixed()Formats a number with a specific number of digits to the right of the decimal.
    3.toLocaleString()Returns a string value version of the current number in a format that may vary according to a browser’s local settings.
    4.toPrecision()Defines how many total digits (including digits to the left and right of the decimal) to display of a number. A negative precision will throw an error.
    5.toString()Returns the string representation of the number’s value. The function is passed the radix, an integer between 2 and 36 specifying the base to use for representing numeric values.
    6.valueOf()Returns the number’s primitive value.

  • Type Inference

    Type inference is a feature in TypeScript that allows the compiler to automatically determine (infer) the type of a variable, function or expression. TypeScript is an optionally static type programming language. You can declare variables, expressions, or functions without explicitly annotating their types. The compiler will automatically determine the types at the compile time.

    The type inference can be done on the basis of a number of factors, including

    • The type of values assigned to the variables.
    • The type of function parameters or arguments passed to the function.
    • The type of return value of the function.
    • The types of the object and properties.

    Let’s take a simple example as follows

    let x =5;let y ="Hello World!";

    In the above code, the TypeScript compiler can infer that the type of variable x is number. This is because the variable x is being assigned a number. The compiler can also infer the type of y is string because the y is being assigned a string.

    In the above example, TypeScript automatically infers the types of variables based on the values assigned to them.

    Variable or Member Initialization

    The type inference can be inferred using the variable and member initialization. The TypeScript compiler infers the type of the variable from the initialized value.

    Example

    Let’s take an example of variable initialization as follows

    Open Compiler

    let x =20;let y ="Hello World!";let z =true;console.log("type of x: ",typeof x);console.log("type of y: ",typeof y);console.log("type of z: ",typeof z);

    On compilation, it will generate the same JavaScript code.

    The output of the above example code is as follows

    type of x:  number
type of y:  string
type of z:  boolean

    Lets have an example of object member initialization

    Open Compiler

    classPerson{
  name ="Shahid";
  age =35;}const p =newPerson();// Prints name and ageconsole.log(${p.name}, ${p.age});

    On compilation, it will generate following JavaScript code.

    classPerson{constructor(){this.name ="Shahid";this.age =35;}}const p =newPerson();// Prints name and ageconsole.log(${p.name}, ${p.age});

    The output of the above code is as follows

    Shahid, 35

    Function Default Parameter

    The typescript compiler can also infer the type of the function parameters when the parameters are initialized with default values.

    In the below example, the parameters x and y are initialized with default values. The compiler infers the type of x and y as number. This is because the initialized values are numbers.

    Open Compiler

    functionadd(x =10, y =30){return x + y;}let res =add(2,3);console.log(res);

    On compilation, it will generate the same code in JavaScript.

    The output of the above example code is as follows

    5

    Now let’s try to pass arguments as string values.

    let res2 =add('2','3');

    The type of the parameters of the function add are inferred as number so when we pass arguments of type string to the function, it shows the following error

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

    Function Return Type

    The TypeScript compiler infers the type of the return type of the function based on the type of the return value.

    If the function doesn’t return any value, then the return type is void.

    In the example below, the function add accepts the two numbers and return their sum. As the sum of two numbers are number, so the type of return value is number. Hence the compiler infers the return type of the function add as number.

    Open Compiler

    functionadd(x:number, y:number){return x + y;}let res1:number=add(2,3);console.log(res1);

    When we assign the return value of the function add to variable (res2) of type string, it will show an error.

    let res2:string=add(2,3);

    The error is as follows

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

    This is because the return type of the function add is number and we are assigning it to variable of string type.

    Best Common Type: The Union Type

    Type inference with variable initialization, function default parameters and return type is straightforward.

    When TypeScript infers a type from multiple expressions, the type of the expressions is determined as the “best common type”.

    Let’s understand this with the help of an example

    const a =[5,10,"TypeScript"];

    In the above example, the array contains values 5, 10, and “TypeScript”. To infer the type of the array, we must consider the type of each element. Here, we have choices for the type of the array as number, and string. The inferred type of the array should be the best common type for each value in the array.

    The best common type has to be chosen from the provided candidate type. If there is no super type of all candidate types, the union type is used. Hence the inferred type of the above array is

    (number | string)[]

    The above array can contain values of types number, and string only. If you try to add a value of type different from number and string, it will show an error.

    Let’s try to add a boolean value to the array.

    const a =[5,10,"TypeScript"];
a.push(true);

    The above code will show the following compilation error

    Argument of type ‘boolean’ is not assignable to parameter of type ‘string | number’.

    Contextual Typing

    Contextual typing is a feature in TypeScript that allows the compiler to infer the type of variable, parameter or expression based on the context where they are used. For example,

    Open Compiler

    window.onmousedown=function(mouseEvent){console.log(mouseEvent.button);}

    In the above example, the TypeScript infers the type the function expression on right hand side of the assignment using the type of the Window.onmousedown function. So it is able to infer the type of mouseEvent parameter as MouseEvent. This way TypeScript infers that mouseEvent has a button property and doesn’t show a compilation error.

    Contextual typing is very helpful in writing concise code without losing type safety.

  •  Type Annotations

    Type Annotations

    In TypeScript,type annotations offer a way to define (or annotate) the data types of variables, class members, function parameters and return values.

    TypeScript is a statically typed programming language that optionally supports the dynamic typing. Because of this support any JavaScript file (.js) can be directly renamed as a TypeScript file (.ts). As we know JavaScript is a dynamically typed programming language and TypeScript is the superset of the JavaScript. TypeScript supports all the functionalities of JavaScript plus some additional features.

    TypeScript provides the way how to annotate the datatype. By the term “type annotations” means assigning the datatypes.

    Variable Type Annotations

    TypeScript supports static typing of variables. We can annotate the types of variables while declaring them. Also TypeScript optionally support the dynamic typing as JavaScript.

    For example, when we define a variable that holds a number, we can define it as follows –

    var x =10;

    The above declaration is absolutely permissible in TypeScript as it supports the dynamic typing.

    We can annotate the datatype of the variable x as follows

    var x:number=10;

    To do a type annotation, you can use colon (:) sign after the variable name followed by datatype of the variable.

    var varName: datatype

    Followings are the different examples to annotate a variable with different datatypes.

    let name:string;let age:number;let isEnrolled:boolean;

    In the example above, we added string as type of variable name. Similarly, age and isEnrolled are annotated with number and boolean type.

    Example

    Let’s try the following example. In this example, we have declared two variables, pName, and pAge. We have annotated pName as string and pAge as number.

    Open Compiler

    let pName:string;let pAge:number;
pName ="John Doe";
pAge =35;console.log(Name of the person is ${pName} and his age is ${pAge});

    On compiling, TypeScript compiler will produce the following JavaScript code

    let pName;let pAge;
pName ="John Doe";
pAge =35;
console.log(Name of the person is ${pName} and his age is ${pAge});

    The output of the above JavaScript code is as follows

    Name of the person is John Doe and his age is 35

    Function Type Annotations

    You can add the type to a function in TypeScript. A function’s type has two parts the function parameters and the return type of the function.

    Function Parameter Type Annotation

    We can annotate the datatypes of the parameters in the function definition.

    Open Compiler

    functiondisplayDetails(id:number, name:string){console.log("ID:", id);console.log("Name", name);}displayDetails(123,"John");

    On compiling, it will produce the following JavaScript code

    functiondisplayDetails(id, name){

    console.log("ID:", id);
console.log("Name:", name);}displayDetails(123,"John");</code></pre>
    



    The result of the above example code is as follows
    




    ID: 123
Name: John

    




    Function Return Type Annotation
    




    You can add the datatype of the function return. It will be the datatype of the value returned by the function.
    




    functionadd(x:number, y:number):number{return x + y;}
    




    If you are not writing a return type then, the default return type of any function will be undefined.
    




    If a function is not returning any value then, you should use void as function return type instead of leaving it off.
    




    For example, instead of writing the following
    




    functiongreet(name:string){console.log(Hello Mr. ${name}. Welcome to Tutorials Point.);}
    




    Write the function using void as return type as follows
    




    functiongreet(name:string):void{console.log(Hello Mr. ${name}. Welcome to Tutorials Point.);}
    




    Example
    




    In the example below, we annotate the function parameters and its return type. The function add take two parameters - x and, y of number type and also a value of number type. The returned value is the sum of the passed arguments to the function.
    




    Open Compiler
    




    functionadd(x:number, y:number):number{return x + y;}console.log(add(2,3))
    




    On compiling, it will produce the following JavaScript code
    




    functionadd(x, y){return x + y;}
console.log(add(2,3));
    




    The output of the above code is as follows −
    




    5

    




    Object Properties Type Annotations
    




    You can use the type annotation to add the types to the properties of an object.
    




    Let's define an object using interface as follows −
    




    interfacePerson{
   name:string;
   age:number;}const person: Person ={
   name:"John Doe",
   age:35,}
    




    In the above example, we added types string and number to the properties name and age respectively.
    




    You can assign only string value to the name property and similarly only number value to the age property. Suppose if you try to add a string to age, it will throw an error.
    




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




    Example
    




    Let's take a complete example. In this example, we define an interface named Person with two properties name and age. The name property is annotated as string and age is as number. We create an object named person using the interface Person. Then finally, we display the object properties in the console.
    




    Open Compiler
    




    interfacePerson{
   name:string;
   age:number;}const person: Person ={
   name:"John Doe",
   age:35,}console.log(The person's name is ${person.name} and person's age is ${person.age});
    




    On compiling, it will produce the following JavaScript code −
    




    const person ={

    name:"John Doe",
age:35,};
    console.log(The person's name is ${person.name} and person's age is ${person.age});
    




    The output of the above example code if as follows −
    




    The person's name is John Doe and person's age is 35

    




    The type annotations of variables, function parameters and return types, etc. are recommended in TypeScript. But also TypeScript supports dynamic typing as in JavaScript. As you already know that TypeScript supports all ECMAScript features.

  • Types

    The Type System represents the different types of values supported by the language. The Type System checks the validity of the supplied values, before they are stored or manipulated by the program. This ensures that the code behaves as expected. The Type System further allows for richer code hinting and automated documentation too.

    TypeScript provides data types as a part of its optional Type System. The data type classification is as given below −

    Data Types

    The Any type

    The any data type is the super type of all types in TypeScript. It denotes a dynamic type. Using the any type is equivalent to opting out of type checking for a variable.

    Built-in types

    The following table illustrates all the built-in types in TypeScript −

    Data typeKeywordDescription
    NumbernumberDouble precision 64-bit floating point values. It can be used to represent both, integers and fractions.
    StringstringRepresents a sequence of Unicode characters
    BooleanbooleanRepresents logical values, true and false
    VoidvoidUsed on function return types to represent non-returning functions
    NullnullRepresents an intentional absence of an object value.
    UndefinedundefinedDenotes value given to all uninitialized variables
    SymbolsymbolA unique and immutable primitive introduced in ES2015.
    ObjectobjectRepresents instances of user-defined classes, arrays, functions, etc.
    NeverneverRepresents values that never occur.

    There is no integer type in TypeScript and JavaScript.

    Now, lets understand each built-in data type in detail.

    Number

    In TypeScript, the number data type can store the integer, floating point, binary, decimal, hexadecimal, etc. numbers. However, all integers are represented as floating points in TypeScript.

    Example

    In the code below, the age and marks both variables are of number type. The age variable contains the integer value and the marks variable contains the floating point value.

    // Integer numberlet age:number=30;// Float numberlet marks:number=30.5;

    String

    The string data type is used to store the text value.

    You can define a string using three ways:

    • Using the single quote
    • Using the double quotes
    • Using the backticks

    The backticks are used to create multiline or template strings.

    Example

    In the code below, the first_name string is created using the single quote, and the last_name string is created using the double quotes. The full_name string is created using the backticks, which uses the template literals to create a string.

    let first_name:string='John';let last_name:string="Doe";let full_name:string=${first_name} ${last_name};

    Boolean

    In TypeScript, Boolean data type allows you to represent logical entities. It stores the either true or false value. The boolean variables are mainly used with conditional statements like if-else or switch to execute a flow based on some logical value.

    Example

    In the code below, the isReady is a variable of boolean type, which contains the true value.

    let isReady:boolean=true;

    Symbol

    The symbol is a primitive data type, which is mostly used to create unique values. It allows developers to create unique object keys that wont collide with any other keys.

    Example

    Here, we have used the Symbol() constructor which returns the new unique key. We have used the UNIQUE_KEY as a key of the obj object.

    // Define a symbolconstUNIQUE_KEY=Symbol();// Use the symbol as a property key in an objectlet obj ={[UNIQUE_KEY]:"SecretValue"};

    Null

    The null type in TypeScript represents the intentional absence of any object value. It is one of the primitive types and is typically used to indicate that a variable intentionally points to no object.

    Example

    In the code below, the empty variable contains the null value.

    let empty:null=null;

    Undefined

    The undefined data type represents the absence of value. When a variable is declared but is not initialized, it contains the undefined value.

    Example

    In the code below, the undef variable contains the undefined value.

    let undef:undefined;

    Null and undefined Are they the same?

    The null and the undefined datatypes are often a source of confusion. The null and undefined cannot be used to reference the data type of a variable. They can only be assigned as values to a variable.

    However, null and undefined are not the same. A variable initialized with undefined means that the variable has no value or object assigned to it while null means that the variable has been set to an object whose value is undefined.

    Object

    The object is a non-primitive data type, which can contain any value that is not a number, string, boolean, symbol, null, or undefined. You can create an object using either object literal or Object() constructor.

    Example

    In the code below, we have created the object using the object literal. The type of the person variable is an object. We have added the key-value pair between the curly braces (object literal).

    let person: object ={name:"Bob"};

    Void

    The void type is used in the return type of functions that do not return a value. It signifies that there is no type at all.

    Example

    Here, we have used the void data type with function to not return any value from the function.

    functionlog():void{console.log("log");}

    User-defined Types

    User-defined types include Enumerations (enums), classes, interfaces, arrays, and tuple. These are discussed in detail in the later chapters.

    Array

    The array data type is a collection of the same elements. It stores the elements, which you can access or update using the array index that starts from 0.

    The array of any data type can be defined as data_type[] or Array<data_type>, where <data_type> can be any primitive or non-primitive data type.

    Example

    In the code below, we have defined the array of numbers which contains only 3 elements. The index of 1 is 0, the index of 2 is 1, and the index of 3 is 2.

    let numbers:number[]=[1,2,3];

    Tuple

    Tuple types allow you to express an array with a fixed number of elements whose types are known, but need not be the same. This adds a level of safety when dealing with arrays that need to have a specific structure.

    Example

    In the code below, the tuple variable can have an array of length 2 as a value. The first element of the tuple is of string type, and the second element of the tuple is of number type.

    let tuple:[string,number]=["hello",10];console.log(tuple);// Output: ["hello", 10]

    Enum

    An enumeration is a collection of related values that can be numeric or string values. enum makes it easy to handle sets of related constants in a more readable way.

    Example

    In the code below, the Color enum contains the different colors. We can access the color using the enum name which is Color followed by a dot and color name value.

    enum Color {Red, Green, Blue}let c: Color = Color.Green;console.log(c);// Output: 1

    Print Page

  • let & const

    TypeScript has the same rules as JavaScript to declare variables. Initially, only the ‘var’ keyword was used to declare the variable, but in the ES6 version of JavaScript ‘let’ and ‘const’ keywords are introduced to declare a variable. So, you can also use them in TypeScript.

    In this lesson, you will learn to declare a variable using the ‘let’ and ‘const’ keywords and how those variables are different from the variables declared using the ‘var’ keyword.

    Declaring a variable using the let keyword

    When we declare the variable using the ‘let’ keyword in TypeScript, the scoping rule and hoisting rule remain the same as in JavaScript.

    Syntax

    The syntax to declare a variable using the ‘let’ keyword in TypeScript is as follows

    let var_name: var_type = value;
    • In the above syntax, ‘let’ is a keyword.
    • ‘var_name’ is a valid identifier for a variable name.
    • ‘var_type’ is a type of the variable.
    • ‘value’ is a value to store in the variable.

    Example

    In the code below, we have defined the ‘car_name’ variable of string type which contains the Brezza value. The ‘car_price’ variable contains the 1000000 number value.

    Open Compiler

    // Define a variable in TypeScriptlet car_name:string="Brezza";let car_price:number=1000000;console.log(car_name);console.log(car_price);

    On compiling, it will generate the following JavaScript code.

    // Define a variable in TypeScriptlet car_name ="Brezza";let car_price =1000000;
console.log(car_name);
console.log(car_price);

    Output

    The output of the above example code is as follows

    Brezza
1000000

    Variable Scope

    The variables declared using the ‘let’ keyword have the block scope. It means you can’t access the variable outside the block unlike the variable declared using the ‘var’ keyword.

    Let’s learn it via the example below.

    In the code below, the ‘bool’ variable contains a true value so the code of the ‘if’ statement will always execute. In the ‘if’ block, we have declared the ‘result’ variable which can be accessed inside the ‘if’ block only. If you try to access it outside the ‘if’ block, the TypeScript compiler will throw an error.

    Open Compiler

    let bool:boolean=true;if(bool){let result:number=10;console.log(result);// It can have accessed only in this block}// console.log(result); Can't access variable outside of the block.

    Let variables cannot be re-declared

    You can’t re-declare the variables that are declared using the ‘let’ keyword.

    Let’s look at the example below.

    In the code below, you can observe that if we try to re-declare the same variable, the TypeScript compiler throws an error.

    Open Compiler

    let animal:string="cat";// let animal: string = "dog"; // Error: Cannot redeclare block-scoped variable 'animal'console.log(animal);// Output: cat

    On compiling, it will generate the following JavaScript code.

    let animal ="cat";// let animal: string = "dog"; // Error: Cannot redeclare block-scoped variable 'animal'
console.log(animal);// Output: cat

    The output of the above example code is as follows

    cat

    Variables with the same name in different blocks

    The variables declared using the ‘let’ keyword have a block scope. So, variables with the same name but if they are in different blocks, are considered as different variables.

    Let’s look at the examples below.

    In the code below, we have declared the ‘num’ variable in ‘if’ and ‘else’ both blocks and initialized them with different values.

    Open Compiler

    let bool:boolean=false;// If the boolean is true, the variable num will be 1, otherwise it will be 2if(bool){let num:number=1;console.log(num);}else{let num:number=2;console.log(num);}

    On compiling, it will generrate the following JavaScript code.

    let bool =false;// If the boolean is true, the variable num will be 1, otherwise it will be 2if(bool){let num =1;

    console.log(num);}else{let num =2;
console.log(num);}</code></pre>
    



    The output of the above example code is as follows
    




    2

    




    Declaring a variable using a 'const' keyword
    




    The 'const' keyword has the same syntax as 'var' and 'let' to declare variables. It is used to declare the constant variables. Furthermore, you need to initialize the 'const' variables while defining them, and you can't change them later.
    




    Syntax
    




    The syntax to declare a variable using the 'const' keyword in TypeScript is as follows
    




    const var_name: var_type = value;
    




    In the above syntax, 'const' is a keyword.
    




    Example
    




    In the code below, we have defined the 'lang' and 'PI' variables using the 'const' keywords, which contain the 'TypeScript' and '3.14' values, respectively.
    




    Open Compiler
    




    // Define a constant variable in TypeScriptconst lang:string='TypeScript';constPI:number=3.14;console.log(Language: ${lang});console.log(Value of PI: ${PI});
    




    On compiling, it will generate the following JavaScript code.
    




    // Define a constant variable in TypeScriptconst lang ='TypeScript';constPI=3.14;
console.log(Language: ${lang});
console.log(Value of PI: ${PI});
    




    The output of the above example code is as follows
    




    Language: TypeScript
Value of PI: 3.14

    




    The variables are declared using the 'const' keyword has the same rule for scoping and re-declaration as the variable declared using the 'let' keyword.
    




    In the code below, you can observe that if you try to re-declare the 'const' variable in the same scope or try to change its value after declaring it, it throws an error.
    




    Open Compiler
    




    if(true){constPI:number=3.14;console.log(PI);// const PI: number = 3.14; Error: Cannot redeclare block-scoped variable 'PI'.// PI = 3.15; Error: Cannot assign to 'PI' because it is a constant.}
    




    On compiling, it will generate the following JavaScript code.
    




    if(true){constPI=3.14;

    console.log(PI);// const PI: number = 3.14; Error: Cannot redeclare block-scoped variable 'PI'.// PI = 3.15; Error: Cannot assign to 'PI' because it is a constant.}</code></pre>
    



    The output of the above example code is as follows
    




    3.14 

    




    You learned to use the 'let' and 'const' statements to declare variables. It is always a good idea to declare a variable using the 'let' keyword due to its block scoping features, which avoids the overriding of values of variables declared in the different scopes.

  • Variables

    A variable, by definition, is a named space in the memory that stores values. In other words, it acts as a container for values in a program. TypeScript variables must follow the JavaScript naming rules −

    • Variable names can contain alphabets and numeric digits.
    • They cannot contain spaces and special characters, except the underscore (_) and the dollar (&dollar;) sign.
    • Variable names cannot begin with a digit.

    A variable must be declared before it is used. Use the var keyword to declare variables.

    Variable Declaration in TypeScript

    The type syntax for declaring a variable in TypeScript is to include a colon (:) after the variable name, followed by its type. Just as in JavaScript, we use the var keyword to declare a variable.

    When you declare a variable, you have four options −

    • Declare its type and value in one statement.
    Declare Type
    • Declare its type but no value. In this case, the variable will be set to undefined.
    Undefined
    • Declare its value but no type. The variable type will be set to the data type of the assigned value.
    Any
    • Declare neither value not type. In this case, the data type of the variable will be any and will be initialized to undefined.
    Any and Undefined

    The following table illustrates the valid syntax for variable declaration as discussed above −

    S.No.Variable Declaration Syntax & Description
    1.var name:string = maryThe variable stores a value of type string
    2.var name:string;The variable is a string variable. The variables value is set to undefined by default
    3.var name = maryThe variables type is inferred from the data type of the value. Here, the variable is of the type string
    4.var name;The variables data type is any. Its value is set to undefined by default.

    Example: Variables in TypeScript

    Open Compiler

    var name:string="John";var score1:number=50;var score2:number=42.50var sum = score1 + score2 
console.log("name"+name)console.log("first score: "+score1)console.log("second score: "+score2)console.log("sum of the scores: "+sum)

    On compiling, it will generate following JavaScript code.

    //Generated by typescript 1.8.10var name ="John";var score1 =50;var score2 =42.50;var sum = score1 + score2;console.log("name"+ name);console.log("first score: "+ score1);console.log("second score : "+ score2);console.log("sum of the scores: "+ sum);

    The output of the above program is given below −

    name:John 
first score:50 
second score:42.50 
sum of the scores:92.50

    The TypeScript compiler will generate errors, if we attempt to assign a value to a variable that is not of the same type. Hence, TypeScript follows Strong Typing. The Strong typing syntax ensures that the types specified on either side of the assignment operator (=) are the same. This is why the following code will result in a compilation error −

    var num:number="hello"// will result in a compilation error

    Type Assertion in TypeScript

    TypeScript allows changing a variable from one type to another. TypeScript refers to this process as Type Assertion. The syntax is to put the target type between < > symbols and place it in front of the variable or expression. The following example explains this concept −

    Example

    Open Compiler

    var str ='1'var str2:number=<number><any> str   //str is now of type number console.log(typeof(str2))

    If you hover the mouse pointer over the type assertion statement in Visual Studio Code, it displays the change in the variables data type. Basically it allows the assertion from type S to T succeed if either S is a subtype of T or T is a subtype of S.

    The reason why it’s not called “type casting” is that casting generally implies some sort of runtime support while, type assertions are purely a compile time construct and a way for you to provide hints to the compiler on how you want your code to be analyzed.

    On compiling, it will generate following JavaScript code.

    "use strict";var str ='1';var str2 = str;//str is now of type number console.log(typeof(str2));

    It will produce the following output −

    string

    Inferred Typing in TypeScript

    Given the fact that, Typescript is strongly typed, this feature is optional. TypeScript also encourages dynamic typing of variables. This means that, TypeScript encourages declaring a variable without a type. In such cases, the compiler will determine the type of the variable on the basis of the value assigned to it. TypeScript will find the first usage of the variable within the code, determine the type to which it has been initially set and then assume the same type for this variable in the rest of your code block.

    The same is explained in the following code snippet −

    Example: Inferred Typing

    var num =2;// data type inferred as  number console.log("value of num "+num); 
num ="12";console.log(num);

    In the above code snippet −

    • The code declares a variable and sets its value to 2. Note that the variable declaration doesnt specify the data type. Hence, the program uses inferred typing to determine the data type of the variable, i.e., it assigns the type of the first value that the variable is set to. In this case, num is set to the type number.
    • When the code tries to set the variables value to string. The compiler throws an error as the variables type is already set to number.

    It will produce the following output −

    error TS2011: Cannot convert 'string' to 'number'.

    TypeScript Variable Scope

    The scope of a variable specifies where the variable is defined. The availability of a variable within a program is determined by its scope. TypeScript variables can be of the following scopes −

    • Global Scope − Global variables are declared outside the programming constructs. These variables can be accessed from anywhere within your code.
    • Class Scope − These variables are also called fields. Fields or class variables are declared within the class but outside the methods. These variables can be accessed using the object of the class. Fields can also be static. Static fields can be accessed using the class name.
    • Local Scope − Local variables, as the name suggests, are declared within the constructs like methods, loops etc. Local variables are accessible only within the construct where they are declared.

    The following example illustrates variable scopes in TypeScript.

    Example: Variable Scope

    Open Compiler

    var global_num =12//global variable classNumbers{ 
   num_val =13;//class variable static sval =10;//static field storeNum():void{var local_num =14;//local variable }}console.log("Global num: "+global_num)console.log(Numbers.sval)//static variable  var obj =newNumbers();console.log("Global num: "+obj.num_val)

    On transpiling, the following JavaScript code is generated −

    var global_num =12;//global variable var Numbers =(function(){functionNumbers(){this.num_val =13;//class variable }
   Numbers.prototype.storeNum=function(){var local_num =14;//local variable };
   Numbers.sval =10;//static field return Numbers;}());console.log("Global num: "+ global_num);console.log(Numbers.sval);//static variable  var obj =newNumbers();console.log("Global num: "+ obj.num_val);

    It will produce the following output −

    Global num: 12
10
Global num: 13

    If you try accessing the local variable outside the method, it results in a compilation error.

    error TS2095: Could not find symbol 'local_num'.

  • Features

    TypeScript is a superset of JavaScript. So, it contains all the features that JavaScript has. However, it also contains some advanced features that JavaScript doesn’t have like static typing, interface, etc.

    Let’s discuss some of the important features of TypeScript.

    Type Annotation

    In TypeScript, type annotation allows you to declare the type of variable, function parameters, and return value. The static typing feature of TypeScript allows you to catch type-related errors while writing the code instead of at the compile time. This way developers can write more reliable code.

    Example

    In the code below, we have defined the variable ‘a’ of the number data type. The printNumber() function takes the ‘num’ parameter of the ‘number’ type.

    The function prints the parameter value.

    Open Compiler

    // Type annotation in TypeScriptvar a:number=10;functionprintNumber(num:number){console.log(num);}printNumber(a);

    On compiling, it will generate the following JavaScript code.

    Open Compiler

    // Type annotation in TypeScriptvar a =10;functionprintNumber(num){

    console.log(num);}printNumber(a);</code></pre>
    



    Output
    




    The above example code will produce the following output
    




    10

    




    Interfaces
    




    Interfaces are similar to the abstract classes in other programming languages like Java. It allows developers to define the structure of the object but doesn't provide the implementation. This way developers can adhere to the same structure of the object for similar kinds of objects.
    




    Example
    




    In the example below, we have defined the 'Iperson' interface that contains the 'firstName', and 'lastName' properties and getFullName() method. The interface declares the properties and methods only, defining the structure of the object.
    




    For the 'obj' object, we have used the 'IPerson' interface as a type. After that, we initialized the properties of an object and implemented the getFullName() method which returns the string value.
    




    Open Compiler
    




    // Interfaces in TypeScriptinterfaceIPerson{
  firstName:string;
  lastName:string;getFullName():string;}// Define an object that implements the interfacelet obj: IPerson ={
  firstName:"John",
  lastName:"Doe",getFullName():string{returnthis.firstName +" "+this.lastName;}};console.log(obj.getFullName());
    




    On compiling, it will generate the following JavaScript code.
    




    Open Compiler
    




    // Define an object that implements the interfacelet obj ={
   firstName:"John",
   lastName:"Doe",getFullName(){returnthis.firstName +" "+this.lastName;}};
console.log(obj.getFullName());
    




    Output
    




    The output of the above example code is as follows
    




    John Doe

    




    Classes
    




    Classes are a blueprint of the objects. Classes can contain properties, and methods which can be accessed using an instance of classes. You can use class constructor() to initialize the properties of the class while creating the instance of the class. Furthermore, you can also have static members inside the classes which can be accessed through the class name and without using an instance of the class.
    




    Example
    




    In the code below, we have created the Greeter class, which contains the 'greeting' property. The constructor() method takes the 'message' parameter and initializes the 'greeting' property values with it.
    




    The greet() method returns the string value, representing the greeting message. After that, we have created the instance of the Greeter class and called the greet() method using it.
    




    Open Compiler
    




    // Basic example of classclassGreeter{
  greeting:string;// Constructor methodconstructor(message:string){this.greeting = message;}// Class Methodgreet(){return"Hello, "+this.greeting;}}// Create an instance of the classlet greeter =newGreeter("world");console.log(greeter.greet());// Hello, world
    




    On compiling, it will generate the following JavaScript code.
    




    Open Compiler
    




    // Basic example of classclassGreeter{// Constructor methodconstructor(message){this.greeting = message;}// Class Methodgreet(){return"Hello, "+this.greeting;}}// Create an instance of the classlet greeter =newGreeter("world");
console.log(greeter.greet());// Hello, world
    




    Output
    




    The output of the above example code is as follows
    




    Hello, world

    




    Inheritance
    




    TypeScript supports all features of the object-oriented programming language like polymorphism, abstraction, encapsulation, inheritance etc. However, we have covered inheritance only in this lesson.
    




    Inheritance allows you to reuse the properties and methods of other classes.
    




    Example
    




    In the code below, the 'Person' class is a base class. It contains the 'name' property, which we initialize in the constructor() method. The display() method prints the name in the console.
    




    The Employee class inherits the properties of the Parent class using the 'extends' keyword. It contains the 'empCode' property and show() method. It also contains all properties and methods of the Person class.
    




    Next, we created the instance of the Employee class and accessed the method of the Person class using it.
    




    Open Compiler
    




    // Base classclassPerson{
  name:string;constructor(name:string){this.name = name;}display():void{console.log(this.name);}}// Derived classclass Employee extendsPerson{
  empCode:number;constructor(name:string, code:number){super(name);this.empCode = code;}show():void{console.log(this.empCode);}}let emp: Employee =newEmployee("John",123);
emp.display();// John
emp.show();// 123
    




    On compiling, it will produce the following JavaScript code.
    




    Open Compiler
    




    // Base classclassPerson{constructor(name){this.name = name;}display(){

        console.log(this.name);}}// Derived classclassEmployeeextendsPerson{constructor(name, code){super(name);this.empCode = code;}show(){
    console.log(this.empCode);}}let emp =newEmployee("John",123);
    emp.display();// John
emp.show();// 123
    




    Output
    




    The output of the above example code is as follows
    




    John
123

    




    Enums
    




    Enums are used to define the named constants in TypeScript. It allows you to give names to the constant values, which makes code more reliable and readable.
    




    Example
    




    In the code below, we have used the 'enum' keyword to define the enum. In our case, the integer value represents the directions, but we have given names to the directions for better readability.
    




    After that, you can use the constant name to access the value of the Directions.
    




    Open Compiler
    




    // Enums in TypeScriptenum Direction {
  Up =1,
  Down,
  Left,
  Right
}console.log(Direction.Up);// 1console.log(Direction.Down);// 2console.log(Direction.Left);// 3console.log(Direction.Right);// 4
    




    On compiling, it will produce the following JavaScript code-
    




    Open Compiler
    




    var Direction;(function(Direction){

    Direction&#91;Direction&#91;"Up"]=1]="Up";
Direction&#91;Direction&#91;"Down"]=2]="Down";
Direction&#91;Direction&#91;"Left"]=3]="Left";
Direction&#91;Direction&#91;"Right"]=4]="Right";})(Direction ||(Direction ={}));
    console.log(Direction.Up);// 1
console.log(Direction.Down);// 2
console.log(Direction.Left);// 3
console.log(Direction.Right);// 4
    




    Output
    




    The output of the above example code is as follows
    




    1
2
3
4

    




    Generics
    




    Generic types allow you to create reusable components, function codes, or classes that can work with different types, rather than working with the specific types. This way developers can use the same function or classes with multiple types.
    




    Example
    




    In the code below, printArray() is a generic function that has a type parameter . It takes the array of Type 'T' as a parameter. The function uses the for loop to print array elements.
    




    Next, we have called the function by passing the number and string array. You can observe that the function takes an array of any type as a parameter. This way, developers can use the same code with different types.
    




    Open Compiler
    




    // Generics in TypeScriptfunctionprintArray(arr:T[]):void{for(let i =0;i([1,2,3]);// Array of numbersprintArray(["a","b","c"]);// Array of strings
    




    On compiling, it will produce the following JavaScript code.
    




    Open Compiler
    




    // Generics in TypeScriptfunctionprintArray(arr){for(let i =0; i 
Output
The output of the above example code is as follows 
123
a
b
c

Union Types
The union types allow you to declare the multiple types for variables. Sometimes, developers are required to define a single variable that supports number, string,null, etc. types. In thiscase, they can use union types.
Example
In the code below, the 'unionType' has string and number type. It can store both types of values but if you try to store the value of any other type like Boolean, the TypeScript compiler will throw an error.// Union types in TypeScriptvar unionType: string | number;
unionType ="Hello World";// Assigning a string value
console.log("String value: "+ unionType);

unionType =500;// Assigning a number value
console.log("Number value: "+ unionType);// unionType = true; // Error: Type 'boolean' is not assignable to type 'string | number'

On compiling, it will generate the following JavaScript code.// Union types in TypeScriptvar unionType;
unionType ="Hello World";// Assigning a string value
console.log("String value: "+ unionType);
unionType =500;// Assigning a number value
console.log("Number value: "+ unionType);// unionType = true; // Error: Type 'boolean' is not assignable to type 'string | number'

Output
The output of the above exmaple code is as follows 
String value: Hello World
Number value:500

Type Guards
Type guards allow you to get the type of variables. After that, you can perform multiple operations based on the type of the particular variables. This also ensures the type-safety.
Example
In the code below, we have defined the variable 'a'of type number and string.
After that, we used the 'typeof' operator with the if-else statement to get the type of the variable 'a'. Based on the type of the 'a', we print the string value in the console.let a: number | string =10;// Type Guardif(typeof a ==='number'){
  console.log('a is a number');}else{
  console.log('a is a string');}

On compiling, it will generate the following JavaScript code.let a =10;// Type Guardif(typeof a ==='number'){

    console.log('a is a number');}else{
console.log('a is a string');}
    
Output
The output of the above example code is as follows −
a is a number

We have covered the most important features of TypeScript inthis lesson. TypeScript also contains features like optional chaining, decorators, modules, type interfaces, etc. which we will explore through this TypeScript course.
    




    Print Page

  • TypeScript vs. JavaScript

    TypeScript and JavaScript are the most popular programming languages widely used in web development. If you are a web developer, you must have heard about them.

    Do you know the difference between JavaScript and TypeScript, or have you ever been confused about choosing between them? If yes, we have covered the difference between them, which one you should choose between them, and how to migrate from JavaScript to TypeScript.

    JavaScript

    Initially, in 1994, JavaScript was developed for the Netscape browser to add interactivity to web pages. After that, in 1997, the first standardized version of JavaScript was launched.

    In the starting phase, JavaScript was used to add interactivity to the web pages. For example, to add a click event, form submission event, etc. So, it was used with HTML and CSS and became a fundamental scripting language for them.

    Nowadays, JavaScript is also used for backend development. For example, NodeJS is used to create the backend of the web applications.

    In simple terms, JavaScript is a cross-platform programming language, which can be used to develop the frontend and backend of the application.

    Features of JavaScript

    Here are some basic features of JavaScript.

    • Dynamic Typing − JavaScript variables dont have fixed types. So, it provides the flexibility in assigning the values to the variables.
    • First-Class Functions − In JavaScript, functions can be expressions. So, it can be assigned to a variable, passed as arguments, and returned from other functions.
    • Prototypal Inheritance − JavaScript supports prototype-based inheritance, which can be achieved by modifying the object prototypes. However, it also supports class-based inheritance.
    • Asynchronous Programming − JavaScript supports asynchronous programming with callbacks, promises, and async/await.
    • Cross-platform support − JavaScript is supported by all modern web browsers and other platforms. It is also used to develop the front end and backend of web applications. So, it is a platform-independent programming language.

    Example

    In the code below, the add() function takes two numbers as an argument. In the function body, we sum the values of the parameters a and b and use the return keyword to return the summation of both parameters.

    Open Compiler

    // JavaScript example: Adding two numbersfunctionadd(a, b){return a + b;}console.log(add(5,10));// Output: 15

    The output of the above example code is as follows –

    15

    TypeScript

    TypeScript is very similar to JavaScript, and it has almost the same syntax as JavaScript. In 2012, Microsoft created TypeScript as an open-source project to solve the issues faced by developers while using JavaScript. So, TypeScript contains all the features that JavaScript has and contains some extra features to solve additional issues of typing.

    TypeScript has static typing which is more useful in large projects in which multiple developers are working together. Whenever you compile the TypeScript code, it compiles the code in JavaScript, and then you can use NodeJS to run the compiled TypeScript code.

    Features of TypeScript

    Here are some features of TypeScript, which are not available in JavaScript.

    • Static Typing − TypeScript allows you to specify types for each variable, function parameter, and return value. This feature helps in catching errors at compile time.
    • Interfaces − TypeScript is an object-oriented programming language, and it contains the interfaces to define the structure of objects that help in improving code readability and maintainability.
    • Classes and Inheritance − TypeScript supports classes and classical inheritance, making it easier to create complex structures.
    • Compatibility − TypeScript is compatible with all versions of JavaScript.
    • JavaScript Features − TypeScript is a superset of JavaScript. So, you can use all JavaScript features, methods, libraries, etc. in TypeScript.

    Example

    In the code below, we have defined the number type for the function parameters, which was not there in the JavaScript code. However, both code produces the same output.

    Open Compiler

    // TypeScript example: Adding two numbersfunctionadd(a:number, b:number):number{return a + b;}console.log(add(5,10));// Output: 15

    On compiling, it will generate the following JavaScript code.

    // TypeScript example: Adding two numbersfunctionadd(a, b){return a + b;}
console.log(add(5,10));// Output: 15

    The output of the above example code is as follows –

    15

    Key Differences Between JavaScript and TypeScript

    The main difference between TypeScript and JavaScript is typing, as JavaScript has dynamic typing and TypeScript has static typing. However, we have covered some more differences between them in the table below.

    FeatureJavaScriptTypeScript
    TypingDynamic typingStatic typing
    CompilationInterpreted by browsers/Node.jsCompiled into JavaScript
    Error DetectionRuntime errorsCompile-time errors
    Tooling SupportBasicAdvanced (autocompletion, refactoring, etc.)
    Prototypal InheritanceUses prototypesSupports classes and classical inheritance
    Use CasesSmall to medium projects, quick prototypingLarge projects, complex applications
    Code MaintainabilityCan be harder in large codebasesEasier due to static typing and interfaces
    InterfacesNot natively supportedSupported, and improved code structure
    Type InferenceNot availableAvailable, reduces the need for explicit types
    Access ModifiersNot supportedSupports private, public, and protected modifiers
    Asynchronous ProgrammingCallbacks, Promises, async/awaitSame as JavaScript, with type safety

    When to Use JavaScript?

    JavaScript can be used in various situations, and here are some of them.

    • Smaller Projects − If you want to create smaller projects like static company or personal portfolio, you may use JavaScript.
    • Quick Prototyping − If you want to create a quick prototype of the application, you can use JavaScript instead of TypeScript. However, you can migrate JavaScript to TypeScript later.
    • Learning Curve − JavaScript is easier for beginners to pick up due to its simpler syntax and lack of strict typing requirements.

    When to Use TypeScript?

    TypeScript is well-suited for various situations:

    • Large Projects − When you are creating large or real-time projects, you should use TypeScript. In large projects, multiple developers work together. So, TypeScript makes it easier for them to know variable type, return type of function values, etc.
    • Code Maintainability − Makes maintaining and refactoring code easier with static typing and interfaces.
    • Error Detection − Allows for catching errors at compile-time rather than runtime, leading to more reliable code.
    • Compatibility − If you are already working with JavaScript libraries, TypeScript can be gradually introduced, providing a smooth transition.

    Both JavaScript and TypeScript are the most popular programming languages but can be used in various situations. JavaScript is beginner-friendly and can be used for prototyping applications. While TypeScript can be used for large real-time projects.

  • Basic Syntax

    Syntax defines a set of rules for writing programs. Every language specification defines its own syntax. A TypeScript program is composed of −

    • Modules
    • Functions
    • Variables
    • Statements and Expressions
    • Comments

    Your First TypeScript Code

    Let us start with the traditional Hello World example −

    Open Compiler

    var message:string="Hello World"console.log(message)

    On compiling, it will generate following JavaScript code.

    var message ="Hello World";console.log(message);
    • Line 1 declares a variable by the name message. Variables are a mechanism to store values in a program.
    • Line 2 prints the variables value to the prompt. Here, console refers to the terminal window. The function log () is used to display text on the screen.

    Compile and Execute a TypeScript Program

    Let us see how to compile and execute a TypeScript program using Visual Studio Code. Follow the steps given below −

    Step 1 − Save the file with .ts extension. We shall save the file as Test.ts. The code editor marks errors in the code, if any, while you save it.

    Step 2 − Right-click the TypeScript file under the Working Files option in VS Codes Explore Pane. Select Open in Command Prompt option.

    Compile and Execute

    Step 3 − To compile the file use the following command on the terminal window.

    tsc Test.ts

    Step 4 − The file is compiled to Test.js. To run the program written, type the following in the terminal.

    node Test.js

    Compiler Flags

    Compiler flags enable you to change the behavior of the compiler during compilation. Each compiler flag exposes a setting that allows you to change how the compiler behaves.

    The following table lists some common flags associated with the TSC compiler. A typical command-line usage uses some or all switches.

    S.No.Compiler flag & Description
    1.–helpDisplays the help manual
    2.–moduleLoad external modules
    3.–targetSet the target ECMA version
    4.–declarationGenerates an additional .d.ts file
    5.–removeCommentsRemoves all comments from the output file
    6.–outCompile multiple files into a single output file
    7.–sourcemapGenerate a sourcemap (.map) files
    8.–module noImplicitAnyDisallows the compiler from inferring the any type
    9.–watchWatch for file changes and recompile them on the fly

    Note − Multiple files can be compiled at once.

    tsc file1.ts, file2.ts, file3.ts

    Identifiers in TypeScript

    Identifiers are names given to elements in a program like variables, functions etc. The rules for identifiers are −

    • Identifiers can include both, characters and digits. However, the identifier cannot begin with a digit.
    • Identifiers cannot include special symbols except for underscore (_) or a dollar sign (&dollar;).
    • Identifiers cannot be keywords.
    • They must be unique.
    • Identifiers are case-sensitive.
    • Identifiers cannot contain spaces.

    The following tables lists a few examples of valid and invalid identifiers −

    Valid identifiersInvalid identifiers
    firstNameVar
    first_namefirst name
    num1first-name
    &dollar;result1number

    TypeScript Keywords

    Keywords have a special meaning in the context of a language. The following table lists some keywords in TypeScript.

    breakasanyswitch
    caseifthrowelse
    varnumberstringget
    moduletypeinstanceoftypeof
    publicprivateenumexport
    finallyforwhilevoid
    nullsuperthisnew
    inreturntruefalse
    anyextendsstaticlet
    packageimplementsinterfacefunction
    newtryyieldconst
    continuedocatch

    Whitespace and Line Breaks

    TypeScript ignores spaces, tabs, and newlines that appear in programs. You can use spaces, tabs, and newlines freely in your program and you are free to format and indent your programs in a neat and consistent way that makes the code easy to read and understand.

    TypeScript is Case-sensitive

    TypeScript is case-sensitive. This means that TypeScript differentiates between uppercase and lowercase characters.

    Semicolons are optional

    Each line of instruction is called a statement. Semicolons are optional in TypeScript.

    Example

    console.log("hello world")console.log("We are learning TypeScript")

    A single line can contain multiple statements. However, these statements must be separated by a semicolon.

    Comments in TypeScript

    Comments are a way to improve the readability of a program. Comments can be used to include additional information about a program like author of the code, hints about a function/ construct etc. Comments are ignored by the compiler.

    TypeScript supports the following types of comments −

    • Single-line comments ( // ) − Any text between a // and the end of a line is treated as a comment
    • Multi-line comments (/* */) − These comments may span multiple lines.

    Example

    //this is single line comment /* This is a  
   Multi-line comment 
*/

    TypeScript and Object Orientation

    TypeScript is Object-Oriented JavaScript. Object Orientation is a software development paradigm that follows real-world modelling. Object Orientation considers a program as a collection of objects that communicate with each other via mechanism called methods. TypeScript supports these object oriented components too.

    • Object − An object is a real time representation of any entity. According to Grady Brooch, every object must have three features −
      • State − described by the attributes of an object
      • Behavior − describes how the object will act
      • Identity − a unique value that distinguishes an object from a set of similar such objects.
    • Class − A class in terms of OOP is a blueprint for creating objects. A class encapsulates data for the object.
    • Method − Methods facilitate communication between objects.

    Example: TypeScript and Object Orientation

    Open Compiler

    classGreeting{greet():void{console.log("Hello World!!!")}}var obj =newGreeting(); 
obj.greet();

    The above example defines a class Greeting. The class has a method greet (). The method prints the string Hello World on the terminal. The new keyword creates an object of the class (obj). The object invokes the method greet ().

    On compiling, it will generate following JavaScript code.

    var Greeting =(function(){functionGreeting(){}
   Greeting.prototype.greet=function(){console.log("Hello World!!!");};return Greeting;}());var obj =newGreeting();
obj.greet()

    The output of the above program is given below −

    Hello World!!!