How to account for array "is possibly undefined" error in Typescript

Question

I have an array called availableOfferings that gets set after an API call is completed.

const { offerings: availableOfferings } = useGetOfferings();

Then, I have two variables that rely on the data contained in availableOfferings

const bestOffering = availableOfferings[0];

const relevantOfferings = availableOfferings
    .slice(1)
    .filter((off: any) => isGoodFit(off));

When initialized the two variables above, I get a Typescript error that says 'availableOfferings' is possibly 'undefined'.

What is the best way to resolve this issue?

I tried this and it worked but doesn't look too elegant:

const bestOffering = availableOfferings ? availableOfferings[0] : undefined;

const relevantOfferings = availableOfferings
  ? availableOfferings.slice(1).filter((off: any) => isGoodFit(off))
  : undefined;

Here is how the data is being pulled with useGetOfferings:

export const OfferingsContext = createContext<{
  [x: string]: any;
  offerings?: {
    [x: string]: any;
  };
}>({
  offerings: {},
});

export function useGetOfferings() {
  return useContext(OfferingsContext);
}

function OfferingsProvider({ children }: Props) {
  const [offerings, setOfferings] = useState([]);
  const [hasGoodFits, setHasGoodFits] = useState(undefined);
  const { getAccessTokenSilently } = useAuth0();
  const fetchData = async () => {
    try {
      const responseOfferings = await BusinessApi.getOfferings(
        getAccessTokenSilently
      );
      const hasGoodFitsResult = responseOfferings.data.data.some(
        (offering: any) => isGoodFit(offering)
      );
      setOfferings(responseOfferings.data.data);
      setHasGoodFits(hasGoodFitsResult);
      return { responseOfferings, hasGoodFitsResult };
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    fetchData();
  }, []);


  return (
    <OfferingsContext.Provider
      value={{ offerings, fetchData, hasGoodFits }}
      children={children}
    />
  );
}

Terry · Accepted Answer · 2023-02-06 00:18:38Z

2

That's when optional chaining ?. and nullish coalescing operator ?? comes into handy:

const bestOffering = availableOfferings?.[0];

const relevantOfferings = (availableOfferings ?? [])
    .slice(1)
    .filter((off: any) => isGoodFit(off));

answered Feb 6, 2023 at 0:18

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

Comments

haptn · Accepted Answer · 2023-02-06 03:08:34Z

1

You can give the availableOfferings a default value as [], so it always has a fallback value => the warning will be gone.

const { offerings: availableOfferings = [] } = useGetOfferings()

But I'm not sure why you declare your offerings with type object instead of type array (in OfferingsContext).

answered Feb 6, 2023 at 3:08

haptn

1,0091 gold badge8 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to account for array "is possibly undefined" error in Typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related