Typescript generics keyof 類型不匹配

Question

我有這個接口，它只存儲另一個接口的鍵（ modelKey ）和該鍵的值（ value ）：

interface ValueHolder<T, H extends keyof T> {
  modelKey: H;
  value: T[H];
}

現在我想存儲來自以下horsePower的馬力，匹配類型在ValueHolder中：

interface Car {
  id: number;
  horsePower?: number;
  date: Date;
};

這看起來像這樣：

const test: ValueHolder<Car, keyof Car> = {
  modelKey: 'horsePower',
  value: 1000,
};

此時不會發生錯誤，它會很好地存儲值。 但您也可以傳遞Date類型的值：

const test: ValueHolder<Car, keyof Car> = {
  modelKey: 'horsePower',
  value: new Date(),
};

因為無論出於何種原因，該值都可以接受 model 中提供的所有類型的任何鍵：

(property) ValueHolder<Car, keyof Car>.value: string | number | Date | undefined

---

如何使接口ValueHolder的value鍵只接受undefined | number undefined | number ，如果你提供的modelKey horsePower ？

演示

Answer 1

ValueHolder第二個通用參數H允許所有鍵，這反過來又導致允許所有值。

您需要稍微修改您的主要實用程序類型，以使非法 state 無法表示。

考慮這個例子：

type Values<T> = T[keyof T]

type ValueHolder<T> = Values<{
  [Prop in keyof T]: {
    modelKey: Prop;
    value: T[Prop]
  }
}>

// type Test = {
//     modelKey: "id";
//     value: number;
// } | {
//     modelKey: "horsePower";
//     value: number | undefined;
// } | {
//     modelKey: "date";
//     value: Date;
// } | undefined
type Test = ValueHolder<Car>

interface Car {
  id: number;
  horsePower?: number;
  date: Date;
};

// ok
const test: ValueHolder<Car> = {
  modelKey: 'horsePower',
  value: 1000,
};

// error 
const test2: ValueHolder<Car> = {
  modelKey: 'horsePower',
  value: new Date(),
};

操場

請參閱type Test 。 ValueHolder創建所有允許值的聯合。 它遍歷每個鍵並創建此接口 {Prop:{modelKey:P, value:T[P]}}。 然后Values獲取每個 object 值{modelKey:P, value:T[P]}並將它們合並。

更新

謝謝，工作正常！ 如果我希望T[Prop]只能是字符串類型怎么辦？ 這也可能嗎？

是的。 有兩種方法可以實現它。 您可以只允許ValueHolder接收值為字符串的對象。

type ValueHolder<T extends Record<string, string>> = Values<{
  [Prop in keyof T]: {
    modelKey: Prop;
    value: T[Prop]
  }
}>

或者，您可以在迭代內部檢查T[Prop]是否為字符串。

type ValueHolder<T> = Values<{
  [Prop in keyof T]: T[Prop] extends string ? {
    modelKey: Prop;
    value: T[Prop]
  } : never
}>