How to handle potential empty array when accessing by index in Typescript

Question

What's the preferred way to access elements by index in an array in Typescript when the array also can be empty, leading to elements being undefined?

I'm coding a simple game in React with Typescript where I have a game variable consisting of an array of sets of type ISet. In this simplified example, ISet has a score property in it's interface, which I try to access

const game: ISet[] = [];
const currentSet = game[game.length - 1]; // 'currentSet' will be of type 'ISet', although it will be 'undefined' here
console.log(currentSet.score); // No Typescript error, although a 'Uncaught TypeError: Cannot read property 'score' of undefined' error will be thrown when run

How can I have Typescript detect currentSet potentially being undefined here?

I've tried to manually set currentSet's type to

const currentSet: ISet | undefined = game[game.length - 1];

but that doesn't work, and changing the type declaration to

const game: Array<ISet | undefined> = [];

allows undefined to be added to the array, which is not what I'm after and will lead to problems later on.

I've read through a couple of GitHub issues, like this one, but couldn't find any suggestions on workarounds. Using something like last from Underscore would work, but it seems a bit overkill to a new package to bypass this issue.

Looking forward to some help!

Andreas

Weird.. unless you have a horribly old version of tslint it should work. Try running tslint -v maybe there is a global tslint version installed and that is getting picked up .. — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Mar 7, 2019 at 9:33
Which tslint rule do you refer to that would catch this? no-spare-arrays will not work here. I'm running version 5.13, so that shouldn't be the problem. — Andreas Näsman
– Andreas Näsman, Commented Mar 7, 2019 at 11:23
Here you go: github.com/danielnixon/eslint-plugin-total-functions — danielnixon
– danielnixon, Commented Jun 9, 2020 at 11:57

brunnerh · Accepted Answer · 2022-10-03 12:32:35Z

7

TypeScript > v4.1 has the option noUncheckedIndexedAccess which should return T | undefined for all unknown index access.

You could implement your own last and be more accurate in its typing:

function last<T>(array: T[]): T | undefined // Explicit type
{
    return array[array.length - 1];
}

edited Oct 3, 2022 at 12:32

answered Mar 7, 2019 at 21:35

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andreas Näsman · Accepted Answer · 2019-03-07 14:23:46Z

3

The best solution I could come up with was to use last from lodash and adding it as a separate package. I also added type definitions separately by installing @types/lodash.last.

My example case above would end up looking like this:

import last from 'lodash.last'

const game: ISet[] = [];
const currentSet = last(game); // 'currentSet' now has a type of 'ISet | undefined' 🤞
console.log(currentSet.score); // Object is possibly 'undefined'. ts(2532) 🎉

answered Mar 7, 2019 at 14:23

Andreas Näsman

3573 silver badges11 bronze badges

Comments

Chris Barr · Accepted Answer · 2019-03-07 21:29:55Z

0

This seems normal to me, you have an array of ISet, but it's just empty right now. arrays are allowed to be empty, this is how arrays work.

just check to see if the array has any items in it first

const game: ISet[] = [];
if (game.length) {
  const currentSet = game[game.length - 1];
  console.log(currentSet.score);
} else {
  console.log("no games!");
}

Doing something like game: (ISet | undefined)[] might imply that even when populated any item in the array might be undefined like this:

[{score: 4}, {score: 1}, undefined, {score: 5}, undefined, undefined, {score: 10}]

which is probably not your intention (I assume). Doing this might confuses you or other developers in the future.

edited Mar 7, 2019 at 21:29

answered Mar 7, 2019 at 21:26

Chris Barr

34.6k28 gold badges105 silver badges157 bronze badges

6 Comments

brunnerh Over a year ago

The issue here is that there is no compile time error.

Chris Barr Over a year ago

Again, I think this is pretty normal. I assume this exaple is pseudo-code and you probably aren't actually initializing an empty array and then attempting to access index -1 on it (0 length and then subtract 1) - Your array in real code probably gets values from something... so it's usually a good idea to ensure that an array has values on it before you try to access it.

Chris Barr Over a year ago

Also, keep in mind that the compiler doesn't really keep track of how many items are in the array, that's something that happens at runtime. If I ran someArr[9999] I don't expect the TS compiler to know that my array only has 421 items in it, that's for me to check.

brunnerh Over a year ago

That this is normal is not the point. You want to catch as many issues as early as possible, and having the compiler return the obviously correct type would be great.

Chris Barr Over a year ago

it is, you've set it to be an array of ISet objects, so that's what it's returning. If you access an item in the array that doesn't exist, that's not a compiler issue.

|

Collectives™ on Stack Overflow

How to handle potential empty array when accessing by index in Typescript

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related