TypeScript メモ

型定義で難しくてスルーしてしまっていた部分の再勉強です。
ユーティリティ型について、書き起こし。
参考:サバイバルTypeScript|ユーティリティ型 (utility type)

Required<T>

Tのすべてのプロパティからオプショナルであることを意味する?を取り除くユーティリティ型。
T(型引数)は、オブジェクトの型を表す型を代入する。

例

type ButtonProps = Pick<
  JSX.IntrinsicElements["button"],
  "onClick" | "children"
>;
type RequiredButtonProps = Required<ButtonProps>;

上記の例だと、ButtonPropsで定義した型は、

type ButtonProps = {
    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
    children?: React.ReactNode;
}

のようにonClickもchildrenもオプションになってる。

これをRequired<ButtonProps>とすることで、?を無くし、プロパティを必須にすることができる。

type RequiredButtonProps = {
    onClick: React.MouseEventHandler<HTMLButtonElement>;
    children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null;
}

わざとchildrenなしにしてみたところ…

<Button onClick={onButton1}></Button>

下記のようなエラーが出ました。

Property 'children' is missing in type '{ onClick: () => void; }' but required in type 'Required<ButtonProps>'.ts(2741)
index.d.ts(1376, 9): 'children' is declared here.

Partial<T>

Partial<T>は、オブジェクトの型Tのすべてのプロパティをオプションプロパティにする。

さっきのRequiredとは逆ですな。

type User = {
 id:string;
 name:string;
 email?:string;
 address?:string;
};

type PartialUser = Partial<User>;

とすることで、すべての項目をオプションにできる。

type PartialUser = {
 id?:string;
 name?:string;
 email?:string;
 address?:string;
};

と同じ型。