使用 Typescript 泛型作為接口中的鍵

Question

我正在嘗試擴展ParsedUrlQuery以允許傳入任何鍵。現在我正在為大量不同的參數創建單獨的接口，如下所示：

export interface IdParams extends ParsedUrlQuery {
  id: string;
}

export interface SlugParams extends ParsedUrlQuery {
  slug: string;
}

我想做的是創建一些可重用的東西，讓我可以做類似的事情：

export interface GenericParams<key, value> extends ParsedUrlQuery {
  [key]: value;
}

所以我可以在任何地方使用它，比如：

GenericParams<"slug", string>

或者

GenericParams<"id", string[]>

根據頁面的需要。 那可能嗎？

Answer 1

你需要在這里使用一個映射類型，它不能是一個interface 。 但它應該可以正常工作type 。 這里的神奇之處在於將鍵限制為string ，並使用[key in K]來定義鍵類型。

export type GenericParams<K extends string, V> = ParsedUrlQuery & {
  [key in K]: V;
}

type TestA = GenericParams<"slug", string> // { slug: string }
type TestB = GenericParams<"id", string[]> // { id: string[] }

看游樂場