Lost type information when returning from a function.

[mzalevski]

Hi, I have a problem with lost type information when returning from a function.

The manageData function returns data and valid.

If valid is true it means that the safeParse is successful and the data type should be S.
If valid is false it means that the safeParse is not successful and the data type should be I.

It seems that the types from within the function are recognized correctly but after returning from it the info is lost (photos below).

Is there something I can do or is it a TypeScript thing?

import * as z from "zod";

interface User {
  firstName: string;
  lastName: string;
}

const userSchema: z.ZodSchema<User> = z.object({
  firstName: z.string(),
  lastName: z.string(),
});

interface Params<S, I> {
  schema: z.ZodType<S, z.ZodTypeDef, S>;
  initialData: I;
}

const manageData = <S, I>({ schema, initialData }: Params<S, I>) => {
  let data = initialData;
  const setData = (newData: any) => (data = newData);

  const parseResult = schema.safeParse(data);

  if (parseResult.success) {
    return { data: parseResult.data, valid: true, setData }; // data is recognized as `S` type -> correct!
  } else {
    return { data: data, valid: false, setData }; // data is recognized as `I` type -> correct!
  }
};

const { data, valid } = manageData({
  schema: userSchema,
  initialData: { firstName: "John" },
});

if (valid) {
  console.log(data); // data is recognized as S | I union type -> I want to have `S` here
} else {
  console.log(data); // data is recognized as S | I union type -> I want to have `I` here
}

it seems that the types from within the function are recognized correctly (property) data: S and (property) data: I

but the types after returning from the function are merged into an union

[colinhacks]

For discriminated unions like this, the discriminator (in this case "valid") needs to be a literal (like "adsf" or true, not string or boolean. You need to tell TypeScript to treat literal values as literals. In this case just add as const to the boolean literals like this, and it works as expected:

  if (parseResult.success) {
    return { data: parseResult.data, valid: true as const, setData }; // data is recognized as `S` type -> correct!
  } else {
    return { data: data, valid: false as const, setData }; // data is recognized as `I` type -> correct!
  }

[mzalevski]

Thanks! I did as you wrote and from what I see, it does work, but only if you do not destructure the returned object. Any ideas how to make destructuring work?

const manager = manageData({
  schema: userSchema,
  initialData: { firstName: "John" },
});

if (manager.valid) {
  console.log(manager.data); // data is recognized as `S` type -> correct!
} else {
  console.log(manager.data); // data is recognized as `I` type -> correct!
}

I'd love to destructure the object like this, but the type info is lost.

const { data, valid } = manageData({
  schema: userSchema,
  initialData: { firstName: "John" },
});

if (valid) {
  console.log(data); // still an S | I union
} else {
  console.log(data); // still an S | I union
}

[mzalevski]

It seems to be a bigger problem: microsoft/TypeScript#12184 & https://stackoverflow.com/questions/59786104/how-to-make-discriminated-unions-work-with-destructuring. Nevertheless, maybe you have some ideas :/

[colinhacks]

Yeah, you can't destructure with discriminated unions, and that's unlikely to change.