Typescript

Question 1

What is Typescript and why would we use it?

Answer 1

Its a Javascript Superset.
Its a language building up on Javascript. Adding new features on Javascript.

Typescript cant be executed by Typescript. Node.Js also cant execute typescript. Its a compiler you run on top of your code to which outputs Javascript.

It also adds Types to your Javascript with errors during compile time.

You would add Typescript in the case where you want to make sure that your code is typesafe.

Question 2

In Javascript and HTML, what are the types of an input?

Answer 2

Its always a string that gets passed from the browser.

Question 3

How do you check for types in Javascript?

Answer 3

typeof var1 === ‘number’.

Question 4

what is === in Javascript?

Answer 4

It checks value and type.

Question 5

Who made Typescript?

Answer 5

It was developed by and is maintained by a team at microsoft.

Question 6

Why do you need Node.js for Typescript?

Answer 6

You need it to get NPM which is the tool that is used to install typescript.

Question 7

How do you compile a typescript file to javascript?

Answer 7

you run the tsc command.

Question 8

How do you tell typescript you will always find an element as an input element?

Answer 8

document.getElemebtById(“num1”) as HTMLInputElement;

as HTMLInputElement is called typecasting.

Question 9

What is the syntax for specifying type on a function input?

Answer 9

function add (num1: number, num2: number)

Question 10

What is Javascript for converting text to number

Answer 10

+ e.g. +textvalue.

Question 11

what is defer in the script tag.

Answer 11

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded . Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.

With defer the browser can find the script slightly sooner than the preload scanner would, and then it can prioritize/download it in parallel while the DOM is parsing.

This means that the DOM can be completely parsed & domInteractive fires while the JS could still be getting downloaded, rather than waiting till after the JS comes back and gets parsed & executed.

In short: with defer on a script in the head, the JavaScript file will download in the background while the rest of the DOM is parsed and rendered. When you get to the bottom of the page, the JS file is already downloaded and ready to run.

If you have any noncritical JavaScript file, or any code that depends on the DOM being rendered to run, load it in the head with the defer attribute.

Question 12

What is the basic setup process for a new project.

Answer 12

1 - Html file with script tag referening a javascript file.
2 - Scripts.ts file that will get compiled into js.
3 - NPM needs to be installed to manage the packages and dependencies required. Download it from the NPM website.
4 - Use NPM to install Typescript on your machine.
5 - you can compile typescript with the console. TSC app.tsx
6 - initialise the node package with node init. This creates the packages.json file which lists all the dependencies required to run the project. you can install depdencies as dev only etc..

Question 13

How do you install and a dependency for developmet only?

Answer 13

npm install –save-dev

Question 14

How do you run a script when the app starts?

Answer 14

add a start section in scripts the package.json file.

scripts:{
start: “lite-server”
}

Question 15

How do you install a new dependency in your project?

Answer 15

With NPM.

For something that is dev only:

npm install –save-dev {tool name}

This will add a new line to “devDependencies” section in package.json.

Question 16

How do you start a project?

Answer 16

NPM needs to start it since it knows the dependencies.

you type - npm start. (in your project folder)

Question 17

What is node_modules folder and how do you create it?

Answer 17

Its a massive folder for all dependencies and their dependencies. Its created with the npm install command. you dont need it to be copied over.

Question 18

What are the different number types in typescript?

Answer 18

There is only one number type. no integers or anything else.

Question 19

How do you write a template literal string?

Answer 19

text

Question 20

What are the core types in Javascript and TS and what are extra in TS?

Answer 20

number (all numbers are float by default)
string
boolean
object
arrays
XTRA in TS:
Tuple
Enum - automatically enumerable global constant identifiers.
ANY
Union -

Question 21

What is statically typed? Why is it significant for TS?

Answer 21

Statically typed is a programming language characteristic in which variable types are explicitly declared and thus are determined at compile time. This lets the compiler decide whether a given variable can perform the actions requested from it or not.

In static typing, there is no need to perform additional checks during run time to confirm that an object can perform some actions. Statically typed programming languages perform type checking during the course of compilation rather than during run time, which makes programs written in these languages run much faster.

Typescript uses static types set during development, JavaScript uses Dynamic Types resolved at runtime.

Question 22

what case are the core primitive values?

Answer 22

Always lowercase e.g. string and number not String and Number.

Question 23

What is type inference?

Answer 23

Typescript has a feature called TypeInference which means it does its best to understand if you have a type and it tries to infer what the type is from the value.

Question 24

What is const vs let?

Answer 24

const means that a value is always the same. It can never change.

let is how you assign a variable.

Question 25

Why are “Types” useful and offer an advantage compare to vanilla JavaScript?

Answer 25

It allows you to detect errors early and avoid SOME runtime errors

Question 26

Will the following code throw a compilation error?

let userName: string;
userName = ‘Maximilian’;
userName = false

Answer 26

Yes

Question 27

Does this code rely on type inference?

const age: number = 29;

Answer 27

No, type is assigned explicitly as well.

Question 28

What’s the difference between JavaScript types (e.g. typeof ‘Max’ => ‘string’) and TypeScript types (e.g. const name: string = ‘…’)?

Answer 28

Types are checked during compilation vs runtime. TS does compilation checks.

Question 29

How are objects defined in Javascript?

Answer 29

{age:30} is an object.

Question 30

What is the difference between how a JAvascript object and a TS Object type definition is wrote?

Answer 30

var human = {
eyes: 2,
mouth: 1
};

const human:{
eyes:int;
mouth:int;
}

Question 31

How do you assign a Type to an object in typescript?

Answer 31

const person: object {
…
}

Question 32

How do you define an object in Typescript with its properties?

Answer 32

const person: {
name: string;
age: int
} = {
name: "Cilliers",
age: 33
}

you can also give your properties limited values like:
const person: {
name: string;
age: 30 <== typescript will error if age is not set to 30...
} = {
name: "Cilliers",
age: 33
}

Question 33

How is an array defined and what is interesting about type support?

How do you define an array type object in TS?

Answer 33

[1,2,3] - Arrays can be flexible or strict…. they can have a mix of values.

in TS:
let favActivities: string[]; <== fav activities is type string array

for mixed arrays:
let favActivities: any[];

Question 34

What is a Tuple in TS with an Example?

Answer 34

Fix length and type array.

role: [number,string]
role: [2,’author’]
this will be a property of an object role:(string|number)[]

array would be:
role: string[]

Question 35

What is meant by inference with an object and how do override TS’s inference?

Answer 35

const person:{
 name: string;
role: [number,string]
}
={
name: 'Max',
role: [1,'admin']
}

Question 36

What quirk exist with adding values to a Tuple?

Answer 36

tupleExampleProp: [number, string]
you cant incorrectly assign a value to an tuple like this:
tupleExampleProp[1] = [‘10’]

you can use push though.

tupleExampleProp.push(‘admin’)

This is a JS quirk.

Question 37

How do you define an enum and why is it better than using constant values?

Answer 37

defined:
enum Role {
ADMIN, WHATEVER
};

you can also give it a value like:

Role { Admin = ‘Admin’, READ_ONLY = 100 }

You can use 
const ADMINROle = 1
but that means in your objects you can assign any int still. Enum makes it easier to be consistent about the values you assign.

Question 38

What is the ANY type?

Answer 38

you can basically assign any type to a variable TS wont complain.

Question 39

What is the union type and how is it declared?

Answer 39

It allows you to give an option to a type, making it one or another type.

function combine (input1: number | string, input2: number | string){
}

Question 40

What is the benefit of having a separate file linked for JS vs inline script?

Answer 40

Well, maintainability. Its easier to find scripts in one location.

The browser also caches script files.

Question 41

Can you have src and code inside a script tag?

Answer 41

No, only of of these will work. This means if the script has a “src” attribute the content inside the script tag is ignired.

Question 42

Write the syntax for linking script in a page

Question 43

What is the definition of a Statement in JS and how are they separated?

Answer 43

Statements are syntax constructs that perform actions.
alert (“”)
is a statement.

They are separated with a ;

JS does allow them to be separated with a linebreak. Its called automatic semicolon insertion.

Question 44

When does a newline not mean semicolon?

Answer 44

When the line ens with something that is expected to be followed by something else. Like a + sign.

Question 45

How are one-line and multi-line comments made?

Answer 45

one-line comment is: //

Multi-line comments are: /* */

Question 46

What is “use strict” and the context for it?

Answer 46

ECMAScript 5, is a way to opt in to a restricted variant of JavaScript.

New features were added to the language while old functionality didn’t change.

That had the benefit of never breaking existing code. But the downside was that any mistake or an imperfect decision made by JavaScript’s creators got stuck in the language forever.

This was the case until 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and modified some of the existing ones. To keep the old code working, most such modifications are off by default. You need to explicitly enable them with a special directive: “use strict”.

Please make sure that “use strict” is at the top of your scripts, otherwise strict mode may not be enabled.

Question 47

What changes does strict mode bring?

Answer 47

Strict mode makes several changes to normal JavaScript semantics:

• Eliminates some JavaScript silent errors by changing them to throw errors.
• Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that’s not strict mode.
• Prohibits some syntax likely to be defined in future versions of ECMAScript.

–> Should do a deeper dive here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

Question 48

Should you use strict mode?

Answer 48

Modern JavaScript supports “classes” and “modules” – advanced language structures (we’ll surely get to them), that enable use strict automatically. So we don’t need to add the “use strict” directive, if we use them.

So, for now “use strict”; is a welcome guest at the top of your scripts. Later, when your code is all in classes and modules, you may omit it.

Question 49

How do you envoke strict mode?

Answer 49

1) Add it to the top of a script - This will add it to the whole script….
2) Add it to the top of a function.
3) Modules in ES5 already use struct mode. All modules are strict by default.
4) All part of ES Classes are struct by default.