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
Transcript
0:00 There are a couple of things about the TypeScript default config that let you do some quite unsafe things. Specifically, this one, which is where you have, let's say, an object, and your object has a key which is a string, and then every element of the object is an array of strings.
0:18 Let's imagine that you want to push something to this. Let's say you want to go my_object.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 here. It's not telling us that it might be an error.
0:37 Well, there happens to be a TypeScript config option for this, which my man Andores told me about. Here, what you can do is you can go into here, and you can say no unchecked index access, which by default is . Let's set it to 1.
0:54 Now, let's go back into our file here, and it says that object is possible undefined. This is pretty cool. We can do this, I guess, but this won't actually have the result that we want, because it will say, "OK, my_object.foo, if it exists, then push to it."
1:11 Actually, what we want to do is, if it doesn't exist already, we want to create an empty array. Let's do that. If my_obj.foo, then my_obj.foo equals an empty array, and TypeScript stops erroring. TypeScript is smart enough to know now that my_object.foo has an array in there.
1:33 You don't need to do any extra generic stuff or any other crazy helper function. It just knows, and it's crazy that the inference is this smart.
The "noUncheckedIndexedAccess" is the most awesome config option you've never heard of. It makes accessing objects a lot safer, and also powers up TypeScript's inference on objects.
Props to @AndaristRake for this one.