Typescript define function args and return value based on arg

I've got a function that translates data two ways. One of the args will determine the direction of your translation and the other arg and return value will depend on this.

type DataTranslation =   
    | ((arg: { toType: "number"; data: string }) => number | undefined)
    | ((arg: { toType: "string"; data: number }) => string | undefined);

const dataTranslation: DataTranslation = ({toType, data}) => {
    if(toType === 'number') {
        return Number.parseInt(data);
    }
    if(toType === 'string') {
        return `${data}`;
    }
}

Effectively this function is one of two things. If toType is "number" than data will be string and return value will be number (and vice versa). The error I get though is this:

Type '({ toType, data }: { toType: any; data: any; }) => string | number | undefined' is not assignable to type 'DataTranslation'.
  Type '({ toType, data }: { toType: any; data: any; }) => string | number | undefined' is not assignable to type '(arg: { toType: "number"; data: string; }) => number | undefined'.
    Type 'string | number | undefined' is not assignable to type 'number | undefined'.
      Type 'string' is not assignable to type 'number | undefined'.

It appears typescript is merging my return values. Also, the error appears to not apply my type properly, I can see { toType: any; data: any; } in there.

The core of your problem is making the return type depend on the input type. There is a request for proper support for this on the TypeScript GitHub repo, under the name of "dependent-type-like functions". However, it can be worked around using various methods; guaranteeing safety is hard, though.

The following code types the definition and call-site arguments correctly, and the call-site return type correctly, but does not disallow returning a value of an incorrect type within the function.

/**
 * This is a mapping of names to types.
 */
type DataNameMap = {
  string: string;
  number: number;
};

/**
 * This is a mapping of output type names to the corresponding input type.
 * (It's that way round because the input is keyed by the output type name.)
 */
type DataTranslationMap = {
  string: DataNameMap["number"];
  number: DataNameMap["string"];
};

/**
 * This converts the names and translation mappings to a combined object
 * so that TypeScript can see how the input and output types are related
 * when we define the function.
 * For every name in the first mapping, it defines an object with the
 * argument type and the output type.
 */
type DataTranslationObject = {
  [key in keyof DataNameMap]: {
    arg: {
      to: key;
      data: DataTranslationMap[key];
    };
    res: DataNameMap[key];
  };
};

/**
 * This is a union of each property of `DataTranslationObject`.
 * */
type DataTranslationUnion = DataTranslationObject[keyof DataTranslationObject];

/**
 * This is the function itself.
 *
 * Details in the rest of the answer.
 */

// 1. `to` property
function dataTranslation<Name extends keyof DataTranslationObject>(arg: {
  to: Name;
  data: DataTranslationObject[Name]["arg"]["data"];
}): DataTranslationObject[Name]["res"] | undefined;

// 2. Whole arg
// function dataTranslation<Arg extends DataTranslationUnion["arg"]>(
//   arg: Arg
// ): Extract<DataTranslationUnion, { arg: Arg }>["res"] | undefined;

// Implementation
function dataTranslation({
  to,
  data,
}: DataTranslationUnion["arg"]): DataTranslationUnion["res"] | undefined {
  if (to === "number") {
    return Number.parseInt(data);
  }

  if (to === "string") {
    return data.toString();
  }

  return undefined;
}

So, typing of the function itself.

The overload provides the call-site correlation between the input and output.
There are two options here:

1. The type parameter, Name, is a key of the "translation object".
   It is inferred from the to property of the input.
   The "translation object" is indexed with it to determine
   the input's data property type and the return type.
   This is useful if you sometimes want to only allow specific
   types, which can be done by setting the type parameter.

2. The type parameter, Arg, is a union of all the possible arg properties.
   It is inferred from the entire input.
   The return type is determined by extracting from the "translation union"
   the member that contains an arg property of that type.
   This may be a little harder to reason about in complex cases,
   but doesn't require you to write out the arg type again.

You can use both at once, but I see no benefits in that over simply using the first option.

The implementation signature uses the "translation union".
This allows TypeScript to relate the to and data properties within
the function (even if they were destructured, as below).
Because of limitations in the type system, we can't show TypeScript that
the return type is related to the input type, so make sure the returned
values are the correct type! (At least with this approach.)

TS Playground

Related: what @jcalz has been calling "correlated unions". The relevant GitHub issue and PR:

• #30581 - "Wishlist: support for correlated union types"
• #47109 - "Fix multiple issues with indexed access types applied to mapped types".

See also: @jcalz's answer to "TypeScript generics work when you call it but not in the function body?" for info and workarounds for the general problem of defining parameters using generic type parameters. Applies here (to some extent, at least).