Learn TypeScript w/ Mike North

JS/TS Warm-up Quiz

March 22, 2022

Table of Contents

Question 1

Compare and contrast the #name and age fields

ts
export class Person {
#name = ""
private age = 1
}
Try
Click here for the answer

Question 2

Which of the following variables (a, b, c, d, e) hold immutable values

js
const a = "Frontend Masters"
let b = "Frontend Masters"
 
const c = { learnAt: "Frontend Masters" }
let d = { learnAt: "Frontend Masters" }
 
const e = Object.freeze({ learnAt: "Frontend Masters" })
Try
Click here for the answer

a, b and e hold immutable values. Remember, const and let differ in terms of whether variables can be reassigned, but that has nothing to do with whether the values they hold can be modified.

Object.freeze prevents properties of an object from being changed, and prevents new properties from being added. This effectively is a “shallow immutability”.

Question 3

What’s the missing line of code that should replace /* ??? */

js
const str = "hello"
let val =
/* ??? */
console.log(val) // ['h', 'e', 'l', 'l', 'o']
Click here for the answer
js
const str = "hello"
let val = str.split("")
console.log(val) // ['h', 'e', 'l', 'l', 'o']
Try

Question 4

What’s the missing line of code that should replace /* ??? */

js
const str = "hello"
let val =
/* ??? */
console.log(val)
/**
* {
* '0': 'h',
* '1': 'e',
* '2': 'l',
* '3': 'l',
* '4': 'o'
* }
*/
Click here for the answer
js
const str = "hello"
let val = { ...str.split("") }
console.log(val)
/**
* {
* '0': 'h',
* '1': 'e',
* '2': 'l',
* '3': 'l',
* '4': 'o'
* }
*/
Try

Question 5

Look at the types of first and second below, as well as the compile error messages. What does your mental model tell you about how string and String are different?

ts
let first: string & number
let second: String & Number
 
first = "abc"
Type 'string' is not assignable to type 'never'.2322Type 'string' is not assignable to type 'never'.
second = "abc"
Type 'string' is not assignable to type 'String & Number'. Type 'string' is not assignable to type 'Number'.2322Type 'string' is not assignable to type 'String & Number'. Type 'string' is not assignable to type 'Number'.
second = new String("abc")
Type 'String' is not assignable to type 'String & Number'. Type 'String' is missing the following properties from type 'Number': toFixed, toExponential, toPrecision2322Type 'String' is not assignable to type 'String & Number'. Type 'String' is missing the following properties from type 'Number': toFixed, toExponential, toPrecision
Try
Click here for the answer Some things you may observe.
  • When using the primitive types string and number we can see that the union of these two types results in a never. In other words, there is no string that can be also regarded as a number, and no number that can also be regarded as a `string
  • When using the interface types String and Number, we can see that the union does not result in a never.

Question 6

Continuing the example from question 3. Explain what’s happening here.

Why is second = bar type-checking, but first = bar is not?

ts
let first: string & number
let second: String & Number
 
interface Foo extends String, Number {}
Interface 'Foo' cannot simultaneously extend types 'String' and 'Number'. Named property 'toString' of types 'String' and 'Number' are not identical.
Interface 'Foo' cannot simultaneously extend types 'String' and 'Number'. Named property 'valueOf' of types 'String' and 'Number' are not identical.
2320
2320
Interface 'Foo' cannot simultaneously extend types 'String' and 'Number'. Named property 'toString' of types 'String' and 'Number' are not identical.
Interface 'Foo' cannot simultaneously extend types 'String' and 'Number'. Named property 'valueOf' of types 'String' and 'Number' are not identical.
 
interface Bar extends String, Number {
valueOf(): never
toString(): string
}
 
let bar: Bar = {
...new Number(4),
...new String("abc"),
...{
valueOf() {
return "" as never
},
},
}
second = bar
first = bar
Type 'Bar' is not assignable to type 'never'.2322Type 'Bar' is not assignable to type 'never'.
Try
Click here for the answer Some things you may observe.
  • It seems like we can create an interface Bar that that has just the right shape to both comply with the String and Number interfaces
  • We can also successfully create a value bar, with only a little cheating via casting (as never)
  • This is why we want to stay away from the interfaces corresponding to primitive types, and stick to string and number

Question 7

In what order will the animal names below be printed to the console?

js
function getData() {
console.log("elephant")
const p = new Promise((resolve) => {
console.log("giraffe")
resolve("lion")
console.log("zebra")
})
console.log("koala")
return p
}
async function main() {
console.log("cat")
const result = await getData()
console.log(result)
}
console.log("dog")
main().then(() => {
console.log("moose")
})
Try
Click here for the answer

Answer: dog, cat, elephant, giraffe, zebra, koala, lion, moose

  • Are you surprised that giraffe and zebra happen so early? Remember that Promise executors are invoked synchronously in the Promise constructor
  • Are you surprised that lion happens so late? Remember that a resolve is not a return. Just because a Promise has resolved, doesn’t mean the corresponding .then (or await is called immediately)


© 2022 All Rights Reserved