Question 1
Compare and contrast the #name
and age
fields
tsTry
export classPerson {#name = ""privateage = 1}
Click here for the answer
#name
is a JS private field, and it’s actually inaccessible outside of the class at runtime. More about JS private fields here.age
is a TypeScript private field, and while type-checking helps ensure we do not access it improperly, at runtime it’s accessible outside the class. More about the TSprivate
access modifier keyword here.
Question 2
Which of the following variables (a
, b
, c
, d
, e
) hold immutable values
jsTry
consta = "Frontend Masters"letb = "Frontend Masters"constc = {learnAt : "Frontend Masters" }letd = {learnAt : "Frontend Masters" }conste =Object .freeze ({learnAt : "Frontend Masters" })
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
jsTry
conststr = "hello"letval =str .split ("")console .log (val ) // ['h', 'e', 'l', 'l', 'o']
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
jsTry
conststr = "hello"letval = { ...str .split ("") }console .log (val )/*** {* '0': 'h',* '1': 'e',* '2': 'l',* '3': 'l',* '4': 'o'* }*/
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?
tsTry
letfirst : string & numberletsecond :String &Number Type 'string' is not assignable to type 'never'.2322Type 'string' is not assignable to type 'never'.= "abc" first 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'.= "abc" second 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= new second String ("abc")
Click here for the answer
Some things you may observe.- When using the primitive types
string
andnumber
we can see that the union of these two types results in anever
. In other words, there is nostring
that can be also regarded as anumber
, and nonumber
that can also be regarded as a `string - When using the interface types
String
andNumber
, we can see that the union does not result in anever
.
Question 6
Continuing the example from question 3. Explain what’s happening here.
Why is second = bar
type-checking, but first = bar
is not?
tsTry
letfirst : string & numberletsecond :String &Number interfaceInterface '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.2320extends Foo String ,Number {}
2320Interface '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.interfaceBar extendsString ,Number {valueOf (): nevertoString (): string}letbar :Bar = {...newNumber (4),...newString ("abc"),...{valueOf () {return "" as never},},}second =bar Type 'Bar' is not assignable to type 'never'.2322Type 'Bar' is not assignable to type 'never'.= first bar
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 theString
andNumber
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
andnumber
Question 7
In what order will the animal names below be printed to the console?
jsTry
functiongetData () {console .log ("elephant")constp = newPromise ((resolve ) => {console .log ("giraffe")resolve ("lion")console .log ("zebra")})console .log ("koala")returnp }async functionmain () {console .log ("cat")constresult = awaitgetData ()console .log (result )}console .log ("dog")main ().then (() => {console .log ("moose")})
Click here for the answer
Answer: dog, cat, elephant, giraffe, zebra, koala, lion, moose
- Are you surprised that
giraffe
andzebra
happen so early? Remember thatPromise
executors are invoked synchronously in thePromise
constructor - Are you surprised that
lion
happens so late? Remember that aresolve
is not areturn
. Just because aPromise
has resolved, doesn’t mean the corresponding.then
(orawait
is called immediately)