logo 公式Webサイト

パワフルな
ブログ

useStateの型として型エイリアスを定義する

JavaScriptnext.jsReactTypeScript
2024年5月15日

useStateに型エイリアスを定義することが多いので、まとめさせていただきます。

型エイリアスを準備

オブジェクト内の各プロパティに対して型を定義するためのエイリアスを準備し、exportしておきます。
また、今回はtype.tsというものを用意し、そこからimportする前提となります。

export type userInfo = {
  name: string;
  mail: string;
  tel: number;
};

useStateにエイリアスを型定義する

useStateを作成する際に、下記の形でuserInfoを定義します。
イメージとしては、ユーザーがログインしている場合はuserInfoに基づいたデータを取得し、取得していない場合はnullを許容します。
また、今回はユニオン型を使用し、許容する型|許容する型といった形で定義をしています。
また、ログインしていない場合に初期状態の画面を描画する前提としている為、初期値はnullとします。

const [user, setUser] = useState<userInfo | null>(null);

状態を確認する

下記の形で、ログインしている場合はログインしているという文言、ログインしていない場合はログインしていませんという文言が表示されます。

import React from "react";
import { useState } from "react";
import { userInfo } from "./type/type";

function test1() {
  const [user, setUser] = useState<userInfo | null>(null);
  return <div>{user ? "ログインしている" : "ログインしていません"}</div>;
}

export default test1;

ではsetUserにエイリアス型に基づいたオブジェクトをセットしてみましょう。

import React from "react";
import { useState, useEffect } from "react";
import { userInfo } from "./type/type";

function test1() {
  const [user, setUser] = useState<userInfo | null>(null);
  useEffect(() => {
    setUser({
      name: "test",
      mail: "test@test.com",
      tel: 00000000000,
    });
  }, []);

  return <div>{user ? "ログインしている" : "ログインしていません"}</div>;
}

export default test1;

上記のような形にした場合は、画面上にログインしていると表示されます。

このようにエイリアス型とユニオン型をuseStateに定義してあげることで、幅広い活用が可能となります。