Typescript

Question 1

TypeScript

Answer 1

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces and statically typed like C# or Java.

TypeScript is a strongly typed, object oriented, compiled language. It was designed by Anders Hejlsberg (designer of C#) at Microsoft.

Question 2

Declaration Files

Answer 2

When a TypeScript script gets compiled, there is an option to generate a declaration file (with the extension .d.ts) that functions as an interface to the components in the compiled JavaScript.

Question 3

Compiler flag & Description

Answer 3

1. –help
   Displays the help manual
2. –module
   Load external modules
3. –target
   Set the target ECMA version
4. –declaration
   Generates an additional .d.ts file
5. –removeComments
   Removes all comments from the output file
6. –out
   Compile multiple files into a single output file
7. –sourcemap
   Generate a sourcemap (.map) files
8. –module noImplicitAny
   Disallows the compiler from inferring the any type
9. –watch
   Watch for file changes and recompile them on the fly

Question 4

Type Guards

Answer 4

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.

is
typeof

Question 5

The never type

Answer 5

The never type in TypeScript represents the values that can never occur. For example, the return type of a function that throws an error is never.

function funcName(): never{
// it throws an exception or never returns
}

Question 6

void vs. never

Answer 6

In TypeScript, a variable of void type can store undefined as a value.

On the other hand, never can’t store any value.

let val1: void = undefined;

let val2: never = undefined; // error: Type ‘undefined’ is not assignable to type ‘never’.

Question 7

Union

Answer 7

Two or more data types are combined using the pipe symbol (|) to denote a Union Type. In other words, a union type is written as a sequence of types separated by vertical bars

let value: number | string | boolean;

Question 8

There are three types of the literal types in TypeScript.

Answer 8

String literal types

Numeric literal types

Boolean literal types

Question 9

Symbols

Answer 9

In TypeScript, a symbol is a primitive data type that is unique and immutable. The symbols are introduced in ECMAScript 2015 (also known as ES6).

As we use the number, string, or boolean to create the variables of different data-type, we can use the symbol type to create the Symbol.

Symbols are unique and immutable

Question 10

null vs. undefined

Answer 10

null:
Has its own type null
Must be handled explicitly in logic to avoid errors

undefined:
Triggers default function parameters
Indicates missing parameters or optional parameters

Question 11

Type Aliases

Answer 11

In TypeScript, type aliases is a way to define a type. It allows you to give a specific name to the type or define a custom type using the ‘type’ keyword.

type StringOrNumber = string | number;

Aliasing Tuples
The tuple alias is used to define the structure of the fixed-size array, which can contain specific types of values in a particular order.

Question 12

Optional Parameters

Answer 12

function functionName(para1:type1, para2?:type2): returnType{
// function body
}

Question 13

Extending Interfaces

Answer 13

One interesting feature of interfaces is the ability to extend them, allowing us to create a combination of interfaces. Extending an interface is also known as interface inheritance.

Use extends keyword to extend a single or multiple interfaces in TypeScript.

Question 14

Access Modifiers

Answer 14

Public:
The public members are accessible from anywhere within and outside the class that defines the member.

Private Access Modifiers:
A private access modifier restricts the access of ** the class member (property or method) to the class where it is declared.** When you add the private modifier to the property or method, you can access that property or method within the same class only.

Protected Access Modifiers:
The protected access modifier is used to define a protected class member (property or method). A protected data member ** is accessible only within the class that defines it or any class that extends it.**

Question 15

TypeScript - Readonly Properties

Answer 15

TypeScript provides us with readonly keyword to make a property in class, type or interface as read-only. The readonly properties can be accessed outside the class but their values can’t be modified.

Question 16

Abstraction Classes

Answer 16

The abstract classes are used to achieve abstraction in TypeScript. The abstract class contains only method declaration but not implementation.

We need to implement all abstract methods of the abstract class into the inherited class.

The abstraction is a way to hide the lower-level code implementation from users and some developers.

Furthermore, it is used to show only the required information about the method rather than showing the whole complex implementation of methods.

Question 17

Duck Typing

Answer 17

The circumstance where an object’s type is decided by its behavior, like methods and attributes, rather than its class is known as “duck typing”.

Question 18

Intersection Types

Answer 18

In TypeScript, an intersection type combines multiple types into one. Although intersection and union types in TypeScript are similar, they are used in very different ways.

type intersepted_Type = Type1 & Type2;

Question 19

Type Assertions

Answer 19

Type assertion is a mechanism in TypeScript that informs the compiler of the variable type

Using as operator
Using <> operator
Using object

Question 20

Generics

Answer 20

Generics are a powerful feature in TypeScript that allow you to write reusable code that can work with different types of data. They act like placeholders that can be filled with specific data types when you use the generic code. This improves code flexibility and maintainability.

Question 21

Namespace

Answer 21

A namespace is a way to logically group related code. This is inbuilt into TypeScript unlike in JavaScript where variables declarations go into a global scope and if multiple JavaScript files are used within same project there will be possibility of overwriting or misconstruing the same variables, which will lead to the “global namespace pollution problem” in JavaScript.

Question 22

Modules

Answer 22

A module is designed with the idea to organize code written in TypeScript.** Modules are broadly divided into −**

Internal Modules
External Modules

Question 23

Ambients

Answer 23

Ambient declarations are a way of telling the TypeScript compiler that the actual source code exists elsewhere. When you are consuming a bunch of third party js libraries like jquery/angularjs/nodejs you can’t rewrite it in TypeScript. Ensuring typesafety and intellisense while using these libraries will be challenging for a TypeScript programmer. Ambient declarations help to seamlessly integrate other js libraries into TypeScript.

Question 24

Decorators

Answer 24

Decorators in TypeScript are special kinds of declarations that can be attached to the class declaration, property, accessor, method, and parameters.

**It is used for the separate modification of the class without modifying the original source code. **This makes them a powerful tool in the domain of object-oriented programming, allowing you to write cleaner, more organized code that adheres to the DRY (Don’t Repeat Yourself) principle.

Question 25

Mixins

Answer 25

In TypeScript, mixins is a concept that allows us to extend a single class via multiple classes. This way, we can reuse the class components and combine their methods and properties in a single class.

Question 26

Utility Types

Answer 26

The Partial utility type transforms all the properties of the current type to optional. The meaning of the partial is either all, some, or none. So, it makes all properties optional, and users can use it while refactoring the code with objects.

Question 27

Boxing

Answer 27

Boxing is the process of wrapping a value type in an object type. In contrast, unboxing is the process of unwrapping an object type back to a value type.

Question 28

tsconfig.json

Answer 28

The TypeScript tsconfig.json file is a configuration file to specify the compiler options. These compiler options are used to compile the TypeScript code and convert it into JavaScript code.

compileOnSave
compilerOptions
files
include
exclude

Question 29

Runtime Behavior of typescript

Answer 29

TypeScript is also a programming language that preserves the runtime behavior of JavaScript.

For example, dividing by zero in JavaScript produces Infinity instead of throwing a runtime exception. As a principle, TypeScript never changes the runtime behavior of JavaScript code.

This means that if you move code from JavaScript to TypeScript, it is guaranteed to run the same way, even if TypeScript thinks that the code has type errors.

Question 30

Erased Types

Answer 30

Roughly speaking, once TypeScript’s compiler is done with checking your code, it erases the types to produce the resulting “compiled” code. This means that once your code is compiled, the resulting plain JS code has no type information.

This also means that TypeScript never changes the behavior of your program based on the types it inferred. The bottom line is that while you might see type errors during compilation, the type system itself has no bearing on how your program works when it runs.

Question 31

Short for typescript

Answer 31

TypeScript is JavaScript’s runtime with a compile-time type checker.

Question 32

Explicit Types

Answer 32

We tell the program what is the type

Question 33

Differences Between Type Aliases and Interfaces

Answer 33

Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable

extending:
Extending a type via intersections
Extending interface through extends

adding field:
Adding new fields to an existing interface- just the same as parent

A type cannot be changed after being created

A TYPE CANNOT BE CHANGED AFTER BEING CREATED!

Question 34

Type Assertions

Answer 34

Sometimes you will have information about the type of a value that TypeScript can’t know about.

In this situation, you can use a type assertion to specify a more specific type:
as HTMLCanvasElement;

using <> or as

The developer knows what type the value is

Question 35

Non-null Assertion Operator (Postfix !)

Answer 35

TypeScript also has a special syntax for removing null and undefined from a type without doing any explicit checking. Writing ! after any expression is effectively a type assertion that the value isn’t null or undefined:

The developer says: trust me, it wont be null

Question 36

Enums

Answer 36

Enums are a feature added to JavaScript by TypeScript which allows for describing a value which could be one of a set of possible named constants.

Question 37

Primitive types

Answer 37

string,
number,
boolean,
bigint,
symbol

SSBBN

Question 38

typeof- type guards return types

Answer 38

“string”
“number”
“bigint”
“boolean”
“symbol”
“undefined”
“object”
“function”

Question 39

Falsy values

Answer 39

0
NaN
“” (the empty string)
0n (the bigint version of zero)
null
undefined

Question 40

The in operator narrowing

Answer 40

Helps to check, if a key exists in object

Question 41

Instanceof vs typeof

Answer 41

Use instanceof for custom types
Use typeof for simple built in types

Operator instanceof sprawdza, czy dany obiekt jest instancją określonego typu (konstruktora). Innymi słowy – analizuje łańcuch prototypów (prototype chain) i sprawdza, czy dany obiekt został utworzony danym konstruktorem.

Operator typeof zwraca typ obiektu; sprawdza, czy dany obiekt jest typu prymitywnego (prostego), czy jest czymkolwiek innym (obiektem).

Question 41

is in functions

Answer 41

we take any value, check if the value is a type of and then return a value

Question 42

Function Overloads

Answer 42

Some JavaScript functions can be called in a variety of argument counts and types. For example, you might write a function to produce a Date that takes either a timestamp (one argument) or a month/day/year specification (three arguments).

In TypeScript, we can specify a function that can be called in different ways by writing overload signatures. To do this, write some number of function signatures (usually two or more), followed by the body of the function:

same function name, different constructor

Question 42

Rest Parameters and Arguments

Answer 42

In addition to using optional parameters or overloads to make functions that can accept a variety of fixed argument counts, we can also define functions that take an unbounded number of arguments using rest parameters.

we can have as many parameters as we want

Question 43

ReadonlyArray

Answer 43

The ReadonlyArray is a special type that describes arrays that shouldn’t be changed.

Question 44

Tuple Types

Answer 44

A tuple type is another sort of Array type that knows exactly how many elements it contains, and exactly which types it contains at specific positions.

Question 45

Decorators

Answer 45

A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter.

Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.

Question 46

JSX

Answer 46

JSX is an embeddable XML-like syntax. It is meant to be transformed into valid JavaScript, though the semantics of that transformation are implementation-specific. JSX rose to popularity with the React framework, but has since seen other implementations as well. TypeScript supports embedding, type checking, and compiling JSX directly to JavaScript.