typescript - 如何避免分配条件类型

Question

这些是我的类型:

type Action<T> = T extends undefined ? {
    type: string;
} : {
    type: string;
    payload: T;
}

type ApiResponse<T> = {
    ok: false;
    error: string;
} | {
    ok: true;
    data: T;
};

我已经定义了这个函数:

function handleApiResponse<T>(apiResponse: ApiResponse<T>) {
    const a: Action<ApiResponse<T>> = {
        type: "response",
        payload: apiResponse,
    }
}

问题是a有一个错误，因为 Action 中的条件类型分布在ApiResponse .

我需要从 Action<T> 得到什么是一种字面意思的类型，即有两种情况:

1. 传递给 Action<T> 的类型参数未定义，在这种情况下 Action<undefined> = { type: string }
2. 传递给 Action<T> 的类型参数是别的什么，在这种情况下Action<T> = { type: string, payload: T }

但是当 T 时这不起作用是联合类型，因为分布式条件类型。

我怎样才能定义一个这样的类型，即使在 T 时也能正常工作？是工会吗？

Answer 1

如您所述，您对 Action<T> 的定义是 distributive conditional type , 其中unions在T被分成各自的成员(例如 B | C | D )，通过 Action<T> 传递，并将结果放回新的联合中(例如 Action<B> | Action<C> | Action<D> )。这通常是人们希望从他们的条件类型中得到的行为，但这不是您在这里想要的；也就是说，您不小心使用了分布式条件类型。

TTT extends UUU ? VVV : WWW 形式的条件类型仅当类型 TTT 时才是分布式的你正在检查的是裸generic 类型参数，例如 T在你对 Action<T> 的定义中.如果它是某种特定类型(如 string 或 Date )，它将不是分布式的。如果它是涉及类型参数的更复杂的表达式(如 {x: T} )，它就不是分布式的。我有时会引用后一种想法，您可以在其中采用“裸”类型参数 T并像{x: T}一样对它做点什么，作为“服装”类型参数。

---

所以你有 T extends undefined ，这是分配的:

type Action<T> = T extends undefined ? ... : ...

如果你想关闭它，你需要重新措辞检查，这样 T穿上衣服但具有相同的行为(因此当且仅当 T 扩展 undefined 时检查成功)。最简单的方法是在 extends 的两边都穿上衣服子句是一个元素 tuple type ), 所以 T变成 [T]和 undefined变成 [undefined] :

type Action<T> = [T] extends [undefined] ? ... : ...

然后你的代码就可以工作了:

function handleApiResponse<T>(apiResponse: ApiResponse<T>) {
  const a: Action<ApiResponse<T>> = { 
    type: "response",
    payload: apiResponse,
  } // okay
}

请注意，TypeScript 将元组和数组视为 covariant在它们的元素类型中，这意味着 Array<X> extends Array<Y>或 [X] extends [Y]当且仅当 X extends Y .这在技术上是不安全的(请参阅 this question 及其答案以获取更多信息)但非常方便。

---

这是您可以使用的一般规则:如果您有 TTT extends UUU ? VVV : WWW而且它是意外分布的，你可以通过写 [TTT] extends [UUU] ? VVV : WWW 来关闭它.这在 documentation for distributive conditional types 的底部提到，虽然它只是说“做这个”而不是它为什么有效。方括号可能看起来像是为条件类型设计的某种特殊语法……但事实并非如此。它只是使用现有的单元素元组语法，它恰好可以做我们想做的事，而不需要太多的字符。

Playground link to code