TypeScript条件类型泛型绑定后类型收窄报错如何修复

TypeScript 的控制流收窄逻辑只会作用在具体值的类型上，不会自动收窄泛型参数，也不会联动更新基于该泛型计算出的条件类型。
即使你通过instanceof判断出request是RequestType1的实例，泛型参数RequestType本身并没有被收窄，因此ToResponseType<RequestType>仍然会被计算为ResponseType1 | ResponseType2联合类型，自然无法直接传入只接受ResponseType1类型参数的printResponse1函数。

你可以根据场景选择以下两种实现方式：

方案1：使用可辨识联合元组（推荐，无类型断言，全链路类型安全） #

将请求和对应的响应类型组合成元组联合类型作为函数参数，TypeScript 会在你收窄request类型时，自动联动收窄同元组内response的类型，不需要手动写类型断言：

class RequestType1 {
  readonly query = 'type 1';
}

interface ResponseType1 {
  data: 'type 1';
}

class RequestType2 {
  readonly query = 'type 2';
}

interface ResponseType2 {
  data: 'type 2';
}

function printResponse1(response: ResponseType1) {}
function printResponse2(response: ResponseType2) {}

// 定义请求-响应绑定的元组联合类型
type RequestResponsePairs = 
  | [request: RequestType1, response: ResponseType1]
  | [request: RequestType2, response: ResponseType2];

function myCache(...[request, response]: RequestResponsePairs) {
  if (request instanceof RequestType1) {
    // 此处TS自动推导response为ResponseType1，无类型错误
    printResponse1(response);
    return;
  }
  // 剩余分支自动推导response为ResponseType2
  printResponse2(response);
}

后续新增请求/响应类型时，只需要在RequestResponsePairs中追加对应的元组项即可，扩展性好。

方案2：保留原有泛型结构，分支内加类型断言 #

如果你不想修改原有函数的泛型结构，可以在已经做了运行时类型校验的分支内，手动给response加类型断言，本质是告诉TS你已经通过运行时判断保证了类型匹配：

class RequestType1 {
  readonly query = 'type 1';
}

interface ResponseType1 {
  data: 'type 1';
}

class RequestType2 {
  readonly query = 'type 2';
}

interface ResponseType2 {
  data: 'type 2';
}

function printResponse1(response: ResponseType1) {}
function printResponse2(response: ResponseType2) {}

type ToResponseType<RequestType> = RequestType extends RequestType1 ? ResponseType1 : (RequestType extends RequestType2 ? ResponseType2 : never);

function myCache<RequestType>(request: RequestType, response: ToResponseType<RequestType>) {
  if (request instanceof RequestType1) {
    // 运行时已经校验request类型，此处断言安全
    printResponse1(response as ResponseType1);
    return;
  }
  if (request instanceof RequestType2) {
    printResponse2(response as ResponseType2);
  }
}

内容的提问来源于stack exchange，提问作者inker