🐣 React実践の教科書 P225〜229
ENJIN React.js
作成日： 2022/01/11
3

今日やったこと

  • 「モダンJavaScriptの基本から始める React実践の教科書」 P225〜229
    • 8-4 型定義の管理方法
    • 8-5 コンポーネントの型定義

学習メモ

型定義の管理方法

型を一元管理するための user.ts を作成

export type User = {
    id: number;
    name: string;
    age: number;
    personalColor: string;
};

importして使用

import type { User } from "./types/user";

import type {~} from のように import のあとに type とついているのは
TypeScript ver3.8 から追加された明示的に型定義のみをimportするための構文

  • type をつけなくても動作するが、型定義のimportをするときは忘れずにtypeを使用するようにする
    • そうすることでコンパイル時に型に関するコードは取り除かれるようになるので不要なコードを含まないようにすることができる

コンポーネントの型定義

  • 実は関数コンポーネント自体の型定義というものもある
    • FC や VFC
  • コンポーネントの型定義を使用することでJSXを返却していないとエラーにできたり、コンポーネント独自の設定ができるようになるので、基本的には関数コンポーネントにはFCやVFCを指定していくようにする

指定方法は、以下のようにコンポーネント名のあとに通常の型と同じように指定する

指定前：

import type { User } from "../types/user";

export const ListItem = (props:User) => {
    const { id, name, age, personalColor } = props;
    return (
        <p style="{{ color: personalColor }}">
            {id}：{name}{(age)}
        </p>
    );
};

指定後：

import type { FC } from "react";
import type { User } from "../types/user";

export const ListItem: FC<User> = props => {
    const { id, name, age, personalColor } = props;
    return (
        <p style="{{ color: personalColor }}">
            {id}：{name}{(age)}
        </p>
    );
};

FCとVFCの違い

一言で言うと「FCは型定義に暗黙的にchildrenを含む。VFCは含まない」という違いがある（2021年8月時点。React ver 17）
ただ、以下にあるようにReact ver 18でFCからもchildrenが除外される予定になっている

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/46691

暗黙的にchildrenが含まれると使うか使わないのかわかりづらいよね、ということで、childrenを使用する際は明示的に型指定していきましょうという流れなので、現状（React ver17）の最適解としては「VFCを使用しchildrenを明示的に指定（children: React.ReactNode）しておいて、ver18になった段階でVFCを全てFCに置換する」となる

所感

childrenが何なのかすっかり忘れていて調べ直しました。
早く手を動かせるところまで進めたいです。
Yuri Ishiguro