TypeScript如何定义基于布尔值判断的条件可选属性类型？

你可以使用TypeScript的可辨识联合类型实现你要的效果，让TS能根据success字段的值自动收窄类型，无需额外可选链操作。

步骤1：重新定义响应类型 #

将原来的单个类型拆分为成功、失败两个独立子类型，再联合为总响应类型：

// 成功响应：success固定为true，data必传，无err字段
type SuccessResponse = {
  success: true;
  data: { [key: string]: string };
}

// 失败响应：success固定为false，err必传，无data字段
type ErrorResponse = {
  success: false;
  err: { code: number, message: string };
}

// 总响应类型是两者的联合
type ServerResponse = SuccessResponse | ErrorResponse;

步骤2：直接按原有逻辑编写代码 #

此时TS会自动根据success的判断结果收窄对应类型，不需要再加可选链：

const resp: ServerResponse = await fetch(...);

if(resp.success) {
  // 此处TS自动识别resp为SuccessResponse类型，data必然存在
  doSomething(resp.data.foo);
} else {
  // 此处TS自动识别resp为ErrorResponse类型，err必然存在
  handleErr(resp.err.message);
}

泛用扩展（可选） #

如果要适配不同接口的data返回结构，可以定义为泛型类型复用：

type SuccessResp<T> = {
  success: true;
  data: T;
}

type ErrorResp = {
  success: false;
  err: { code: number, message: string };
}

type ApiResponse<T = unknown> = SuccessResp<T> | ErrorResp;

// 使用示例：指定当前接口的data是用户信息结构
type UserInfo = { id: string; name: string; phone: string };
const resp: ApiResponse<UserInfo> = await fetch('/api/user/info');

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