基于条件类型的 Typescript 中的不同 object 字段

Question

I want to write a function (eventual use is a React function component) in Typescript that takes a props object with a list of list of objects of any type. Assume the function should print a "key" for each, where if the object type has an id field then the id value is printed as the key, and if the object type doesn't have an id field, the key will be derived from an accessor function in the props object (pseudocode here with types omitted):

function process(props: { items: ..., ...}) {
  props.items.forEach(item => {
    if (item.id) {
      console.log(`Key for ${item.id}`)
    } else {
      console.log(`Key for ${props.keyFunction(item)}`)
    }
  })
}

process({items: [{id: "1", name: "A"}, {id: "2", name: "B"}]})
process({items: ["A", "B"], keyFunction: (item) => item})

Ideally, I'd like the following:

1. Typescript should error if keyFunction is provided but the items already have an id
2. Typescript should error if the items don't have an id and keyFunction isn't provided
3. Typescript should know about keyFunction and id in the appropriate places inside the process function body (autocomplete should work)

Is there a way to write the types for this function so that all 3 of the above work?

Note: I understand that if these were parameters instead of values of a config object, I could use conditional function overloads, but because the actual use case for this is a React function component with props, that won't work here.

What I've tried

I've tried using a conditional type, which works at the callsite, but I can't figure out how to make Typescript know about keyFunction correctly playground link :

type KeyProps<T> = T extends { id: string }
  ? { items: T[] }
  : {
      items: T[];
      keyFunction(item: T): string;
    };

function process<T>(props: KeyProps<T>) {
  props.items.map(item => {
    if (item.id) {
      console.log(`Key for ${item.id}`)
    } else {
      console.log(`Key for ${props.keyFunction(item)}`)
    }
  })
}

I've also tried using a discriminated union, but I don't know how to provide a type constraint to only one branch of the union with a generic:

type KeyProps<T> =
  | { type: "autokey", items: T[] } // How to provide that T should extend { id: string } here?
  | { type: "normal", items: T[], keyFunction(item: T): string }

Answer 1

Note: This answer assumes that it isn't important that the two parameters are contained inside of a wrapper props object.

Ideally, I'd like the following:

1. Typescript should error if keyFunction is provided but the items already have an id
2. Typescript should error if the items don't have an id and keyFunction isn't provided
3. Typescript should know about keyFunction and id in the appropriate places inside the process function body (autocomplete should work)

Okey, so requirement two (2) can be solved by simply using function overloads. Requirement three (3) can be solved by moving the implementation logic into their own type safe functions. However, requirement one (1) is quite tricky. We can easily infer the type of items using a generic T . Then using T we can derive a type D such that D does not contain any object types with a key of id . The tricky part is managing to both derive the base type T from items while also constraining the type of items to D . The way I've done it is by using an intersection type T[] & D[] for the type of items . This will infer the base type T from elements in the items array, while also constraining the type of the elements in the items array.

interface ObjWithID {
    [k: string]: any;
    id: string;
}

type AnyWithoutID<T> = T extends { id: any } ? never : T;

function processItemsWithID(items: ObjWithID[]) {
  items.forEach(item => console.log(`Key for ${item.id}`))
}

function processItemsWithoutID<T, D extends AnyWithoutID<T>>(items: T[] & D[], keyFunction: (value: T) => string) {
  items.forEach(item => console.log(`Key for ${keyFunction?.(item)}`))
}

function process(items: ObjWithID[]): void;
function process<T, D extends AnyWithoutID<T>>(items: T[] & D[], keyFunction: (value: T) => string): void;
function process(items: any[], keyFunction?: (value: any) => any) {
  if (keyFunction) {
    return processItemsWithoutID(items, keyFunction);
  } else {
    return processItemsWithID(items);
  }
}

process([{id: "1", name: "A"}, {id: "2", name: "B"}])
process([{id: "1", name: "A"}, {id: "2", name: "B"}], (item) => item)
process([{ name: "A"}, { name: "B"}], (item) => item.name)
process(["A", "B"], (item) => item)

playground