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.

Discuss on Twitter

More Tips

Type Predicates

1 min

TypeScript 5.1 Beta is OUT!

2 mins

How to Name your Types

4 mins

Don't use return types, unless...

4 mins

TypeScript 5.0 Beta Deep Dive

6 mins

Conform a Derived Type Without Losing Its Literal Values

1 min

Avoid unexpected behavior of React’s useState

1 min

Understand assignability in TypeScript

2 mins

Compare function overloads and generics

1 min

Use infer in combination with string literals to manipulate keys of objects

1 min

Access deeper parts of objects and arrays

1 min

Ensure that all call sites must be given value

1 min

Understand how TypeScript infers literal types

1 min

Get a TypeScript package ready for release to NPM in under 2 minutes

1 min

Use assertion functions inside classes

1 min

Assign local variables to default generic slots to dry up your code and improve performance

2 mins

Know when to use generics

2 mins

Map over a union type

1 min

Use generics to dynamically specify the number, and type, of arguments to functions

1 min

Use 'declare global' to allow types to cross module boundaries

2 mins

Turn a module into a type

2 mins

Create autocomplete helper which allows for arbitrary values

2 mins

Use deep partials to help with mocking an entity

1 min

Throw detailed error messages for type checks

1 min

Create a 'key remover' function which can process any generic object

1 min

Use generics in React to make dynamic and flexible components

1 min

Create your own 'objectKeys' function using generics and the 'keyof' operator

1 min

Write your own 'PropsFrom' helper to extract props from any React component

1 min

Use 'extends' keyword to narrow the value of a generic

1 min

Use function overloads and generics to type a compose function

2 mins

Decode URL search params at the type level with ts-toolbelt

2 mins

Use 'in' operator to transform a union to another union

2 mins

Derive a union type from an object

2 mins