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

2022-09-26

準備

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

JavaScript

ベースの Card.js です。

import { forwardRef } from 'react';
import { Card as FlowbiteCard } from 'flowbite-react';

const Card = forwardRef((
  {
    children,
    horizontal,
    href,
    imgAlt,
    imgSrc,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteCard
      horizontal={horizontal}
      href={href}
      imgAlt={imgAlt}
      imgSrc={imgSrc}
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteCard>
  );
});

export default Card;

TypeScript

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

import { forwardRef, LegacyRef } from 'react';
import {
  Card as FlowbiteCard,
  CardProps as FlowbiteCardProps,
} from 'flowbite-react';

type CardProps = {} & FlowbiteCardProps;

const Card = forwardRef((
  {
    children,
    horizontal,
    href,
    imgAlt,
    imgSrc,
    ...otherProps
  }: CardProps,
  ref: LegacyRef<HTMLDivElement>,
) => {
  return (
    <FlowbiteCard
      horizontal={horizontal}
      href={href}
      imgAlt={imgAlt}
      imgSrc={imgSrc}
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteCard>
  );
});

export default Card;

結果

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

はい、できました。