型ガードで安全性を高める！TypeScript Reactにおけるコンポーネントプロパティ型の活用

2024-04-11

TypeScript React: コンポーネントプロパティ型へのアクセス

TypeScript と React を組み合わせることで、コンポーネントのプロパティ型にアクセスし、コードの安全性を向上させることができます。このチュートリアルでは、以下の方法について説明します。

React.ComponentProps を使用した型取得
as キーワードによる型エイリアスの作成
カスタム型ガードによる型検査

React.ComponentProps 型は、コンポーネントのプロパティ型を取得するために使用できます。以下の例では、MyComponent コンポーネントのプロパティ型を MyComponentProps という型エイリアスに割り当てています。

interface MyComponentProps {
  // ...
}

const MyComponent: React.FC<MyComponentProps> = ({ prop1, prop2 }) => {
  // ...
};

MyComponentProps 型を使用することで、prop1 や prop2 などのプロパティにアクセスできるようになります。

as キーワードを使用して、コンポーネントの型エイリアスを作成することができます。以下の例では、MyComponent コンポーネントの型エイリアスとして MyComponentAs を作成しています。

const MyComponentAs = MyComponent as React.FC<{ prop1: string }>;

const MyComponent: React.FC<MyComponentProps> = ({ prop1, prop2 }) => {
  // ...
};

MyComponentAs 型を使用することで、prop1 プロパティが string 型であることを保証することができます。

カスタム型ガードを使用して、コンポーネントのプロパティ型を検査することができます。以下の例では、isMyComponent というカスタム型ガードを作成し、MyComponent コンポーネントかどうかを検査しています。

function isMyComponent(component: React.Component): component is MyComponent {
  return (component as MyComponent).prop1 !== undefined;
}

const MyComponent: React.FC<MyComponentProps> = ({ prop1, prop2 }) => {
  // ...
};

const SomeComponent = () => {
  const component = <MyComponent prop1="hello" prop2="world" />;

  if (isMyComponent(component)) {
    // ...
  }
};

isMyComponent 型ガードを使用することで、component が MyComponent コンポーネントであることを確認してから、prop1 プロパティにアクセスすることができます。

React.ComponentProps を使用した型取得

interface MyComponentProps {
  prop1: string;
  prop2: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ prop1, prop2 }) => {
  // `prop1` と `prop2` はそれぞれ `string` 型と `number` 型であることが保証される
  console.log(prop1); // "hello"
  console.log(prop2); // 10

  return <div>{prop1} - {prop2}</div>;
};

const App = () => {
  return <MyComponent prop1="hello" prop2={10} />;
};

as キーワードによる型エイリアスの作成

const MyComponentAs = MyComponent as React.FC<{ prop1: string }>;

const MyComponent: React.FC<MyComponentProps> = ({ prop1, prop2 }) => {
  // ...
};

const App = () => {
  const component = <MyComponentAs prop1="hello" />; // 型エラー: prop2 が存在しない

  return <div>{component}</div>;
};

カスタム型ガードによる型検査

function isMyComponent(component: React.Component): component is MyComponent {
  return (component as MyComponent).prop1 !== undefined;
}

const MyComponent: React.FC<MyComponentProps> = ({ prop1, prop2 }) => {
  // ...
};

const App = () => {
  const component = <MyComponent prop1="hello" prop2={10} />;

  if (isMyComponent(component)) {
    // `component` は `MyComponent` コンポーネントであることが保証される
    console.log(component.prop1); // "hello"
  }

  return <div>{component}</div>;
};

Typescript React: コンポーネントプロパティ型へのアクセス方法

React.useState と React.useEffect の型パラメーターを使用して、状態変数や効果の型を定義することができます。

const [count, setCount] = React.useState<number>(0);

React.useEffect(() => {
  // `count` は `number` 型であることが保証される
  console.log(count);
}, [count]);

React.forwardRef と React.Ref を使用して、コンポーネントへの参照に型情報を付与することができます。

const MyComponent = React.forwardRef<MyComponentRef, MyComponentProps>(
  ({ prop1, prop2 }, ref) => {
    // ...
  }
);

interface MyComponentRef {
  current: MyComponent;
}

const App = () => {
  const ref = React.createRef<MyComponentRef>();

  return <MyComponent ref={ref} prop1="hello" prop2={10} />;
};

TypeScript の型ガードを使用して、コンポーネントの型を検査することができます。

function isMyComponent(component: React.Component): component is MyComponent {
  return (component as MyComponent).prop1 !== undefined;
}

const App = () => {
  const component = <MyComponent prop1="hello" prop2={10} />;

  if (isMyComponent(component)) {
    // `component` は `MyComponent` コンポーネントであることが保証される
    console.log(component.prop1); // "hello"
  }

  return <div>{component}</div>;
};

これらの方法は、それぞれ異なるユースケースに適しています。状況に応じて適切な方法を選択してください。

reactjs typescript