如何修复嵌套对象的“类型'K扩展X [T]？keyof K：从不'不能用于索引类型”？

Question

I'm trying to create a function where the first parameter (data) is an array of type Product, the second (element) is any property inside Product and the third and fourth parameters are properties of "element". So let's say "Product" has the property "Customer", I want to get "Id" and "Name" out of Customer.

I have the following code

function getFilterItem<T extends keyof Product, K extends Product[T]>(
  data: Product[],
  element: T,
  id: K extends Product[T] ? keyof K : never,
  name: K extends Product[T] ? keyof K : never,
): FilterItem[] {
  // removed for simplicity
}

What I want is to be able to call it like so

getFilterItem(data, 'customer', 'id', 'name');

With the code above, it identifies correctly the parameters, so if I pass a property that doesn't exist in 'customer' it'll tell me it's wrong. My problem is when I try to get the property it'll say "Type 'K extends Product[T] ? keyof K : never' cannot be used to index type".

Now, correct me if I'm wrong, but I imagine it's complaining because Product[T] could be any type in Product, let's say "Product" has the property "price" which is a number, so using something like getFilterItem(data, 'price', 'id', 'name'); typescript wouldn't be able to index it using the third and fourth parameter.

This is the full code (I've removed some logic to make it simpler)

function getFilterItem<T extends keyof Product, K extends Product[T]>(
  data: Product[],
  element: T,
  id: K extends Product[T] ? keyof K : never,
  name: K extends Product[T] ? keyof K : never,
): FilterItem[] {
  data.forEach((product) => {
    const value = product[element];
    if (value) {
      const valueId = value[id]; // here the eror is shown
    }
  }
}

How can I make it accept 'id' as a key of 'Product[T]'?

Here is a working example where I want to get "id" and "autonomyLevel" from a property inside Product:

sandbox

Answer 1

If I follow you right, you have something like:

interface Product {
  customer: Customer
}

interface Customer {
  id: number
  name: string
}

And you want the third and fourth arguments to the keys of object you would get by accessing the first argument by the second argument.

declare const data: Product
getFilterItem([data], 'customer', 'id', 'name');

---

Then you only need one generic type parameter, the "customer" key. The id and name keys can be inferred from that.

function getFilterItem<T extends keyof Product>(
  data: Product[],
  element: T,
  id: keyof Product[T],
  name: keyof Product[T],
) {
  data.forEach((product) => {
    const value = product[element];
    if (value) {
      const valueId = value[id]; // works
    }
  })
}

See Playground

---

The properties may be null

In that case you my solution gives you never for the secondary keys because the type of Product[T] is something like AutonomyLevel | never AutonomyLevel | never . And the keyof that is never because both types in that union share no keys in common.

But if you Exclude undefined from the type you are getting the keyof then it works:

function getFilterItem<T extends keyof Product>(
  data: Product[],
  element: T,
  id: keyof Exclude<Product[T], undefined>,
  name: keyof Exclude<Product[T], undefined>,
) {

Playground

---

However, this presents a new problem:

function getFilterItem<T extends keyof Product>(
  data: Product[],
  element: T,
  id: keyof Exclude<Product[T], undefined>,
  name: keyof Exclude<Product[T], undefined>,
) {
  data.forEach((product) => {
    const value = product[element];
    if (value) {
      const valueId = value[id];
      // Type 'keyof Exclude<Product[T], undefined>' cannot be used to index type 'string | number | ProductType | AutonomyLevel | ProductStatus | Industry[] | LifeCycle[]'.(2536)
    }
  })
}

The typescript compiler can have a hard time matching up differently derived generic types. In this case we've done the work to make this type safe, but Typescript doesn't believe us.

Honestly, and I very very rarely recommend this, I might add a little runtime check and then mark it as an expected error:

  data.forEach((product) => {
    const value = product[element];
    if (value && id in value) {
      // @ts-expect-error The compiler has a hard time understanding
      // that `id` is guaranteed to be a valid key of `value`.
      const valueId: Product[T] = value[id];
    }
  })

I find this solution acceptable because:

1. It's entirely internal to the function and therefore does not affect the overall types of your program.
2. It has the correct runtime checks to ensure that id is indeed a key in the value object.

It's unfortunate to unfortunate to disable the type checker in this case, and I'm open to other ways to eliminate it, but in this case, I this it's reasonably safe-ish.

Answer 2

Notice also that if what you want is the array element id value as the code suggests, you would not need to provide the prop name as an argument to the function as in here . For that, T would be the common props for all the types shared in Product keys, and not the keys themselves in the case more that one was shared, for the provided code only seems to be the id .

One point I'd like to make is that in case its not clear if typescript's behaviour makes sense I'd like to provide this explanation. The id: keyof Exclude<Product[T], undefined> enables you to call the getFilterItem with the 'id' argument. You'd need this as long there are optional arguments in the Product type.

Taken that into account, notice the core of the problem is that what is being trying to be done is get the index of a type Product[T] with the type keyof Exclude<Product[T], undefined> . Which are different types (meaning the index, T is a different type from keyof Exclude<Product[T], undefined>) , as one may hold undefineds due to optional arguments and the other may not. See playground . Removed the id and the image becase due to the keyof and Lookup Types you are are also narrowing down your type fit to string | number string | number , into whom id would never fit in.

For me the error makes sense because regarding type safety should not be allowed to exclude undefined for the id argument in getFilterItem , and then allowing it back for the index check of Product[T] with T holding undefineds as there are optional arguments.

Another thing I'd like to mention is that I think due to keyof and Lookup Types there might be different behaviours accessing props with object.prop and object.[prop]

Check what I mean in this playground . Where value.id works/compiles but value[id] does not.

So there are 2 things that would need to be fixed here regarding the type definition
1.- If undefined/optional args are allowed
2.- Handle the property access