導入
近年、型安全なフロントエンド開発を実現するために、ReactとTypeScriptの組み合わせが人気を博しています。本記事ではその理由と基本的な使い方を説明します。
TypeScriptの基本
TypeScriptはJavaScriptのスーパーセットで、静的型付けと他の強化機能をJavaScriptに追加します。以下は基本的な型の例です。
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];
さらに、インターフェースや型エイリアスを用いてカスタム型を定義することができます。
interface User {
name: string;
age: number;
}
type Point = {
x: number;
y: number;
};
ReactとTypeScriptの結合
Create React Appを使用して新しいプロジェクトを作成する際、--template typescriptオプションを追加することでTypeScriptテンプレートを適用できます。
ReactのPropsとStateも型を定義することができます。
type AppProps = {
message: string;
}
const App = ({ message }: AppProps) => <div>{message}</div>;
Reactコンポーネントの型付け
Reactコンポーネント（関数とクラス）とそのイベントハンドラにも型をつけることができます。
import React, { FC, ChangeEvent } from 'react';
interface Props {
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
}
export const Input: FC<Props> = ({ onChange }) => {
return <input onChange={onChange} />;
};
高度な型操作
TypeScriptではジェネリックスや条件付き型、マッピング型などを用いて高度な型操作を行うことができます。
TypeScriptとReact Hooks
React Hooks（useStateやuseEffectなど）にも型をつけることができます。
const [count, setCount] = useState<number>(0);
useEffect((): void => {
document.title = `Count is ${count}`;
}, [count]);
結論
TypeScriptを使用することで、コードの品質を高め、バグを早期に発見し、開発者の生産性を向上させることが可能になります。しかし、学習コストや開発速度の低下といった欠点も考慮する必要があります。
参考リンク
下記のリンクはReactとTypeScriptを組み合わせて使用する際に役立つ資料です。
- TypeScript公式ドキュメント: https://www.typescriptlang.org/
- Create React App公式ドキュメント: https://create-react-app.dev/docs/adding-typescript/
まとめ
ReactとTypeScriptの組み合わせは、型安全性を保ちながら効率的なフロントエンド開発を行うための強力なツールです。開始するには少し学習カーブがありますが、その労力は間違いなく報われるでしょう。
今後もReactとTypeScriptに関する最新情報をお届けしていきますので、ブログの更新をお楽しみに！
コメント