提取条件逻辑后，如何实现TypeScript类型收窄消除React组件TS警告？

问题描述 #

我需要条件渲染React组件TransactionSummary，该组件要求paymentSetup为已定义状态（类型为PaymentSetupType | null）。为保持代码整洁，我将条件逻辑提取到变量canShowTransactionSummary中，当该变量为true时渲染组件，但TypeScript抛出类型不兼容警告：

type 'PaymentSetupType | null' is not assignable to type 'PaymentSetupType'.
  Type 'null' is not assignable to type 'PaymentSetupType'.

我不想直接将条件写在组件前或使用类型断言，请问有哪些其他实现类型收窄的方法？

提取条件逻辑的代码示例 #

const canShowTransactionSummary = Boolean(paymentSetup && several_other_conditions);

return (
   canShowTransactionSummary && 
   <TransactionSummary paymentSetup={paymentSetup} ...non_relevant_props />
)

TransactionSummary组件简化定义 #

type PaymentSetupType = {
  unitCost: number;
  // 其他属性（无关紧要）
}

interface Props {
  currency: string;
  quantity: number;
  paymentSetup: PaymentSetupType;
}

const TransactionSummary = ({
  currency,
  quantity,
  paymentSetup,
}: Props): React.ReactElement => {
  const { i18n } = useTranslation();

  return (
    <div>
      捐赠金额：
        {getFormatedCurrency(
          i18n.language,
          currency,
          paymentSetup.unitCost * quantity
        )}，共{quantity}棵树
    </div>
  );
};

解决方案 #

1. 使用类型谓词函数 #

将判断逻辑封装为返回类型谓词的函数，让TypeScript明确知道函数返回true时，paymentSetup肯定不是null：

// 定义类型谓词函数
function isPaymentSetupValid(
  paymentSetup: PaymentSetupType | null,
  ...otherConditions: boolean[]
): paymentSetup is PaymentSetupType {
  return paymentSetup !== null && otherConditions.every(cond => cond);
}

// 组件中使用
const canShow = isPaymentSetupValid(paymentSetup, several_other_conditions);

return (
  canShow && <TransactionSummary paymentSetup={paymentSetup} ...non_relevant_props />
);

2. 避免用Boolean()包裹条件表达式 #

Boolean()会将表达式结果转换为纯布尔值，丢失TypeScript的类型收窄信息。直接保留原始表达式即可：

// 直接保留表达式，不转为布尔值
const canShowTransactionSummary = paymentSetup && several_other_conditions;

return (
  canShowTransactionSummary && 
  <TransactionSummary paymentSetup={paymentSetup} ...non_relevant_props />
);

如果several_other_conditions是多个条件的组合（比如cond1 && cond2 && cond3），直接写进表达式里，TypeScript会自动根据表达式结果收窄paymentSetup的类型。

3. 封装泛型条件渲染组件 #

通过泛型组件封装条件渲染逻辑，既保持代码整洁，又能准确传递类型信息：

// 通用条件渲染组件
type ConditionalRenderProps<T> = {
  when: T | null | undefined;
  children: (validValue: T) => React.ReactNode;
};

const ConditionalRender = <T,>({ when, children }: ConditionalRenderProps<T>) => {
  if (when) {
    return children(when);
  }
  return null;
};

// 组件中使用
return (
  <ConditionalRender 
    when={paymentSetup && several_other_conditions ? paymentSetup : null}
  >
    {(validPaymentSetup) => (
      <TransactionSummary paymentSetup={validPaymentSetup} ...non_relevant_props />
    )}
  </ConditionalRender>
);

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