Typescript

Question 1

What is Typescript

Answer 1

It’s a super set of Javascript. Typescript is transpiled to Javascript, the version of Javascript (ES version) is according to the tsconfig configuration. Typescript enhances Javascript with static type checking and some class features such as abstract classes and the public, private, protected and abstract modifiers.

Question 2

What is a superset of a language

Answer 2

It means that all the code of the language it is a superset of is valid in the superset, but it adds more features

Question 3

What is static type checking

Answer 3

Typescript allows a developer to annotate the types that are expected for variables and for values returned by functions, methods in classes etc. It gives linting errors when variables are used in ways that are not valid. For example string has a length property, but null doesn’t.

Question 4

How do you install Typescript

Answer 4

npm i –save-dev typescript, then npx tsc is available.

Question 5

How do you configure typescript

Answer 5

The tsconfig file in root of project

Question 6

How to compile typescript

Answer 6

tsc filename.ts

Question 7

What do you call the set types

Answer 7

Type annotations

Question 8

Example types

Answer 8

For primitives:

The same as the Javascript built-in constructors such as String, Number, Boolean, but lower-cased. Also null or undefined.

Tupels
Arrays as generics or not
Type aliases
Interfaces
Union types
Literal types
Intersection types
null
undefined
unknown
any
never
object - bad practice
void

Question 9

What is type inference?

Answer 9

Typescript an infer types by the values assigned OR the return of a function.

With primitives, Typescript can figure out if a variable is a string, number, boolean, undefined or null, based on what is assigned to it.

With function return values as well as arguments with default values, inference can also occur:

function someFunc(num=10){
return 10*2
}

Typescript can even infer an object type and an array type

Question 10

Explain any type

Answer 10

If you set a variable to ‘any’ then it can be of any value.

Question 11

When can a type implicitly be any

Answer 11

With delayed initialization, where a variable is not assigned a value or annotated with type annotation, for example:

let someVariable;

Also function argument/parameter without annotation without default value

Question 12

How to annotate function args/params, and return values without inference

Answer 12

function(num:number):string{
return num.toString();
}

Question 13

Return value annotations explained

Answer 13

Best to not infer only, but rather annotate. Reason, function could be long, and it just makes it easy to see what it should be. Also, linting is improved, also where the function in invoked.

Question 14

Union type example

Answer 14

string|number

Question 15

What is void

Answer 15

When a function returns nothing OR nullish (null/undefined) a type annotation of void is valid.

If there is no ‘return’ statement then it will have a value of undefined as the return value

Question 16

Explain anonymous function contextual typing

Answer 16

Inference can take place because of the context of where it’s called

[‘green’,’red’,’blue’].map(color=>{})

Typescript knows that color is a string

Question 17

Quirky behaviour on excess object properties

Answer 17

When a type is defined for an object as a function argument, passing in excess properties inline will result in linting error.

However if assigned to a variable and then passed in it’s fine.

Question 18

Two ways of annotating object properties

Answer 18

As an interface or as a type alias

Question 19

What is a type alias

Answer 19

A type that can be used similar to a variable in that it can be assigned in multiple places

Example:

type SomeType = string;

type Person ={
name:string;
age:number;
}

Question 20

Convention for type alias and interface names

Answer 20

Make it PascalCase

Question 21

Explain optional types

Answer 21

Use ? in front of :

type Person={
name?:string;
}

This means that name can be string OR undefined

Question 22

Readonly modifier

Answer 22

Ensure that an object property value cannot be overwritten, only read

type User = {
readonly id: string;
}

OR

interface User {
readonly id:string;
}

const user:User = {
id:’234234’
}

user.id=’3333’ // results in error

class UserObj implements User {
//cannot be updated within class, or outside of class
readonly id:string;
}

Question 23

Example intersection type

Answer 23

type User={
id:string;
}

type Profile={
name:string;
}

type UserProfile=User&Profile

results in

{
id:string;
name:string;
}

Question 24

Example array types - both syntaxes

Answer 24

const numbers:number[]=[1,2,3]
const numbers : Array<string></string>

type User ={name:string}
const users:User[] = [{name:’Albert’}]

Question 25

What are literal types

Answer 25

Exact values assigned to type for example: const names : 'albert'|'lucas'

Question 26

Multi-dimensional array example

Answer 26

const something:string[][]=[ ['a','b'], ['c','d','e'] ]

Question 27

What is type narrowing

Answer 27

It's the way that Typescript is able to narrow a type in a certain code-block to a certain type based on `if` statements that check the types in some way.

Question 28

Syntax for union type with arrays

Answer 28

const someVar:(number|string)[]=[1,'1']

Question 29

Explain primitive types

Answer 29

Same as builtin javascript constructors like new Boolean(), new String(), new Number() boolean, string, number Also undefined and null That is, not objects or arrays.

Question 30

What is a tupel

Answer 30

It's a type that annotates array index values, with an array of a fixed length const someValue :[number,string]= [5,'whatever']

Question 31

Tupel quirky behaviour

Answer 31

You can push extra elements onto an array, and Typescript won't complain about it. Same with popping.

Question 32

Explain enums

Answer 32

Set of named constants. Values can be numbers or strings. For example: enum SomeEnum { YES='yes', NO='no' } enum SomeEnum { YES=0, NO=1, } Use it as SomeEnum.yes or SomeEnum.no If values not given per constant, it defaults to 0-based index values like an array If first item is set to for example 9 then the following items increment from there.

Question 33

Purpose of interface

Answer 33

You can define the shape of an object, like an object literal, like type aliases. However a class is meant to implement an interface. Then the class needs to implement the properties and the methods as defined in the interface. An interface is what the client can interface with, when implemented on a class. This is why all properties and methods can only be public (publically accessible by the client)

Question 34

Example of an interface

Answer 34

interface User { readonly id:string; sayName(someVar:string):string; saySurname:()=>string; surname?:string; age?:20; }

Question 35

Reopening interfaces

Answer 35

Interfaces are combined if two of them have the same name in the same context. interface Dog { name:string; } interface Dog { bark():string; } Dog is NOW interface Dog{ name:string; bark():string; }

Question 36

Which modifiers are allowed on an interface?

Answer 36

Only readonly. If the encapsulation modifiers are not set, then it defaults to public. An interface can be seen as a contract, and you can specify which methods and properties should be available from outside the class (the client). It sets what the client has available when interfacing with the class.

Question 37

What is the difference between a class and an object

Answer 37

An object is an instance of a class. A class is a blueprint of the object.

Question 38

Explain super

Answer 38

It's important to invoke super() in the constructor of the child class, even if the parent class doesn't need values to be sent to it from the child via super() super() allows a child class to send data up to the parent class' constructor.

Question 39

How do you create private properties and methods in Javascript (ES6)

Answer 39

Type the octothorp (#) just before properties and methods that are meant to be private

Question 40

What is an abstract class - not available in Javascript, just Typescript

Answer 40

Use the abstract keyword before the class keyword. An abstract class cannot be instantiated. Would usually be used in tandem with static methods, if the class only contains static methods. Another use case is for abstractions, where a child class must implement all abstract properties and methods in an abstract parent class.

Question 41

Explain accessors

Answer 41

Object accessors are getters and setters. It makes it possible to update an object's private properties and to retrieve them without making them public. It makes it possible for the creator of the class to enforce encapsulation and to only expose what is neccessary and it makes it possible to define an interface that the class exposes for manipulation from outside.

Question 42

Getters and setters syntax

Answer 42

For the same property/properties, create a get something(), set something() method. In the setter, update a value. In the getter return the value. Now from outside you can const car = new Car(); car.model='ford'; // calls setter console.log(card.model) //calls getter

Question 43

Explain inheritance

Answer 43

One class can inherit, via the extends keyword, public/protected properties and methods from a parent class. Interfaces can also inherit from each other. Javascript doesn't support protected properties and methods, but Typescript does.

Question 44

Explain static methods and properties

Answer 44

You can access public static methods without a class instance. Validation.isEmail(). Validation is the class.

Question 45

What is parameter properties shorthand?

Answer 45

Short hand for setting properties via constructor constructor(public name:string, private surname:string){}

Question 46

What are the public, private and protected keywords called?

Answer 46

Modifiers

Question 47

What is the readonly keyword called

Answer 47

Modifier

Question 48

Explain unkown type

Answer 48

It's similar to any BUT, it's more restrictive. Typescript expects you to do type-narrowing to prevent linting errors.

Question 49

What is type narrowing

Answer 49

It is Typescript's ability to determine what a type assigned to a variable would be in a given context, based on `guards` (if statements)

Question 50

Type narrowing examples

Answer 50

These if statements are called `guards` Typeof guards - if statements for primitives equality narrowing - === OR == if statements truthiness guards - narrowing out null/undefined with if statements The in operator : 'name' in user (user is object) class or literal Instanceof operator - checking if object is an instance of a given class: myVar instanceof User for example Type predicates

Question 51

Explain type predicates

Answer 51

A reusable function to determine whether a variable is of a certain type and enforce type narrowing with the 'is' keyword. Syntax: const isCat = function(animal:Cat|Dog) animal is Cat { // logic to check it this is a CAT, and return true or false }

Question 52

Explain generic functions

Answer 52

It allows the developer to create a function, stating that the type can be anything, or of a certain type (type constraint - using extends wit type alias or interface), and when the function is invoked, the type can be specified. Typescript is also to infer types based on the args given if the generic function has been created. Works for args and return type You can also set a default if the type is not given when invoked.

Question 53

Quirk with tsx file and generic

Answer 53

When it's an arrow function, add a comma after the generic for example so that Typescript knows it's not JSX

Question 54

Generic naming convention

Answer 54

start at T, next U, V etc

Question 55

How to set default type for generic type parameters

Answer 55

for example

Question 56

How do you add generic parameters to class

Answer 56

Add generic type after class name and use it within class class MyClass{ something:T; }

Question 57

What are type assertions

Answer 57

You can tell Typescript that a variable is of a certain type. Basically changing it from one type to another. Example: ` const myVar:unknown = 10; const secondVar = myVar as number; // secondVar is now a number `

Question 58

non-null assertion operator

Answer 58

If you know for a fact that something is not null or undefined (nullish), then you can tell Typescript by using an exclamation mark post-fix. const btn = document.getElementById('btn')!; OR const btn = document.getElementById('btn'); btn!.addEventListener() ....

Question 59

What are utility types

Answer 59

Think of them as `functions` that can manipulate existing types in order to make new types. Examples would be `Pick<>` to only pick the properties you'd like. ` type User{ name:string; age:number; password:string; } type OtherType = Pick `

Question 60

How to annotate an object with dynamic properties

Answer 60

type SomeType={ [key:string]:number, }

Question 61

Example using enums as object properties

Answer 61

enum SomeEnum { ACTIVE='active', INACTIVE='inactive', } const someObject = { [SomeEnum.ACTIVE]:true, [SomeEnum.INACTIVE]:false, }

Question 62

If an access modifiers is not given for a class method or a property, what is the default?

Answer 62

Public

Question 63

Explain public, private and protected methods and properties

Answer 63

Public, can be accessed outside of the class via dot notation Private, can only be accessed within the class via dot notation Protected, a parent class' protected properties and methods can be accessed by the parent and the children classes that inherit from the parent class.

Question 64

ES6 getters and setters

Question 65

Dynamically create type based on object shape