unionType 不能为 generics Function Typescript 中的参数

Question

I've defined a generics Function, and I'm trying to pass the union of two specific sample of the generics to the function, like

function myCommonFunc<T>({
  data,
  render,
}: {
  data: T;
  render: (data: T) => number;
}) {
  return render(data);
}

interface TestX<T> {
  data: T;
  render: (data: T) => number;
}

let z: TestX<number> | TestX<string>;
// let z: TestX<number | string>  is wrong, because T will be number | string


if ((window as any).someUserInput === 1) {
  z = { data: 1, render: (a: number) => 1 };
} else {
  z = { data: '1', render: (a: string) => 1 };
}

// someother function

myCommonFunc(z);

and it throw errs.

I guess the reason is the function cannnot infer type from the unionType, and If so, what should I do?

I know one solution is to use typeguard of z, like

function isTypeA(z: TestX<number> | TestX<string>): z is TestX<number> {
  return typeof z.data === 'number';
}
if (isTypeA(z)) {
  myCommonFunc(z);
}

but I think it actually change the structure of the program, and it need lots if-else to just for typescript, which is annoying. Can someone give me some other way to solve it?

Answer 1

This is a hard one. I see 3 solutions:

Solution 1

Solution 1 is the one you've mentioned above of using type guards:

const isTestNumber = (z: TestX<number> | TestX<string>): z is TestX<number> => {
  return typeof z.data === "number"
}

if (isTestNumber(z)) {
  myCommonFunc(z);
} else {
  myCommonFunc(z);
}

It is by far my least favorite solution.

Solution 2

Solution 2 is to cast z before passing it as a parameter. It looks like this:

myCommonFunc(z as TestX<any>); // ugly casting

I know it's ugly , but it's not particularly dangerous since the z variable is fully typed above. At least it does not alter the execution of the program.

Solution 3

Solution 3 requires some structural change to your program.

What you currently do is you declare the z variable, you assign it in an if-else statement and then you perform operations on it afterward.

What you could do is wrap all subsequent operations in another generic function.

It looks like this:

interface TestX<T> {
  data: T;
  render: (data: T) => number;
}

function myCommonFunc<T>(z: TestX<T>) {
  const { data, render } = z
  return render(data);
}

function allSubsequentOperations<T>(z: TestX<T>) {
  // someother function
  
  myCommonFunc(z);
}

if ((window as any).someUserInput === 1) {
  const z: TestX<number> = { data: 1, render: (a: number) => 1 };
  allSubsequentOperations(z)
} else {
  const z: TestX<string> = { data: "1", render: (a: string) => 1 };
  allSubsequentOperations(z)
}

This is what I usually do when dealing with this kind of problem. From the moment z is assigned, your whole program becomes generic.

I hope you find these answers helpful,

François