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

2022-10-20

準備

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

JavaScript

ベースの Spinner.js です。

import React, { forwardRef } from 'react';
import {
  Spinner as FlowbiteSpinner,
} from 'flowbite-react';

const Spinner = forwardRef((
  {
    children,
    color,
    light,
    size,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteSpinner
      color={color}
      light={light}
      size={size}
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteSpinner>
  );
});

export default Spinner;

TypeScript

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

import React, { forwardRef, LegacyRef } from 'react';
import {
  Spinner as FlowbiteSpinner,
  SpinnerProps as FlowbiteSpinnerProps,
} from 'flowbite-react';

type SpinnerProps = {} & FlowbiteSpinnerProps;

const Spinner = forwardRef((
  {
    children,
    color,
    light,
    size,
    ...otherProps
  }: SpinnerProps,
  ref: LegacyRef<HTMLSpanElement>,
) => {
  return (
    <FlowbiteSpinner
      color={color}
      light={light}
      size={size}
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteSpinner>
  );
});

export default Spinner;

結果

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

はい、できました。