时间戳

首页 > 解决方案 > Typescript Types - 关于使用推断的复合类型的问题

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

问题描述

使用 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

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

标签： reactjstypescriptreduxreact-redux

解决方案

函数类型的返回类型是协变的，而参数类型是逆变的。关于条件类型中的类型推断，文档中也对此进行了说明：

[...] 在协变位置中相同类型变量的多个候选导致推断联合类型 [...] 同样，在逆变位置中相同类型变量的多个候选导致推断交集类型[.]

对于您的 reducer 返回类型，这意味着，TypeScript 会推断 的所有实例化的公共超类型R，这会导致返回类型的联合类型 - ICameraState | ISettingsState。R反过来，函数参数中的所有实例化都组合为交集类型，以获得-CombinedParamTypes的公共子类型。RICameraState & ISettingsState

当您第一次（和第二次 - 为我说话......）第一次听到协变和逆变的基本概念时，有时会有点难以理解。sens 中的协变意味着，当基本组件类型中的每一个都打包成更复杂的类型（高阶类型/HOT）时，如函数、列表或其他类型，它们的子类型关系被保留。逆变是相反的——子类型成为 HOT 中的超类型，因为函数的参数类型是逆变的。

按照这篇推荐文章的狗和动物类比的简单示例：

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) => {});
}

操场

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

推荐阅读