如何在TypeScript中定義具有任意數量的某種類型的屬性的接口

Question

我想定義一個具有任意屬性的接口，其類型始終相同。 例如

type Reducer<S, P> = (state: S, payload: P) => S

interface Reducers {
  [name: string]: Reducer
}

然后像這樣使用它：

interface MyState {
  foo?: string
  bar?: string
}

const reducers: Reducers = {
  r1: (state: MyState, payload: string) => {
    return {foo: payload}
  }
}

但是我無法編譯它。 編譯器錯誤是：

錯誤TS2314：通用類型“ Reducer”需要2個類型參數。

我究竟做錯了什么？

Answer 1

您需要將通用參數轉發到Reducers接口：

interface Reducers<S, P> {
  [name: string]: Reducer<S, P>
}

const reducers: Reducers<MyState, string> = {
  r1: (state: MyState, payload: string) => {
    return {foo: payload}
  }
}

如果編譯器不允許您內聯定義Reducer方法（過去我對此有些麻煩），則可以在外部定義值：

const r1Reducer: Reducer<MyState, string> = (state: MyState, payload: string) => {
    return {foo: payload}
}

const reducers: Reducers<MyState, string> = {
  r1: r1Reducer;
}

Answer 2

您在代碼中缺少一些泛型類型符號。

type Reducer<S, P> = (state: S, payload: P) => S

interface Reducers<S, P> {
  [name: string]: Reducer<S, P>
}

interface MyState {
  foo?: string
  bar?: string
}

const reducers: Reducers<MyState, string> = {
  r1: (state: MyState, payload: string) => {
    return { foo: payload }
  }
}

沒有它們，編譯器將無法確定S和P泛型的正確類型。