Reactを使いこなすための最低限のTypeScriptの基礎

2025年2月5日

URLをコピーしました！

こんにちは、ゆうきです。

Reactを使いこなすために、最低限のTypeScriptの基礎を習得したい

そういった方に向けて、必須の基礎をコンパクトにまとめました。

これからTypeScriptを学ぶ方にうってつけの記事になってます。

はじめに

TypeScriptはwebサービスのみならず、スマホアプリやデスクトップアプリ、なんならWeb3.0のツールなど、多種多様のシステムで使われる言語です。

だからこそ複雑な部分も多いですが、一般的に現場で仕事するWebエンジニアは、仕事を効率にこなす目的なら、TypeScriptの全てを理解する必要はありません。

仕事で使える最低限の部分だけ理解して、あとは実践しまくる。
それが一番早く上達します。

ここでは最低限の基礎をコンパクトにまとめています。

ReturnTypeとAwaited

関数の戻り値の型を取得するには、ReturnTypeを使います。

また、async awaitのような、非同期処理を行う関数の場合、その戻り値の型を取得するには、Awaitedで囲む必要があります。

export async function loader() {
  return {…}
}

type LoaderData = Awaited<ReturnType<typeof loader>>

childrenの型にReactNodeを使う

Reactには一般的に2種類の小要素の型があります。

ReactElement: <Component />のような関数をjsxで呼び出せる型
ReactNode: ReactElementの特徴に加えて、文字列、数値、nullなどの、jsxであり得るすべての型

上記を考慮して、コンポーネントのchildrenにしてする型はReactNodeを使用することが多いです。

function Heading(props: { children: ReactNode }) {
  return <h1 className="text-2xl font-bold">{props.children}</h1>
}

<Heading>Hello</Heading>

子要素にpropsを渡すときは、React.ComponentPropsを使用する

buttonやinputのような、渡すpropsの型がすでに決まっているものに対してはReact.ComponentPropsを使います。

下記のように<>の部分にタグの名前を記載すると、そのpropsの型を全て返すようになります。

function Button(props: React.ComponentProps<"button">) {
  return <button {...props} />
}

また、上記はtypeof演算子を使ったものでも機能します。

function PrimaryButton(props: React.ComponentProps<typeof Button>) {
  return <Button variant="primary" {...props} />
}

ただ、buttonのpropsにはあるけど、カスタムで作ったコンポーネントに渡したくないpropsがある場合は、下記のようにComponentPropsはあえて使わないパターンもあります。

function Button({
  variant,
  ...props
}: {
  variant: "primary"
  // these aren't being used explicitly
  // they've probably been added one by one as a developer needs them
  type: string
  className: string
}) {
  return (
    <button className={variant === "primary" ? "bg-blue-500" : ""} {...props} />
  )
}

interaction(型結合)

下記のように2つの型を結合したい場合は、型結合(&)を使います。

function Button({
  variant,
  className,
  ...props
}: { variant: "primary" | "secondary" } & React.ComponentProps<"button">) {
  return (
    <button
      {...props}
      className={cn(
        "bg-blue-500",
        variant === "secondary" && "bg-gray-500",
        className,
      )}
    />
  )
}

型から使いたくない要素を省いて使いたい場合はOmitを使用

下記コードのように、buttonのprops要素であるclassNameをカスタムコンポーネントのpropsとして使いたくない場合は、Omitを使います。

buttonのpropsの中でclassName以外を取り出して定義するということができます。

function Button({
  variant,
  className,
  ...props
}: { variant: "primary" | "secondary" } & Omit<
  React.ComponentProps<"button">,
  "className"
>) {
  return (
    <button
      {...props}
      className={cn("bg-blue-500", variant === "secondary" && "bg-gray-500")}
    />
  )
}