Связки Rescript для типов объединений Typescript

Привет

Typescript имеет прекрасную концепцию объединения различных типов для заданного атрибута интерфейса/переменной/параметра и т.д.
Rescript более строг, вы можете иметь только один тип для данного атрибута/переменной/параметра. Поэтому в этом посте я хотел бы показать, как создать тип объединения в Rescript, который будет принят и typescript.

Допустим, у нас есть тип prop, который принимает строку | число.

interface Props {
  ...otherProps,
  badgeContent: string | number
}

Войти в полноэкранный режим Выход из полноэкранного режима

На стороне rescript нам нужно придумать модуль, который будет обертывать число и строку следующим образом

@unboxed
type rec t = Any('a): t

module String_or_number: {
  type t
  type case =
    | Number(float)
    | String(string)
  let number: float => t
  let string: string => t
  let classify: t => case
} = {
  @unboxed
  type rec t = Any('a): t
  type case =
    | Number(float)
    | String(string)
  let number = (v: float) => Any(v)
  let string = (v: string) => Any(v)
  let classify = (Any(v): t): case =>
    if Js.typeof(v) == "number" {
      Number((Obj.magic(v): float))
    } else {
      String((Obj.magic(v): string))
    }
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Использование типа String_or_number

module Badge = {

  @genType.import("./Badge") @react.component
  external make: (
    ...,
    ~badgeContent: String_or_number.t=?,
  ) => React.element = "Badge"

Вход в полноэкранный режим Выход из полноэкранного режима

Если мы хотим передать число в badgeContent, то используем его следующим образом

<Badge badgeContent=String_or_number.number(1.0) />

Войти в полноэкранный режим Выйти из полноэкранного режима