React - Typescript problem with generic response type

I have Following typescript types:

export type Response<T> = { isSuccess: true; data: T } | { isSuccess: false; error: string };

and

export interface IItems {
    item1: IItemObject[]
    item2: IItemObject[]
}

Then in my react code I fetch data from api -->

Get result as the above "Response" type -->

And if isSuccess === true, response is stored into a state:

const [savedItems, setSavedItems] = useState<{number: number, items: Response<IItems>}[] | undefined>();

So my problem comes when trying to access the responses "data" object like this:

savedItems?.find((a: any) => a.number === inputNumber)?.items?.data?.item1

I get the following typescript error:

Property 'data' does not exist on type 'Response<IItems>'.
  Property 'data' does not exist on type '{ isSuccess: false; error: string; }'.ts(2339)

I get the same error even when trying to use type guard like this:

const typeGuardTest = savedItems?.find((a: any) => a.number === inputNumber)?.items?.isSuccess
? (savedItems.find((a: any) => a.number === inputNumber)?.items.data?.item1)
: undefined;

Any idea where the problem might be?

Since Response returns a union where only the success response has data property.

You need to check whether the savedItems.items is a success response:

if(savedItems.items.isSuccess) {
}

And if the isSuccess true then the typescript will be able to infer that savedImages is a success response and you'll be able to use data:

const response: { items: Response<IItems> } = {
  items: {
    isSuccess: true,
    data: { item1: [], item2: [] },
  },
};

if (response.items.isSuccess) {
  response.items.data.item1.find((v) => v);
}