Important 70+ TypeScript Interview Questions and Answers - 2021

• Typescript is a superset of JavaScript whereas JavaScript is a scripting language.
• Typescript has an interface concept but JavaScript havan't.
• TypeScript doesn't run in the browser where JavaScript runs.
• TypeScript has classes whereas JavaScript has functions.
• Typescript support module whereas JavaScript doesn't support modules.
• In typescript Number, a string is the interfaces whereas In, JavaScript Number, string are the Object.

npm install -g typescript

Anders Hejlsberg developed TypeScript. The current stable version of TypeScript is 3.9.7.

Types in Typescript define the data-type. It helps in avoiding the wrong value passing. There are 2 different types:

Built in — String, Number, boolean, Null, Undefined, any

User Defined — Array, object, classes, interfaces

TypeScript has the following benefits:

• Intellisense
• Impose coding guidelines
• Offers type checking
• It helps in code structuring
• Compile time error checking
• Use class-based object-oriented programming

A variable is a named space in the memory which is used to store values. The type syntax for declaring a variable in TypeScript includes a colon (:) after the variable name, followed by its type.

The interface is a structure that defines the contract in your application. It defines the syntax for classes to follow. It contains only the declaration of the members and it is the responsibility of the deriving class to define the members. The TypeScript compiler uses interface for type-checking and checks whether the object has a specific structure or not.

TypeScript introduced classes so that they can avail the benefits of object-oriented techniques like encapsulation and abstraction. The class in TypeScript is compiled to plain JavaScript functions by the TypeScript compiler to work across platforms and browsers.

• Public – All the members of the class, its child classes, and the instance of the class can access.

• Protected – All the members of the class and its child classes can access them. But the instance of the class can not access.

• Private – Only the members of the class can access them.

A module is a powerful way of creating a group of related variables, functions, classes, and interfaces, etc. It can be executed within its own scope, but not in the global scope. Basically, you cannot access the variables, functions, classes, and interfaces declared in a module outside the module directly.

Namespace groups functionalities logically. These maintain the legacy code of typescript internally. It encapsulates the features and objects that share certain relationships. A namespace is also known as internal modules. A namespace can also include interfaces, classes, functions, and variables to support a group of related functionalities.

A Decorator is a special kind of declaration that can be applied to classes, methods, accessor, property, or parameter. Decorators are functions that are prefixed @expression symbol, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.

In Javascript, Mixins are a way of building up classes from reusable components and then build them by combining simpler partial classes.

The idea is simple, instead of a class A extending class B to get its functionality, function B takes class A and returns a new class with this added functionality. Here, function B is a mixin.

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

You can declare a variable in two different scopes such as:

Local Scope Variable – It is a function object which is used within the functions

Global Scope Variable – You can use this window object out of function and within the functions

TypeScript Definition Manager (TSD) is a package manager used to search and install TypeScript definition files directly from the community-driven DefinitelyTyped repository.

The tsconfig.json file is a file which is in JSON format. In the tsconfig.json file, you can specify different options to tell the compiler how to compile the current project. The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project.

TypeScript Generics is a tool that provides a way of creating reusable components. It is able to create components that can work with a variety of data types rather than a single data type. Also, it provides type safety without compromising the performance, or productivity. Generics allow us to create generic classes, generic functions, generic methods, and generic interfaces.

JSX is an embeddable XML-like syntax and it is meant to be transformed into a valid JavaScript. JSX became popular with the React framework. TypeScript supports embedding, type checking, and compiling JSX directly into JavaScript.

TypeScript Map file is a source map file that holds information about our original files. The .map files are source map files that let tools map between the emitted JavaScript code and the TypeScript source files that created it. Also, debuggers can consume these files so we can debug the TypeScript file instead of the JavaScript file.

The “as” is the additional syntax for Type assertion in TypeScript. The reason for introducing the as-syntax is that the original syntax conflicted with JSX.

Enums or enumerations are a TypeScipt data type that allows us to define a set of named constants. Using enums make it easier to document intent, or create a set of distinct cases. It is a collection of related values that can be numeric or string values.

An anonymous function is a function that is declared without any named identifier. These functions are dynamically declared at runtime. Also, anonymous functions can accept inputs and return outputs, just as standard functions do. It is usually not accessible after its initial creation.

ES6 version of TypeScript provides shorthand syntax for defining the anonymous function, i.e., for function expressions. These arrow functions are also called lambda functions. A lambda function is a function without a name. Whereas, the arrow function omits the function keyword.

The compilation context is basically grouping of the files that TypeScript will parse and analyze to determine what is valid and what isn’t. Along with the information about which files, the compilation context contains information about which compiler options. A great way to define this logical grouping is using a tsconfig.json file.

Triple-slash directives are single-line comments containing a single XML tag. The contents of the comment are used as compiler directives.

TypeScript is referred as optionally statically typed, which means we can make the compiler to ignore the type of a variable optionally. Using "any" data type, we can assign any type of value to the variable. TypeScript will not give any error checking during compilation.

super() function is used to called parent or base class constructor from Child Class.

Public is the default visibility for properties/methods in TypeScript classes.

Yes, TypeScript support all object-oriented principles. There are four main principles to object-oriented programming:

• Encapsulation
• Inheritance
• Abstraction
• Polymorphism

Type assertion works like a typecasting in other languages, but it doesn't perform type checking or restructuring of data just like other languages can do like C# and Java. The typecasting comes with runtime support whereas type assertion has no impact on runtime. However, type assertions are used purely by the compiler and provide hints to the compiler on how we want our code to be analyzed.

The rest parameter is used to pass zero or more values to a function. It is declared by prefixing the three dot characters ('...')before the parameter. It allows the functions to have a variable number of arguments without using the arguments object. It is very useful where we have an undetermined number of parameters.

Declaration merging is the process followed by the compiler to merge two or more separate declarations. The declaration declared with the same name into a single definition. This merged definition has the features of both of the original declarations.

The simplest, and perhaps most common, type of declaration merging is interface merging. At the most basic level, the merge mechanically joins the members of both declarations into a single interface with the same name.

TypeScript supports getters/setters as a way of intercepting accesses to a member of an object. This gives you a way of having finer-grained control over how a member is accessed on each object.

Duck-typing used to check the type compatibility for more complex variable types in typescript. This method checks the type matching between two objects. If the property contains more or less or not match then a compile-time error occurred.

A module is used to create a set of related variables, functions, classes, and interfaces, etc in the Typescript. The internal and external module has two categories of Typescript.

The optional properties use as an optional thing. The interface typescript has many properties but every property not required. You can pass the object into interface using ( ? ) question mark symbol.

Closures are nothing but a statefull functions.

A closure is an inner function that has access to outer function’s variables in addition to it’s own variable and global variables.In simple term a closure is a function inside a function.Closures using Lexical scoping in which function have access to global and outer variables.

In Typescript, the Asynchronous Module Definition (AMD) is used to specify a process for defining modules in a manner such that modules and their dependencies can be loaded asynchronously. This is greatly helpful in a browser environment where performance, usability, debugging, and access to cross-domain problems occur due to the synchronous loading of modules.

The two significant benefits that Arrow function in TypeScript offers:

• They are less verbose compared to traditional functions.
• This function takes the “this” from its surroundings.

TypeScript is strongly typed to syntactical benefits to this language while still allowing users to write normal JavaScript. It also ensures the production of predictable results with fewer errors and more secure.

In TypeScript, static typing means parameters, variables, and object members have types that compiler recognizes at the time of compile. This helps in detecting early errors faster than unit test runs. It also greatly helps IDEs with auto-completion and API exploration with statically typed DOM.

The prototype property in TypeScript allows users to include methods and properties to an object. It allows cloning objects (complex ones also) without coupling to their specific classes. Prototype objects can create full copies due to the accessibility of objects to each other’s private field.

In TypeScript, the callback function is used to schedule a call after some asynchronous processing is completed. It is passed to another function as a parameter that allows callback function to be called when the process of asynchronous processing is completed.

TypeScript developers can use the access modifiers to control the accessibility of the class members. There are two types of access modifiers in TypeScript; private and public modifiers. Class members are public by default, but users can add a private modifier if they wish.

Super is a TypeScript keyword which can be used by developers in expressions for base class constructor and base class properties reference. This call is only allowed in constructors of derived classes. Call for this keyword consist the keyword super with an argument list closed in parentheses.

In TypeScript, an extra line is added to the JS code using the export class which is then used to add an exported item within a module.

Yes, it's possible. To successfully merge multiple TS files together in a JS file, use a module bundler system or a Gulp Script to concatenate everything into a single JS file.

The export keyword is used to export any declaration such as function, variables, interface, or type alias. The export * from "module" can be used by a module to wrap one or more modules and combine together their exporting. Whereas, the import keyword is used to export declaration.

TypeScript uses the keyword ‘extends’ to support inheritance. The syntax will be as following:

class child_class_name extends parent_class_name

It’s a new type where you can define some properties to be excluded from the original type.

Classes, properties, methods, and method arguments.

It allows you to create a typed map .

Use the export keyword in front of the class.

When you don’t want to use the "any" keyword or/and don’t know the exact type up front but want to assign it later on.

1.var declaration is done at function scoped and let declaration is done at block scoped. 2.var will allow you to re-declare the same variable in the same scope, whereas let will not.

If child class has the same method as declared in the parent class, it is known as method overriding.

Rules for Method Overriding:

• The method must have the same name as in the parent class
• There must be an IS-A relationship
• The method must have the same parameter as in the parent class

By using a juggling check, we can check both null and undefined: if(x==null){}.

Semantic HTML is a type of coding style in which tags will have texts that need to display on the user interface. Bold, Italic tags should not be used to represent Semantic HTML.

Below are the components of TypeScript :-

• Language
• TSC-(TypeScript Compiler)
• TSLS- (TypeScript Language Service)

There are two extension’s – .tsx , .ts.

Tuple is collection of heterogeneous values or it store multiple different-different type data type values. Below is the example for the same.

var fileData = [“Alia”,90,”Shweta”,45];

• push() – this used to append the value.

• pop()- this used to removed and return the last value.

• String: A string is a series of characters that are stored as UTF-16 Unicode code.
• Number: It reflects the values of the number form. The numbers are stored as floating-point values in TypeScript.
• Boolean: This can have values as true or false.
• Array: This can be a list of numbers together.
• Enum: This allows creating a user-defined data type.

Like other programing languages Typescript also has support for Collection, like Map, Set etc.

Yes, it is possible. To debug it, you need the .js source map file. So compile the .ts file with the --sourcemap flag to generate a source map file. tsc -sourcemap file1.ts This will create file1.js and file1.js.map. And last line of file1.js would be reference of source map file.

sourceMappingURL=file1.js.map

Angularjs is already integrated with Typescript.So, if you are using Angularjs CLI you don’t need to do anything special. For React and jQuery use Typescript’s @types and it will install all the dependencies. @types/ React @types / jQuery.

var name:string; var phone:int;

var names:string[]; -- Declaration names=["a","b","c","d"] -- Initialization

Variable should be declared with union type if it can be set with values of different types. It can be useful when you need to return correct result or null value, for example in find function.

Through command line arguments or tsconfig.json file. If file tsconfig.json located in some directory, that means this root of TypeScript project. There are such options available: compilerOptions,files,typeRoots, include, exclude.

This is called union type in typescript.

A union type describes a value that can be one of several types.