DEV Community: Andy Li

"Strict Mode" TypeScript config options

Andy Li — Mon, 25 Jan 2021 02:31:02 +0000

You can enable the "strict mode" in TypeScript by using the strict option. (BTW, TypeScript is the superset of the .. the most popular programming language in the world~)

For example, here's a sample tsconfig.json file where the strict option is set to true:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [ "esnext" ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true, // HERE
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "noEmit": true
  },
  "include": [
    "src"
  ]
}

This article isn't about TypeScript for absolute beginners, this is for intermediate users. However, we are not going to cover all of the configuration options, we're just going to talk about one, the strict option.

So what's strict?

The strict option will subject your code to stricter rules in terms of static type checking. Stricter means safer, so it's a good thing. The special thing about this strict option is that, it's actually a shortcut for a set of seven different options.

The seven options are:

noImplicitAny
noImplicitThis
alwaysStrict
strictBindCallApply
strictNullChecks
strictFunctionTypes
strictPropertyInitialization

So yeah, I lied. We're not just going to talk about one configuration option, we're going to talk about seven of them!!!

Before we begin, replace this in the config:

  "strict": true,

with these guys:

  "noImplicitAny": true,
  "noImplicitThis": true,
  "alwaysStrict": true,
  "strictBindCallApply": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "strictPropertyInitialization": true,

We are doing it this way so that you can easily toggle each individual one on and off to see its effect.

Now let's begin!

1. noImplicitAny

It makes sure that you can't just use "JavaScript," it forces you to use "TypeScript."

So you can't just do this:

function double(x){
  return x + x
}

tsc or VS Code will give you an error.

x will be typed any, and it's implicit (implicit means you didn't assign it yourself), that goes against the noImplicitAny rule.

To fix this, you should give it a type, any is fine too:

function double(x: any){
  return x + x
}

Since now it's explicit, not implicit.

If you're fine with implicit any, you can just set this option to false.

2. noImplicitThis

With this option, you can't use this directly like this inside a function:

function print(x){
  console.log(this, x)
}

So what's wrong with this?

this is typed any implicitly.

So to fix this problem, we have to make this the first argument:

function print(this, x){
  console.log(this, x)
}

Don't worry, you can still use the function normally like this:

print('Hello')

No need to pass in the this reference yourself.

3. alwaysStrict

You know how ES5 allows you to write code in a strict mode by placing a string on top of a file:

"use strict";

Turning on this option will make every compiled .js file to have this as the first line.

4. strictBindCallApply

Let's say you have a function like this:

function foo(a: number, b: string) {
  console.log(a + b);
}

Calling the function like this will give you an error:

foo(1, 2) // error

Because the second variable has to be a string.

But if you're setting the strictBindCallApply option to false, you can call the function like this without error:

foo.apply(undefined, [ 1, 2 ])

This is a loophole, and this loophole can make your code buggy. The strictBindCallApply option is used for fixing this loophole.

By setting strictBindCallApply to true, you get the helpful type checking error again:

foo.apply(undefined, [ 1, 2 ]) // error

5. strictNullChecks

This option makes sure that you can't assign null or undefined to a variable of an existing type:

let num = 1;
num = null; // error

So in the above code, the variable is inferred to be a number type, so you can't reassign it with null.

6. strictFunctionTypes

This one is a bit elaborate, I'll have another article talking about this specifically. But in short, it's about making the function types contravariant instead of the default bivariant behavior.

7. strictPropertyInitialization

This is an option for creating a class. Declared members of a class need to be assigned with values, either in the constructor or directly in the declaration.

class Foo {

  bar: string
  bar2: number // error

  constructor(){
    this.bar = 'Hello'
  }
}

bar doesn't raise an error because it's been initialized with 'hello' in the constructor, but bar2 isn't initialized.

Bottom Line

Strict TypeScript is good, and it makes sense. If you want a simpler life, just set the strict option to true and fix the any type error raised by VS Code.

Constructor, Prototype, and Their Instance: Relationships

Andy Li — Sat, 23 Jan 2021 05:21:07 +0000

This article is going to use a relationship-oriented approach to dissect the prototypical OOP system of the .. the most popular programming language in the world~

Even if you're using the ES6 class syntax, that's just the surface, constructor and prototype are still doing their thing under the hood. So the prototypical system that I'll be talking about in this article is still relevant today and in the future.

The four relationships I'll get into are:

An instance has a constructor
An instance has a prototype
A constructor has a prototype, a prototype has a constructor
A prototype has a prototype (not in the picture)

(has means one thing has a property pointing to the other thing)

1. An instance has a constructor

This is a constructor:

function Person(name){
  this.name = name
}

As you can see, it's basically just a function with a capitalized name.

And you can create new instances of this constructor like this:

const a = new Person('andy')

Now this object a will have a constructor property that points back to the constructor Person.

a.constructor === Person

Each object also has a __proto__ property that points to a prototype. That means, the above object a also has a __proto__ property that points to its prototype.

a.__proto__

But first, let's talk about what a prototype is.

2. An instance has a prototype

A prototype is a place that holds the essential capabilities that the instances of a type can share. These capabilities are usually instance methods.

If a method is called on an object, usually the method isn't stored in the object, it's stored in the object's prototype (or the prototype's prototype etc). All instances of a particular type will have their instance methods stored in the same prototype (or the prototype's prototype etc).

Let's get some hands-on.

Here's a string instance:

const x = 'x'

(as a side note, a string is technically not an object, but when you access its methods, it gets converted into an object temporarily behind the scene, so for the scope of this article, we can just treat a string value as an object)

It has all the String type's capabilities, for example:

x.toUpperCase()

It's getting these capabilities from String.prototype:

x.__proto__ === String.prototype

(__proto__ is a property that exists in all objects and values, it points to a prototype. However, __proto__ is getting deprecated so it might not be available in some browsers, and definitely don't write code that relies on it.)

A cool thing about this is that, we can add new methods to this prototype:

String.prototype.isX = function(){ 
  return this.toString() === 'x'
}

(This is just for illustration. In everyday development, don't add your own methods to built-in types such as String.)

And then this isX method will be magically available to our existing string value:

x.isX() // true

This is how JavaScript's inheritance works. An object (an instance) gets its capabilities from another object (a prototype), which in turn might get its own capabilities from yet another object (that prototype's prototype).

This link between an instance and its prototype is automatically created when the instance is created, so usually you don't have to worry about connecting an object to a prototype.

3. A constructor has a prototype, a prototype has a constructor

Now let's talk about the relationship between constructor and prototype.

A constructor is linked to a prototype. And a prototype is linked to a constructor. They're like the yin and the yang of JavaScript's prototypical OOP.

Look at this:

x.constructor.prototype.constructor.prototype.constructor.prototype

I can keep doing it, but I think you get the idea. There is a circular relationship between an object's constructor and its prototype.

The constructor has a prototype property that points to its associated prototype, and the prototype has a constructor property that points to its associated constructor.

With that in mind, here are some interesting relationships:

// the same constructor
x.constructor === String

// the same prototype
x.__proto__ === String.prototype
x.constructor.prototype === String.prototype

Just be aware that an instance has the __proto__ property, a constructor has the prototype property. Their names are different, but they are pointing at the same prototype.

4. A prototype has a prototype

I mentioned "a prototype's prototype." This sounds complicated, but let's take a look at a simple example.

This will give you the prototype of a plain object:

({}).__proto__

And This will give you the prototype of a string:

''.__proto__

Obvious, they have different prototypes, so this should be false:

({}).__proto__ === ''.__proto__

But since the String type is extending from the Object type. The plain object's prototype is actually the string's prototype's prototype.

So this will be true:

({}).__proto__ === ''.__proto__.__proto__

This __proto__.proto__ thing is called the prototype chain. And the end of the prototype chain is null.

Bottom Line

Between a constructor and a prototype, that's a two-way relationship. Anything from an instance to either its constructor or its prototype, that's only a one-way relationship. There's no arrow pointing back to each instance from a constructor and a prototype.

Catch you later

ES 2021 Features

Andy Li — Thu, 21 Jan 2021 22:08:53 +0000

ES 2021 is the latest version of the .. the most popular programming language in the world~

There are only a handful of features in this iteration. (five of them to be exact, that's literally "handful" cause there are five fingers in a hand)

Now let's go through them one by one.

1. String's `replaceAll` method:

The replaceAll method will replace all the occurrences of the searched string (first arg) with the new string (second arg).

'Hello'.replaceAll('l', 'L') // 'HeLLo'

This one should be pretty basic to understand for experienced programmers.

2. `Promise.any`

This is a static method of the Promise global object. It takes an array of Promise objects as arg. Then...

It will resolve whenever one of these Promise objects resolves. On the other hand, it will reject ONLY WHEN ALL of these Promise objects reject.

Here's some code:

const myFetches = Promise.any([ 
  fetch('/route-1'), 
  fetch('/route-2') 
])

myFetches.then(r => console.log(r))

If you've used Promise.all, this is basically the opposite of that in terms of when to resolve and when to reject.

3. `WeakRef`

This is a new class for creating weak references to objects, that is, references that won't stop the referenced objects to be garbage-collected.

That is not to say that whenever a WeakRef is pointing to an object, that object will get garbage-collected. It's just that the WeakRef won't stop the garbage collector from doing so. (though there might be other references stopping the garbage collector to erase the object in question.)

You probably don't have a need to ever use this. But here's how you create a weak reference:

let obj = { name: "Andy" }
const myRef = new WeakRef(obj)

Then, you can get the wrapped object like this:

myRef.deref() // { name: "Andy" }

If the garbage collector has already removed it from memory, it would return undefined instead.

4. Logical Assignment Operators

This is a set of operators, basically combining logical operators with assignment.

They look like this:

a ||= b
a &&= b
a ??= b

I'm just going to explain how the first one works, you can basically guess what the other two do.

Let's say we got two variables:

let a = true
let b = false

And then we assign b to a using the ||= operator:

a ||= b

You can treat this as a regular assignment statement, but with a twist. The assignment will only be successful if a is false. But a isn't in this example, so a will still be true at the end.

Yeah, that's it. You can check out more details in the proposal document.

5. Numeric Separators

Look at this:

let num = 1000000000

Is that a billion or a hundred million??

Now in ES 2021, you can write this instead:

let num = 1_000_000_000

Now, that looks like a billion.

Bottom Line

Alright, that's it for ES 2021. Use it if you like. Just don't use WeakRef or any of the Logical Assignment Operators if you have to rely on Babel to target IE 11. (cause it wouldn't work)

Catch you later

DEV Community: Andy Li

"Strict Mode" TypeScript config options

1. noImplicitAny

2. noImplicitThis

3. alwaysStrict

4. strictBindCallApply

5. strictNullChecks

6. strictFunctionTypes

7. strictPropertyInitialization

Bottom Line

Constructor, Prototype, and Their Instance: Relationships

1. An instance has a constructor

2. An instance has a prototype

3. A constructor has a prototype, a prototype has a constructor

4. A prototype has a prototype

Bottom Line

ES 2021 Features

1. String's replaceAll method:

2. Promise.any

3. WeakRef

4. Logical Assignment Operators

5. Numeric Separators

Bottom Line

1. String's `replaceAll` method:

2. `Promise.any`

3. `WeakRef`