こんばんわ。まちゅと申します。
今回は保守性がよくTypeScriptの特徴をシッカリと活用した、
無駄が少ない設計方法を書いていきます。
拙い記事ですが、何卒ご容赦の程よろしくお願いいたします。
typeとinterfaceの違いと、どちらを使うべきか
本題に入る前に、基本的な所です。
https://www.totaltypescript.com/type-vs-interface-which-should-you-use
-
interfaceでは共用体、条件付き型を表現できない。typeは任意の型を表現できる -
interfaceではextendsが使用できる。typeではできない。 -
extendsは&よりもわずかにパフォーマンスがいい -
interfaceは予期せぬ拡張で不具合発生可能性がある -
typeは暗黙的インデックスシグネチャがある
特別な理由が無い限りは、
基本的にtypeを使うが良さそうです。
TypeScriptの公式ドキュメントでの比較です。
コンポーネント設計
では、typeを活用した最小構成は下記です。
今回は、例としてただ文字を表示させるだけです。
component.tsx
import { type FC } from "react";
export type HogeProps = {
title: string;
};
export const Hoge: FC<HogeProps> = ({ title }) =>
<>{title}</>;
parent.tsx
import { Hoge, type HogeProps } from "./component";
import { NextPage } from "next";
type ParentProps = {};
const hogeProps: HogeProps = {
title: "fuga",
};
const Parent: NextPage<ParentProps> = () => <Hoge {...hogeProps} />;
export default Parent;
上記は例ですが、
コンポーネントの最小構成かと思います。
ポイントは、FCの型引数を定義する事です。
プロパティの型をexportしてあげることで、
呼び出し側とコンポーネントで
インターフェースの確約ができて
安全です。
パッと見ですが、
FCやNextPageに何も入れてない記事が多すぎます。
getStaticPropsを使う場合にもプロパティに型が効くので型を設定したいところです。
TypeScriptの利用は、
こういったオブジェクト同士のインターフェースのエラーを無くすのが第一目的なので意識したいですね。
追記していきます・・
まとめ
ざっくりと、自分が書いている方法を書きましたが、
問題点やもっと効率な方法があれば教えていただけると助かります。