[Typescript] Checked index access

Problem when typing Dictionaries:

type Dict<T> = { [K: string]: T }
 
const d: Dict<string[]> = {}
d.rhubarb.join(", ") // 💥

Even `d.rhubarb` is undefined, but Typescript doesn't complain about it. So it will cause runtime error, and our `Dict` type is not good enough.

 

Way to solve it before V4

type Dict<T> = { [K: string]: T | undefined }
const d: Dict<string[]> = {}
d.rhubarb.join(", ") // 💥

So, we tell that value can be `T | undefined`

now, TS will complains about line

d.rhubarb.join(", ") // 💥

 

This can help us to enhance the code for type checking:

type Dict<T> = { [K: string]: T | undefined }
const d: Dict<string[]> = {}
const {rhubarb} = d;
if (rhubarb) {
  rhubarb.join(", ") // OK
}

 

Since V4, there is a config option:

Once you enable it, you don't need to set the value to be possible undefined. TS will automaticlly check undefine case:

type Dict<T> = { [K: string]: T }
const d: Dict<string[]> = {}
d.rhubarb.join(", ") // ts error