Skip to main content

55 Best TypeScript Interview Questions and Answers - JavaScript!

What Is TypeScript?
By definition, "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript."

TypeScript is a superset of JavaScript which provides optional static typing, classes and interfaces.

=> The TypeScript was first made public in the year 2012.
=> Typescript is a modern age JavaScript development language.
=> TypeScript is a strongly typed, object oriented, compiled language.
=> TypeScript was designed by Anders Hejlsberg (designer of C#) at Microsoft.
=> TypeScript is both a language and a set of tools.

As an Example of TypeScript,

class Hello {
    msg: string;
    constructor (message: string) {
        this.msg = message;
    }
 
    getMsg() {
        return "Hello, " + this.msg;
    }
}

TypeScript introduced a great deal of syntax taken from object-oriented programming, including but not limited to:

1) Interfaces
2) Classes
3) Enumerated types
4) Generics
5) Modules


What Are the Features of TypeScript?

1) Maintainability
2) Offered great productivity for developers
3) Code navigation and bug prevention
4) Code 'discoverability' & refactoring
5) Optional Static Type Annotation
6) Additional Features for Functions
7) Supports ES6
8) TypeScript supports other JS libraries.
9) Supports interfaces, sub-interfaces, classes, and subclasses
10) Scalable HTML5 client-side development
11) Rich IDE available with autocomplete and code navigation features.
12) Class-based object-oriented with the inheritance of private members and interfaces
13) Typescript is a powerful type system, including generics & JS features
14) Static Typing


Why should you use TypeScript? 
What Are the Benefits of Using TypeScript?
1.     Supports Object Oriented Programming.
2.     Typescript adds static typing to JavaScript. Having static typing makes easier to develop and maintain complex apps.
3.     Angular uses TypeScript a lot to simplify relations between various components and how the framework is built in general.
4.     Provide an optional type system for JavaScript.
5.     Provide planned features from future JavaScript editions to current JavaScript engines.
6.     Supports type definitions.
7.    Increased team performance.
8.   Rich IDE support with autocomplete and code navigation features.
9.   Module support

List of some other Advantages,
1.     It is purely object-oriented programming.
2.     It is support static type-checking.
3.     It can be used for client-side and server-side development.
4.     Build-in Support for JavaScript Packaging
5.     It offers a “compiler” that can convert to JavaScript-equivalent code.
6.     It has an API for DOM manipulation.
7.     It has a namespace concept by defining a “Module”.
8.     Superset of JavaScript
9.     ES6 features support

What Are the Disadvantages of TypeScript?
=> Overly complicated typing system
=> Required compilation
=> False sense of security
=> Compilation can be time-consuming
=> If you are developing very large enterprise software, every compilation step increases the time to build
What Is other strictly typed languages that compile to JavaScript?
=> Kotlin has an official JavaScript compilation solution.
=> Rust may work on the frontend; however, it doesn’t compile directly to JavaScript, but rather WebAssembly. This WebAssembly code can then be combined and used together with JavaScript code.
=> Go can be effectively compiled to JavaScript—via an unofficial tool called GopherJS—or to WebAssembly, much like Rust.
=> Elm and Reason were designed for JavaScript compilation.
=> Bridge.NET (C#)
=> Cheerp (C++)
=> Dart
=> GopherJS (Go)
=> Haxe
=> JSweet (Java)
=> Scala.js (Scala)

What Are the Filename extensions of TypeScript?
The TypeScript filename extensions are,
 => .ts
 => .tsx

What Are difference between JavaScript and TypeScript?
TypeScript design and developed by Anders Hejlsberg at Microsoft.
JavaScript - Brendan Eich at Netscape communications corporation, Mozilla Foundation, ECMA International.

=> TypeScript has a feature known as Static typing but JavaScript does not have this feature.
=> The file extension of TypeScript are (.ts/.tsx) while the file extension of JavaScript is (.js)
=> TypeScript has Interface but JavaScript does not have Interface.
=> TypeScript specially used in client-side but JavaScript use both client-side and server-side.
=> TypeScript support optional parameters function but JavaScript does not support the optional parameters function.
=> TypeScript is a heavy weighted an interpreted programming language but JavaScript is a light weighted.

What Is TypeScript Types?
The Type represents the different types of values which are using in the programming languages and it checks the validity of the supplied values before they are manipulated by your programs.

The TypeScript provides data types as a part of its optional type and its provide us some primitive types as well as a dynamic type “any” and this “any” work like “dynamic”.

In TypeScript, we define a variable with a “type” and appending the “variable name” with “colon” followed by the type name.

Lets understand in detail about the same,

let isActive: boolean = false;
var isActive: boolean = false;

let decimal: number = 6;
var decimal: number = 6;

let hex: number = 0xf00d;
var hex: number = 0xf00d;

let name: string = "Anil Singh";
var name: string = "Anil Singh";

let binary: number = 0b1010;
var binary: number = 0b1010;

let octal: number = 0o744;
var octal: number = 0o744;

let numlist: number[] = [1, 2, 3];
var numlist: number[] = [1, 2, 3];

let arrlist: Array<number> = [1, 2, 3];
var arrlist: Array<number> = [1, 2, 3];

//Any Keyword
let list: any[] = [1, true, "free"];
list[1] = 100;

//Any Keyword
let notSureType: any = 10;
notSureType = "maybe a string instead";

notSureType = false; // definitely a Boolean

Number
: the “number” is a primitive number type in TypeScript. There is no different type for float or double in TypeScript.

Boolean: The “boolean” type represents true or false condition.

String: The “string” represents sequence of characters similar to C#.

Null: The “null” is a special type which assigns null value to a variable.

Undefined: The “undefined” is also a special type and can be assigned to any variable.

Any : this data type is the super type of all types in TypeScript. It is also known as dynamic type and using “any” type is equivalent to opting out of type checking for a variable.


A note about “let” keyword –

You may have noticed that, I am using the “let” keyword instead of “var” keyword. The “let” keyword is actually a newer JavaScript construct that TypeScript makes available. Actually, many common problems in JavaScript are reducing by using “let” keyword. So we should use “let” keyword instead of “var” keyword.

How To Setup and Install TypeScript?
Two main ways to Installing the TypeScript,

1.     Installing using npm
2.     Installing TypeScript’s Visual Studio plugins


In the Visual Studio 2017 and the above, the TypeScript include by default. If you don’t have TypeScript with Visual Studio, try for NPM users,

> npm install -g typescript


As an Example 1,

class Users {
    userName: string;
    constructor (name: string) {
        this.userName = name;
    }
    getUserName() {
        return "Hello, " + this.userName;
    }
}

As an Example 2,

class Users {
    private firstName: string;
    private lastName: string;

    //Constructor           
    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
   
    //Function
    studentFullName(): void {
        alert(this.firstName + ' ' + this.lastName);
    }

}

What is Variable in TypeScript?
How to Declare Variable in TypeScript?
The variable is simply a name of storage location and all variables must be identified with unique names and these unique names are called identifiers.

Note – I am using the “let” keyword instead of “var” keyword. The “let” keyword is actually a newer JavaScript construct that TypeScript makes available. Actually, many common problems in JavaScript are reducing by using “let” keyword. So we should use “let” keyword instead of “var” keyword.

A variable contains values such as "Hi" or 22. When you use the variable, you refer to the data it represents.

As an Example

let name: string = "Hi"//var name: string = "Anil Singh";
let num: number = 22; //var num: number = 22;

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ9xBsQW9eWrNS76P_ThKKK-Wr8LSpPFs89Fcs7AbXrGR5DuxERUXZMFI_FCBj4Ynb_Gr5jkkculIUXx9mJJZS_-tpibMa6tO7UX0zzj4kobZqgHs25bI1Cvl87QnhdLcqc_O7NNt0V74m/s320/TypeScript+Variable+Declarations.jpg

There are some rules while declaring variables,

1.     The variable names must begin with a letter
2.     The variable names can contain letters, digits, underscores, and dollar signs.
3.     The variable names can also begin with “$” and “_”
4.     The variable names are case sensitive that means “a” and “A” are different variables.
5.     The variable reserved words can’t be used as names.


Declaring Variables,
let isActive: boolean = false;
let decimal: number = 6;
let hex: number = 0xf00d;
let name: string = "Anil Singh";
let binary: number = 0b1010;
let octal: number = 0o744;
let numlist: number[] = [1, 2, 3];
let arrlist: Array<number> = [1, 2, 3];

//Any Keyword
let list: any[] = [1, true"free"];
list[1] = 100;

//Any Keyword
let notSureType: any = 10;
notSureType = "maybe a string instead";
notSureType = false// definitely a Boolean


The “var” creates a new variable. The “declare” is used to tell TypeScript that the variable has been created elsewhere. If you use declare, nothing is added to the JavaScript that is generated. It is simply a hint to the compiler.


What Is scope variable?
The scope is set of objects, variables and function and the JavaScript can have global scope variable and local scope variable.

We can say, we can declare a variable in the two type’s i.e.
1.     Local Scope Variable
2.     Global Scope Variable


Global Scope Variable - The global scope is a window object and it’s used out of function and within the functions.

Local Scope Variable - The local scope is a function object and it’s used within the functions.


Example for global and local variable (var/let) declarations

//DECLARED A VARIABLE NAMED NUM WITH THE VALUE 15.
let num = 15;

//DECLARE A VARIABLE INSIDE OF A FUNCTION
let getUser = function () {
    let name = 'Anil Singh';

    return name;
}

//RESULTS
getUser(); // returns 'Anil Singh'

//ACCESS THOSE SAME VARIABLES WITHIN OTHER FUNCTIONS
let sum = function() {
    let num = 15;

    return function subNum () {
        return num + 5;
    }
}

//RESULTS
sum(); // returns 20

//SCOPING RULES
let scopingRulesSum = function(isActive: boolean) {
    if (isActive) {
        let num = 15;
        num = num + 1;
    }

    return num;
}

//RESULTS
scopingRulesSum(true);  // returns 16
scopingRulesSum(false); // returns 'undefined'

//IN THE JAVASCRIPT, WE WILL DECLARE MULTIPLE VARIABLES WITH THE SAME NAME.
//IN JAVASCRIPT, NO MATTER HOW MANY TIMES YOU DECLARED YOUR VARIABLES.
//WE CAN SAY THIS IS A BUG.
var fun = function (i, isActive = true) {
    var i;
    var i;

    if (isActive) {
        var i;
    }
    //The all declarations of 'i' actually refer to the same 'i'.
}

//IN THE TYPESCRIPT, NOT POBISBLE TO DECLARE MULTIPLE VARIABLES WITH THE SAME NAME
//IT WILL GIVE US ERROR (ERROR: CAN'T RE-DECLARE 'I' IN THE SAME SCOPE).
let i = 15;
let i = 20; // error: can't re-declare variable 'i' in the same scope.

What Is an Interface in TypeScript?
An interface in TypeScript is similar to other object oriented programming languages interfaces.
An interface is a way to define a contract on a function with respect to the arguments.


In the below example, I am using an interface that describes objects that have a “name”, “age” and “address” fields and the following code defines an interface and a function that takes a parameter that adheres to that interface.

As an Example,

//USER INTERFACE
interface User {
    name: string;
    age: number;
    address: string
}


//FUNCTION USING USER INTERFACE
let userInfo = function(user: User) {
   let info = "Hello, " + user.name + " Your Age is - " + user.age + " and Address is -" + user.address;

   return info;
}

//USER INFO JSON OBJECT
let info = {
    name: "Anil",
    age: 30,
    address: "Noida, India."
};

//RESULT
console.log(userInfo(info));


What is Optional Properties in TypeScript?

We can specify optional properties on interfaces and the property may be present or missing in the object.

In the below example, the address property is optional on the following “User” interface.

Example as,

//USER INTERFACE
interface User {
    name: string;
    age: number;
    address?: string //Optional
}

//FUNCTION USING USER INTERFACE
let userInfo = function(user: User) {
   let info = "Hello, " + user.name + " Your Age is - " + user.age + " and Address is -" + user.address;

   return info;
}

//USER INFO JSON OBJECT
let info = {
    name: "Anil",
    age: 30
};

//RESULT
console.log(userInfo(info));

What Is the Functions in TypeScript?
How many types you defined in TypeScript?
A function is a set of statements that perform a specific task and used to create readable, maintainable and re-usable code.

A function declaration tells to compiler about a function name, return type, and parameters.

TypeScript functions are almost similar to JavaScript functions but there are different ways of writing functions in TypeScript.

The Different Types of Available Functions in TypeScript are-

1.     Normal function
2.     Anonymous Function
3.     Named Function
5.     Class Function
6.     Optional Parameters
7.     Rest Parameters
8.     Default Parameters


Anonymous Functions–
An anonymous function is a function that was declared without any named identifier to refer to it.

As an Example - Normal function
function printHello() {
    console.log('Hello Anil!');
}

printHello();


As an Example - Anonymous function

In the JavaScript –

var hello = function () {
    console.log('Hello Anil!, I am Anonymous.');
};

hello();//Return - Hello Anil!, I am Anonymous.

OR

setTimeout(function () {
    console.log('Hello Anil!, I am Anonymous.');
}, 1000); //Return - Hello Anil!, I am Anonymous.


In the TypeScript–
var anonymousFunc = function (num1: number, num2: number): number {
    return num1 + num2;
}

//RESULT
console.log(anonymousFunc(10, 20)); //Return is 30

//RESULT
console.log(anonymousFunc(10, "xyz"));
// error: Argument of type 'number' is not assignable to parameter of type 'string'.
//because return type is number for anonymous function).


Named Function -
The named function is very similar to the JavaScript function and only one difference - we must declare the type on the passed parameters.


As an Example – In the JavaScript
function addTwoNumer(num1, num2) {
    return num1 + num2;
}


As an Example – In the TypeScript
function addTwoNumer(num1: number, num2: number): number {
    return num1 + num2;
}


Lambda Function/Arrow Function -
The arrow function is additional feature in typescript and it is also known as a lambda function. A lambda function is a function without a name.

var addNum = (n1: number, n2: number) => n1 + n2;

In the above, the “=>” is a lambda operator and (n1 + n2) is the body of the function and (n1: number, n2: number) are inline parameters.

As an Example

let addNum = (n1: number, n2: number): number => { return n1 + n2; }
let multiNum = (n1: number, n2: number): number => { return n1 * n2; }
let dividNum = (n1: number, n2: number): number => { return n1 / n2; }

addNum(10, 2);// Result - 12
multiNum(10, 2);// Result - 20
multiNum(10, 2);// Result - 5


Optional Parameters Function -
We can specify optional properties on interfaces and the property may be present or missing in the object.

In the below example, the address property is optional on the following “User” interface.

As an Example,

//USER INTERFACE
interface User {
    name: string;
    age: number;
    address?: string //Optional
}

//FUNCTION USING USER INTERFACE
let userInfo = function(user: User) {
   let info = "Hello, " + user.name + " Your Age is - " + user.age + " and Address is -" + user.address;

   return info;
}

//USER INFO JSON OBJECT
let info = {
    name: "Anil",
    age: 30
};

//RESULT
console.log(userInfo(info));


Rest Parameters –
The Rest parameters do not restrict the number of values that we can pass to a function and the passed values must be the same type otherwise throw the error.

Example as,
//Rest Parameters
let addNumbers = function(...nums: number[]) {
    let p;
    let sum: number = 0;

    for (p = 0; p < nums.length; p++) {
        sum = sum + nums[p];
    }

    return sum;
}

//The Result
addNumbers(1, 2);
addNumbers(1, 2, 3);
addNumbers(1, 12, 10, 18, 17);


Default Parameters Function

What Is the Default Parameters Function in TypeScript?
Function parameters can also be assigned values by default. A parameter can't be declared as optional and default both at the same time.

In the below example, rate is a default param as number in discount function. If we pass the value in the discount’s rate param, it will use this otherwise use default value 0.40.

See the Example and its Output result,

let discount = function (price: number, rate: number = 0.40) {
    return price * rate;
}

//CALCULATE DISCOUNT
discount(500); // Result - 200

//CALCULATE DISCOUNT
discount(500, 0.45); // Result - 225

How to create fields, constructor and function in TypeScript Class?
What is class in TypeScript?

A class is a template definition of the methods and variables in a particular kind of object. It is extensible program, code and template for creating objects.

A TypeScript is object oriented JavaScript and it also supports object oriented programming features like classes, interfaces, etc.

A class captains the Public, Private, Protected and Read-only modifiers and Public by default.
You can see the below example, the class User and each members are public by default.

A class definition can contains the following –
1.     Fields
2.     Constructors
3.     Functions


As an Example – Use of class field, constructor and function,
// A simple class based example.
class User { // Calss
    name: string; //field
    constructor(nameTxt: string) { //constructor
        this.name = nameTxt;
    }

    getName() {//function
        return "Hello, " + this.name;
    }
}

let user = new User("Anil");//Creating Instance objects


How Static class in typescript?
We can define a class with static properties.

As an Example,
export class Constants {
    static baseUrl = ‘http://localhost:8080/’;
    static date = new Date();
}

Ways to declare a nest class structure in typescript?
See the following example to understand the declare a nest class structure,
//Example 1
declare module a{

    class b {
    }

    module b {
        class c {
        }
    }
}

var clB = new a.b();
var clC = new a.b.c();

//Example 2
export module a {
    export class b {
    }

    export module b {
        export enum c {
            C1 = 1,
            C2 = 2,
            C3 = 3,
        }
    }
}

//Example 3
class A {
    static B = class { }
}

var a = new A();

var b = new A.B();

What Is Public, Private, Protected and Readonly Modifiers in TypeScript?
The TypeScript supports to multiple modifiers and it is by default public.
·       Public,
·       Private,
·       Protected and
·       Read-only


Public Modifier – Public by default! It is freely access anywhere.
In the below example, the class Employee and its members are by default public and we are freely access it.
As an Example -
class Employee {
    empName: string;
    constructor(name: string) {
        this.empName = name;
    }
 
    salary(salary: number = 10000) {
        console.log('Hello, ' + this.empName + ' Your Salary -' + salary);
    }
}
 
let empSal = new Employee("Anil");
console.log(empSal.salary());
console.log(empSal.salary(40000));

Private Modifier -When using private modifier, we can’t be accessed from outside of its containing class.
As an Example,
class Employee {
    private empName: string;
    constructor(name: string) {
        this.empName = name;
    }
 
    salary(salary: number = 10000) {
        console.log('Hello, ' + this.empName + ' Your Salary -' + salary);
    }
}
 
let emp = new Employee("Anil").empName; 
//error: property 'empName' is private and only accesible in the class 'Employee'.

Protected Modifier - The protected modifier is very similar to private but only one difference that can be accessed by instances of deriving classes.
As an Example,
class Employee {
    protected  empName: string;
    constructor(name: string) {
        this.empName = name;
    }
 
    salary(salary: number = 10000) {
        console.log('Hello, ' + this.empName + ' Your Salary -' + salary);
    }
}
 
class Employer extends Employee {
    private department: string;
 
    constructor(empName: string, department: string) {
        super(empName);
        this.department = department;
    }
 
    salary(salary = 20000) {
        super.salary(salary);
    }
}
 
let empSal = new Employer("Anil", "IT");
console.log(empSal.salary());
console.log(empSal.empName); //error- the property 'empName' is protected and only accesible within the class 'Employee' and its child class.

Readonly Modifier - Read-only properties must be initialized at their declaration or in the constructor.
As an example,
class Employee {
    readonly empName: string;
    constructor(name: string) {
        this.empName = name;
    }
 
    salary(salary: number = 10000) {
        console.log('Hello, ' + this.empName + ' Your Salary -' + salary);
    }
}
 
let emp = new Employee('Anil');
emp.empName = 'Anil Singh';//error - cannot assign to 'empName' because it is constant or read-only.


What Is Method Overriding in TypeScript?
In the Method Overriding, redefined the base class methods in the derive class or child class.

As an Example,

class NewPrinter extends Printer {
    doPrint(): any {
        super.doPrint();
        console.log("Called Child class.");
    }

    doInkJetPrint(): any {
        console.log("Called doInkJetPrint().");
    }
}

let printer: new () => NewPrinter;
printer.doPrint();
printer.doInkJetPrint();

What Is Inheritance in TypeScript?
The TypeScript supports the concept of Inheritance.

Inheritance has ability of a program to extend existing classes to create new ones and the extended class is called parent class or super class and the newly created classes are called child class or sub class.

Inheritance can be classified as -
1.     Single - every class can at the most extend from one parent class
2.     Multiple - doesn’t support multiple inheritances in TypeScript.
3.     Multi-level

A class captains the Public, Private, Protected and Read-only modifiers and Public by default.
You can see the below example, the class User and each members are public by default.

As an Example,
class Employee {
    empName: string;
    constructor(name: string) {
        this.empName = name;
    }

    salary(salary: number = 10000) {
        console.log('Hello, ' + this.empName + ' Your Salary -' + salary);
    }
}

class Employer extends Employee {
    constructor(empName: string) {
        super(empName);
    }

    salary(salary = 20000) {
        super.salary(salary);
    }
}

let empSal = new Employee("Anil");
console.log(empSal.salary());
console.log(empSal.salary(40000));

What Are the Parameter Property in TypeScript?
The TypeScript has so many useful features which not have in other programming languages. The TypeScript has an automatic assignment of constructor parameters that is called “Parameter Property”.

It is automatic assignment of constructor parameters to the relevant property. It is great but it is different to other languages.

As an Example, Declaring a class with constructor arguments in C# and other programming language as,

class Customer {
    _name: string;
    _age: number;
    _adrress: string;

    constructor(name: string, age: number, adrress: string) {
        this.name = _name;
        this.age = _age;
        this.adrress = _adrress;
    }
}

Declaring a class with constructor arguments in TypeScript –that is called automatic parameter assignment as,

export class Customer {
    constructor(private name: string, age: numberprivate adrress: string) { }
}

You can take a look at this on the JavaScript.
var Customer = (function () {
    function Customer(name, age, adrress) {
        this.name = name;
        this.age = age;
        this.adrress = adrress;
    }

    return Customer;
})();


PublicPrivate, and Protected modifiers as
1.     Public - accessible outside of the class
2.     Private - only accessible in the class only
3.     Protected - accessible in the class and the derived classes


Public modifier by default - When you are not put a modifier (public, private or protected) on your member definition then TypeScript will choose the public by default.

Which access modifiers are implied when not specified?
Everything in a class is public if not specified. Everything in a module is private unless export keyword is used.

What Is the purpose of the public access modifier for classes in Typescript?
Your sample code means exactly the same in TypeScript. When you don't put a modifier public, private or protected on your member definition then TypeScript will choose the default one which is public.

What Is a Module in TypeScript? 
The module system is an interesting feature of TypeScript, the statically typed superset of JavaScript. Modules provide the possibility to group related logic, encapsulate it, structure your code and prevent pollution of the global namespace.


What Is an Internal Module in TypeScript? 
You can define modules within your typescript files and all variables defined within the module are scoped to the module and removed from the global scope.

You can access the variable outside the module using the export keyword and also you can extend internal modules, share them across files, and reference them using the triple slash. 

Syntax - (///

The List of TypeScript Modules Are,

1.     Internal Modules
a.      Implicit Internal Modules
b.     Named Internal Modules
2.     External Modules
3.     Exports Modules


Modules are executed within their own scope, not in the global scope.
1.     Internal modules are now namespaces.
2.     External modules are now simply modules, as to align with ECMAScript.

What Are The Advantages of Module?
The list of Advantages Are–
1.     Code reuse
2.     Encapsulation
3.     Scoping of variables
4.     Support CommonJs
5.     Easier for testing

What Is Implicit Internal Modules?
You simply write source code without worrying about modules that is called implicit internal modules.

As an Example,
class AppGlobal {
    readonly baseAppUrl: string = 'http://localhost:57431/';
    readonly baseAPIUrl: string = 'https://api.github.com/';
};

let baseApiUrl = new AppGlobal().baseAPIUrl;///Returns http://localhost:57431/
let baseAppUrl = new AppGlobal().baseAppUrl;///Returns https://api.github.com/

What Is Named Internal Modules?
Internal modules are come in earlier version of the Typescript and it was basically used to logically group classes, interfaces, and functions into one unit and it can be export in another module.

Now this logically group named call “namespace” in latest version of TypeScript. So we can use namespace instead of internal modules in the TypeScript. As per me, this one is the best coding practice but don’t mind the internal modules are also supporting, if you want can use it.

Example using module –

module System.modules {

    //this function can be accessed from outside the module because using export.
    export function addNumbers(a: number, b: number): number {
        return a + b;
    }

    // this class can be accessed from outside the module because using export.
    export class ExportedClass {
        public subNumbers(a: number, b: number): number {
            return a - b;
          }
    }

    //this class can only be accessed from inside the module because not using export.
    class NotExportedClass {
        mulNumbers(a: number, b: number): number {
           return a * b;
        }

        divNumbers(a: number, b: number): number {          
            return a > 0 ? a / b : 0;
        }
    }
}

Example using namespace –

namespace System.namespaces {

    //this function can be accessed from outside the module because using export.
    export function addNumbers(a: number, b: number): number {
        return a + b;
    }

    // this class can be accessed from outside the module because using export.
    export class ExportedClass {
        public subNumbers(a: number, b: number): number {
            return a - b;
        }
    }

    //this class can only be accessed from inside the module because not using export.
    class NotExportedClass {
        mulNumbers(a: number, b: number): number {
            return a * b;
        }

        divNumbers(a: number, b: number): number {
            return a > 0 ? a / b : 0;
        }
    }
}

What Is an Export in TypeScript?
Why using Export in TypeScript?

Export - Exporting a declaration
Any variable, function, class or interface can be exported by using the export keyword. After using export keyword, you can access your variable, function, class or interface to outside the module.

As an Example –
module System.modules {
    //this function can be accessed from outside the module because using export.
    export function addNumbers(a: number, b: number): number {
        return a + b;
    }

    // this class can be accessed from outside the module becaues using export.
    export class ExportedClass {
        public subNumbers(a: number, b: number): number {
            return a - b;
        }
    }
}

//AND
namespace System.namespaces {
    //this function can be accessed from outside the module because using export.
    export function addNumbers(a: number, b: number): number {
        return a + b;
    }

    // this class can be accessed from outside the module because using export.    export class ExportedClass {
        public subNumbers(a: number, b: number): number {
            return a - b;
        }
    }
}

What Is default export in TypeScript?
Why using default export in TypeScript?

Default exports – 
Each module can optionally export a default export and the default exports work with the keyword default and we can use only one default export per module.

As an Example,

export class User {
    //Todo your logic here..
}

And then -
import { User } from "./User";

//OR

//BaseUrl.ts
export default "http://localhost:57431/Account/Login";

//Login.ts
import BaseUrl from "../BaseUrl";
console.log(BaseUrl); //"http://localhost:57431/Account/Login"

What Is External Modules in TypeScript?
External modules are useful in sense they hide the internal statements of the module definitions and show only the methods and parameters associated to the declared variable.

It is using when dealing with large JavaScript based applications. When we using nodejs or external modules, you can export an entire module and then import it into another module.

As an Example -

// userList.ts file
// imports the users.ts file as the users module
import impUser = module('users');

export function userList() {
    var user = new impUser.users();
    user.getUsers();
}

// users.ts file
// exports the entire module
export class users {
    getUsers() {
         return ["Anil", "Alok", "Dilip"];
    }
}

What Is difference between module and namespace in typescript?
Module is for external packages and the namespace is for internal packages. Actually, the module keyword has been replaced with the namespace keyword.

Namespaces are simply named JavaScript objects in the global namespace.
Modules can contain both code and declarations. The main difference is that modules declare their dependencies.

The named modules called “namespace” in latest version of TypeScript. So we can use namespace instead of internal modules in the TypeScript.

As per me, this one is the best coding practice but don’t mind the internal modules are also supporting, if you want can use it.



JavaScript Q/A

What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used?
What is "this"? What is its value? Explain why "self" is needed instead of "this".
What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods.
Can you explain the difference between == and ===? Can you explain the difference between call and apply?
Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about a JavaScript performance problems?
Tell me your JavaScript Naming Convention? How do you define a class and its constructor?
What is Hoisted in JavaScript? What is function overloading in JavaScript?
What is scope variable in JavaScript? What is Associative Arrays in JavaScript?
How to Achieve Inheritance in JavaScript? What are two-way data binding and one-way data flow, and how are they different?
What will be the output of the following code?What will be the output of the JavaScript code?
How to empty an array in JavaScript?What is the difference between the function declarations below?
"1"+2+3 = ? And 1+2+"3" = ? OutPut Will Be?
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin

React | Encryption and Decryption Data/Text using CryptoJs

To encrypt and decrypt data, simply use encrypt () and decrypt () function from an instance of crypto-js. Node.js (Install) Requirements: 1.       Node.js 2.       npm (Node.js package manager) 3.       npm install crypto-js npm   install   crypto - js Usage - Step 1 - Import var   CryptoJS  =  require ( "crypto-js" ); Step 2 - Encrypt    // Encrypt    var   ciphertext  =  CryptoJS . AES . encrypt ( JSON . stringify ( data ),  'my-secret-key@123' ). toString (); Step 3 -Decrypt    // Decrypt    var   bytes  =  CryptoJS . AES . decrypt ( ciphertext ,  'my-secret-key@123' );    var   decryptedData  =  JSON . parse ( bytes . toString ( CryptoJS . enc . Utf8 )); As an Example,   import   React   from   'react' ; import   './App.css' ; //Including all libraries, for access to extra methods. var   CryptoJS  =  require ( "crypto-js" ); function   App () {    var   data

25 Best Vue.js 2 Interview Questions and Answers

What Is Vue.js? The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments. The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM ( Model-View-ViewModel ) pattern. The Vue.js is supporting to multiple Components and libraries like - ü   Tables and data grids ü   Notifications ü   Loader ü   Calendar ü   Display time, date and age ü   Progress Bar ü   Tooltip ü   Overlay ü   Icons ü   Menu ü   Charts ü   Map ü   Pdf viewer ü   And so on The Vue.js was developed by “ Evan You ”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular and the Vue.js 2 components looks like -

Encryption and Decryption Data/Password in Angular

You can use crypto.js to encrypt data. We have used 'crypto-js'.   Follow the below steps, Steps 1 –  Install CryptoJS using below NPM commands in your project directory npm install crypto-js --save npm install @types/crypto-js –save After installing both above commands it looks like  – NPM Command  1 ->   npm install crypto-js --save NPM Command  2 ->   npm install @types/crypto-js --save Steps 2  - Add the script path in “ angular.json ” file. "scripts" : [                "../node_modules/crypto-js/crypto-js.js"               ] Steps 3 –  Create a service class “ EncrDecrService ” for  encrypts and decrypts get/set methods . Import “ CryptoJS ” in the service for using  encrypt and decrypt get/set methods . import  {  Injectable  }  from   '@angular/core' ; import   *   as   CryptoJS   from   'crypto-js' ; @ Injectable ({    providedIn:   'root' }) export   class   EncrDecrS