DX Component - Issue - type 'string' is not assignable to type 'error'

背景简介

开发 DX Comonent 控件时想要通过动态传递参数，但是控件中指定了只能传递某些参数，因此如果定义过于宽泛会便宜报错。

样例报错

Type 'string' is not assignable to type '"error" | "warning" | "success" | undefined'.ts(2322)
Text.d.ts(12, 5): The expected type comes from property 'status' which is declared here on type 'IntrinsicAttributes & TextProps & ForwardProps & { children?: ReactNode; }'
(property) TextProps.status?: "error" | "warning" | "success" | undefined
Render text with semantic color based on a status.

错误原因

错误信息表明正在尝试将一个类型为 string 的变量赋值给一个期望类型为 "error" | "warning" | "success" | undefined 的属性。在 TypeScript 中，不能直接将一个 string 类型的变量赋给一个联合类型属性，除非这个变量是联合类型中明确列出的其中一个值。

要解决这个问题，需要确保 status 变量在赋值给 Text 组件的 status 属性之前，它的值是 "error"、"warning"、"success" 之一，或者为 undefined。

解决步骤

第一步： 增加status校验方法

function isValidStatus(s: string): s is 'error' | 'warning' | 'success' {
  return s === 'error' || s === 'warning' || s === 'success';
}

第二步： 引用 status 之前调用校验来明确 status 取值是否合规

if (isValidStatus(textStatus)) {
    return (<StyledPersPersDxComponentHighlightTextWrapper><Text status={textStatus} variant='primary'>{value}</Text></StyledPersPersDxComponentHighlightTextWrapper>);
  } else {
    return (<StyledPersPersDxComponentHighlightTextWrapper><Text status='error' variant='primary'>{value}</Text></StyledPersPersDxComponentHighlightTextWrapper>);
  }

以上便是本文的全部内容，感谢您的阅读。