[React+Tailwind] Breadcrumb を TypeScript に書き直してみた | 心を無にして始める React

2022-09-20

準備

書き直すベースはこちらの Breadcrumb コンポーネントです。

JavaScript

ベースの Breadcrumb.js です。

import { forwardRef } from 'react';
import { Badge as FlowbiteBadge } from 'flowbite-react';

const Badge = forwardRef((
  {
    children,
    color = "info",
    href,
    icon,
    size,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteBadge
      color={color}
      href={href}
      icon={icon}
      ref={ref}
      size={size}
      {...otherProps}
    >
      {children}
    </FlowbiteBadge>
  );
});

export default Badge;

TypeScript

Breadcrumb.tsx として編集します。

import { forwardRef, LegacyRef } from 'react';
import {
  Badge as FlowbiteBadge,
  BadgeProps as FlowbiteBadgeProps,
} from 'flowbite-react';

type BadgeProps = {} & FlowbiteBadgeProps;

const Badge = forwardRef((
  {
    children,
    color = "info",
    href,
    icon,
    size,
    ...otherProps
  }: BadgeProps,
  ref: LegacyRef<HTMLSpanElement>,
) => {
  return (
    <FlowbiteBadge
      color={color}
      href={href}
      icon={icon}
      ref={ref}
      size={size}
      {...otherProps}
    >
      {children}
    </FlowbiteBadge>
  );
});

export default Badge;

結果

変化はないので、前と同じ。

はい、できました。