Click ⭐️ if you like the content. Pull Request are highly appreciated.
Follow dotnetcrunch for more.
TypeScript is an open-source object-oriented programming language developed and maintained by Microsoft. It is a superset of JavaScript.
TypeScript is designed for the development of large applications and transpiles to JavaScript.
TypeScript is an attempt to fix JavaScript problems.
Since we all know that JavaScript is the only language used in client-side scripting as browsers can only understand JavaScript.
Since TypeScript simplifies JavaScript code, making it easier to read and debug. It saves developers time and increases productivity.
Benefits of using TypeScript:
- Integrates well with React, Vue, and Angular.
- Is a statically typed language and this makes the code easier to refactor.
- Is easier to read and access. Helps in code maintainability.
- Has a powerful type system, including generics.
- Gives all the benefits of ECMAScript 6, thus improves productivity.
- Statically typed programming languages are those in which the type of a variable is known at compile-time instead of at run-time.
There are two ways to install typescript:
Using npm (Node Package Manager) Install the TypeScript plugin in your IDE
> npm install -g typescriptYou can also install a typescript plugin available for your IDE. You can use IDE of your choices such as VS Code, Visual Studio, Atom, or Sublime Text.
TypeScript totally follows the OOPS (Object-Oriented Programming System) concept and with the help of TSC (TypeScript Compiler), we can convert Typescript code (.ts file) to JavaScript (.js file).
Typescript supports the four pillars of any object-oriented programming language that are – Abstraction, Polymorphism, Inheritance, and Encapsulation.
Typescript supports Any, Built-in, and User-defined data types.
Any is the superset for all the data types available. It means that the variable could be of any type. It will override the type checking.
The Built-in types include string, number, boolean, undefined, null, and void.
The User-defined types include array, enum, interface, class, union, and tuple.
A module is a way to construct a local scope in a file. So that all the classes, variables declared in a module are not accessible outside the module.
We can create a module using the export keyword. A module in typescript can be used in another module using the import keyword.
Using namespace we can group logically related code. This is built into typescript, unlike javascript. A namespace can include classes, interfaces, functions, and variables.
We can create a namespace in typescript using namespace keyword followed by any valid name.
For Example:
namespace MyNamespace {
}In Typescript, a function can be created as a named function or anonymous function. We can further add types to each of the parameters and to the function as well.
// Named function
function add(a: number, b: number) : number {
return a + b;
}
// Anonymous function
let funcAdd = function(a: number, b: number): number { return a + b; };If we want to write the full type of the function:
let funcAdd: (a: number, b: number) => number =
function (a: number, b: number) : number { return a + b; };This is an additional Type assertion syntax. The reason for including the as syntax in typescript was that conflicted with JSX.
let strLength: number= (someString as string).length;The difference between readonly and const is: const is used on a variable whereas read-only is used on properties of an object.
Static properties are those that are shared by all the instances of a class and they can be accessed via the class name and dot operator.
class Singleton {
static counter = 0;
constructor() {
Singleton.counter++;
}
}
var singleton = new Singleton();
console.log(Singleton.counter); //1There are 3 types of access modifiers in TypeScript: public, private, and protected.
By default, all the members of a class are public in TypeScript.
When any of the class members are declared private, it is only accessible within the class scope.
The protected members are similar to private access modifiers, except that they are accessible in the derived class.
Sometimes, we want to work with multiple parameters as a group, or we may not know how many parameters a function will ultimately take. In JavaScript, we have something known as arguments. Similarly, we have Rest parameters in typescript.
Rest parameters are treated as a boundless number of optional parameters. The compiler will build an array of the arguments passed in with the name given after the ellipsis (…)
function getPlayersList(name:string, ...players: string[]) {
return name + " " + players.join(" ");
}
let players = getPlayersList("Virat", "MS", "Warner", "Kane", "Ben")Generics in Typescript is no different than generics in other programming languages like C# or Java.
You can create a class, an interface, or a function that works with different types, without specifying the type upfront.
function greet(a : T) {
console.log(`Hi ${a}!`)
}
greet('DS'); //function callThe symbol T identifies a generic type.
A module is a way to construct a local scope in a file. So that all the classes, variables declared in a module are not accessible outside the module.
👉 We can create a module using the export keyword. 👉 A module in typescript can be used in another module using the import keyword.
export class Student {
readonly Id: number;
Name: string;
constructor(id: number, name: string) {
this.Id = id;
this.Name = name;
}
}
let Subject: string = "Computer Science";Yes, JSX is an embeddable XML-like syntax.
In order to use JSX, we must name our file with a .tsx extension and should enable jsx option.
Decorators are functions that modify a class, property, method, or method parameter. The syntax to define decorators is “@”.
In other words, Decorators are functions that take their target as the argument.
Triple-slash directives are single-line comments containing a single XML tag. The contents of the comments are used as compiler directives.
/// <reference path = "filename.ts" />Triple-slash directives are only valid at the top of their containing file.
The typescript project will have a ts.config file which provides an infinite number of ways to customize the behavior of the compiler. typescript interview questions
Yes, it is possible using --watch option while compiling the typescript file for the first time.
tsc --watch filename.tsThe declare keyword is used for ambient declarations and methods where you want to define a variable that may exist elsewhere.
If we want to use any library in our TypeScript code, we can use the following code:
declare var myAlexaLibrary;TypeScript Definition Manager (TSD) is a package manager used to search and install typescript definition files directly from the community-driven DefinitelyTyped repository.
Now, if you want to use some jQuery code in your .ts file:
$(document).ready(function() { //Your jQuery code });Here, when you try to compile it by using tsc, it will give a compile-time error: Cannot find the name “$”.
So, you need to inform the TypeScript compiler that “$” is belongs to jQuery.
To do this, TSD comes into play. You can download the jQuery Type Definition file and include it in our .ts file.
To debug any TypeScript file, we need a .js source map file. So, we have to compile the .ts file with the --sourcemap flag to generate a source map file.
$ tsc -sourcemap filename.tsThis will create a filename.js and filename.js.map. And the last line of filename.js would be a reference to the source map file.
//# sourceMappingURL=filename.js.mapWe hope that you like the above-listed TypeScript interview questions.
All the best for your preparation 😊
You can also share this list of typescript interview questions and answers with your friends with the help of the below-sharing options.
In case you are interested in a step by step typescript tutorial then navigate to our tutorial space:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent