本セクションでは、これまでに触れる機会のなかったReact + TypeScriptの便利な型や、柔軟な型定義を可能にするTypeScriptの記法について解説します。

• 型の確認方法 • CSSProperties • ComponentProps • ComponentPropsWithoutRef • restオペレーター • functionの型定義 • 型アサーション（as） • as const • anyとunknown • Type Utility • Pick • Omit • Partial • Required • Record • ジェネリクス • 型定義に使うジェネリクス • functionに使うジェネリクス • 型定義とfunction両方に使うジェネリクス • 複数のジェネリクス • インデックス・シグネチャ • enum

本セクションでもコードを書きながら進めるので、これまでと同じように「React + Vite」をインストールしましょう。ターミナルで次のコマンドを実行してください。

npm create vite@latest

アプリの名前は「chapter-6」とします。「React」→「TypeScript」を選びインストールを完了してください。「chapter-6」フォルダをVS Codeで開きましょう。ターミナルから下記コマンドで必要なパッケージをインストールします。

npm i

次にsrcフォルダを開き、index.cssに書かれているコードをすべて消します。App.tsxに書かれているコードもすべて消して、次のコードを書いてください。

// App.tsx

const App = () => {
    return (
        <>
            <h1>こんにちは</h1>
        </>
    )
}

export default App

そしてnpm run devで起動します。

型の確認方法

「command」+「C」を押しながらコードをクリック（Windowsの場合は「CTRL」 + クリック）すると、そのコードの型の情報を確認できます。