Ufdjrw

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

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) 🎉

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.

Well, 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];