Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

There are a couple of things about the TypeScript default config that let you do some quite unsafe things. In this case, we'll be checking out this one:

export const myObj: Record<string, string[]> = {} 

This is where you have an object and your object has a key which is a string, and then every element of the object is an array of strings. And, let's imagine that you want to push something to this.

So let's try pushing "bar" to the array that's associated with the key "foo".

myObj.foo.push("bar") 

Now, if my object doesn't have a key of foo on it and you try to push to it this will result in a runtime error. But, we're not getting any of that inference. TypeScript is not telling us we may get an error.

There happens to be a TypeScript config option for this! Go into your tsconfig and set noUncheckedIndexedAccess to true in your compilerOptions. By default this value is false.

{
  "compilerOptions": {
    ...
    "noUncheckedIndexedAccess": true,
    ...
  },
  "include": ["./src"]
}

Let's go back into our file, and it says that object is "possibly undefined". Sadly, this won't actually have the result that we want.

myObj.foo?.push("bar") 

It will check if myObj.foo exists, then push to it. But, actually what we want to do is if it doesn't exist already we want to create an empty array

So let's do that.

if (!myObj.foo) {
  myObj.foo = []
}

TypeScript will stop erroring since TypeScript is smart enough to know now that myObj.foo has an array so you don't need to do any extra kind of generic stuff or any crazy helper function.

It just knows and it's wild that the inference is this smart