reactjs - typescript 类型 - 关于使用推断的复合类型的问题

Question

使用 redux，我最终在我的商店代码中编写了以下片段:

type CombinedParamTypes<T extends {
    [key: string]: (state: any, action: any) => any;
}> = T extends {
    [key: string]: (state: infer R, action: any) => any;
} ? R : never;

type CombinedReturnTypes<T extends {
    [key: string]: (...args: any) => any;
}> = T extends {
    [key: string]: (...args) => infer R;
} ? R : never;

例子:

import camera from "./camera/reducer";
import settings from "./settings/reducer";

export const ALL_REDUCERS = {
    camera,
    settings,
};

const COMBINED_REDUCERS = combineReducers(ALL_REDUCERS);

export type FlatReduxState = CombinedParamTypes<typeof ALL_REDUCERS>;
// returns intersection type: ICameraState & ISettingsState

export type WhyDifferent = CombinedReturnTypes<typeof ALL_REDUCERS>;
// returns union type: ICameraState | ISettingsState

谁能解释为什么他们返回的方式不同？我意识到一个是查看参数，另一个是查看返回类型，但这如何转化为决定交集与并集？

Answer 1

函数类型是 covariant in their return type and contravariant in the argument types .关于type inference in conditional types这也在文档中说明:

[...] multiple candidates for the same type variable in co-variant positions causes a union type to be inferred [...] Likewise, multiple candidates for the same type variable in contra-variant positions causes an intersection type to be inferred[.]

对于你的 reducer 返回类型，TypeScript 推断 R 的所有实例化的公共(public)父类(super class)型，这导致返回类型的联合类型 - ICameraState | ISettingsState。反过来，CombinedParamTypes 的函数参数中 R 的所有实例都组合为交集类型以获得 的通用子类型 R - ICameraState 和 ISettingsState。

协变和逆变的基本概念有时在您第一次(和第二次——对我而言……)听到时有点难以理解。某种意义上的协变意味着，当基本组件类型中的每一个都被打包成更复杂的类型(高阶类型/HOT)，如函数、列表或其他类型时，基本组件类型的子类型化关系得以保留。逆变是相反的 - 子类型成为 HOT 中的父类(super class)型，因为函数在其参数类型上是逆变的。

遵循this recommended article 的狗和动物类比的简单示例:

type Animal = {
  sex: "m" | "w";
};

type Dog = {
  bark(): void;
};

declare const animals: {
  aDog: (d: Dog) => string;
  anAnimal: (a: Animal) => number;
};

// string | number is the supertype of all given return types (covariance)
type ReturnTypes = CombinedReturnTypes<typeof animals>; // string | number

// Dog & Animal is the subtype of all given function parameter types (contravariance)
type Params = CombinedParamTypes<typeof animals>; // Dog & Animal

function testCombinedParamTypes(arg: (p: Params) => void) {
  // assumes that the argument of callback is Dog AND Animal...
  arg({ sex: "m", bark: () => "wuff" });
}

function client() {
  // ... so it is safe for a client to pass in a callback
  // that deals only with a Dog XOR Animal (see the original typeof animals   
  // type from which Params is derived). E.g. Dog being a super type of Dog & Animal 
  // can be safely passed as argument in a contravariant position 
  testCombinedParamTypes((dog: Dog) => {});
}

Playground

希望，我可以把事情搞清楚一点。