how to handle multiple return type in action in typescript

[tomer-yechiel]

Hi,
question in Typescript, how to allow multiple return type from Action in a Typesafe way?

//in server
export async function action({ request }: ActionArgs) {
  if(Math.random() > 0.5){
    return json({ foo: {bar:1} });
  }
  return json({ baz: "ok" });
}

// in component
  const actionData = useActionData<typeof action>();
  if(actionData?.baz?){ // TS2339: Property 'baz' does not exist on type 'SerializeObject<UndefinedToOptional...

  }

[machour]

Since you're returning two different structures, TypeScript needs you to test things for yourself:

  if (actionData && "baz" in actionData) {
      console.log(actionData.baz); // TypeScript is happy here
  }

[tomer-yechiel]

Thanks! is it possible to do with ? operator?

[machour]

Without angering TypeScript? I don't think so.

When you do actionData?.baz?, TS says: What if your action returned {foo: {bar: 1}} instead? You're maybe be trying to access an undefined property on that object, so I'll scream for your own good.

"foo" in bar, is a type-happy way of testing the existence of a property in an object.