0Pricing
TypeScript Academy · レッスン

多相コンポーネント、as props

as propを持つ多相的なButtonコンポーネントを作り、組み込み・DOM propsを統合し、forwardRefとComponentRef でrefに型を付けます

「多相コンポーネント、as props」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全1レッスンが含まれています。

導入

目標: button、a、または as prop を介した任意の要素としてレンダリングできる、1 つのポリモーフィックな Button を作成します。その際、props と ref の型を維持します。

  • T を React.ElementType に制約する
  • props を安全にマージする
  • 転送する ref に型を付ける

基本型

OwnProps から始め、T の組み込み props と独自の props をマージするユーティリティ PolymorphicProps<T, P> を用意します。

import React from "react"

type OwnProps = {
  variant?: "solid" | "outline"
  children: React.ReactNode
}

type PolymorphicProps<T extends React.ElementType, P> = {
  as?: T
} & P & Omit<React.ComponentPropsWithoutRef<T>, keyof P | "as">

// Example: Omit avoids prop collisions (e.g., our OwnProps vs intrinsic props)

ポリモーフィックな Button

コンポーネントのデフォルトは button ですが、as を受け取れます。ref の型は T に応じて変わります（"a" の場合は HTMLAnchorElement など）。

import React, { forwardRef } from "react"

type OwnProps = { variant?: "solid" | "outline"; children: React.ReactNode }

type PolymorphicProps<T extends React.ElementType, P> = { as?: T } & P & Omit<React.ComponentPropsWithoutRef<T>, keyof P | "as">

const ButtonInner = <T extends React.ElementType = "button">(
  { as, variant = "solid", children, ...rest }: PolymorphicProps<T, OwnProps>,
  ref: React.ForwardedRef<React.ComponentRef<T>>
) => {
  const Component = (as || "button") as React.ElementType
  const style = variant === "outline" ? { border: "1px solid #333", padding: 8 } : { background: "#2563eb", color: "white", padding: 8, borderRadius: 6 }
  return <Component ref={ref} style={style} {...rest}>{children}</Component>
}

export const Button = forwardRef(ButtonInner) as <T extends React.ElementType = "button">(
  props: PolymorphicProps<T, OwnProps> & { ref?: React.Ref<React.ComponentRef<T>> }
) => JSX.Element

使用例

as="a" の場合、href などの組み込み props が利用可能になり、ref は HTMLAnchorElement として型付けされます。

import React, { useRef } from "react"
import { Button } from "./Button"

export default function App() {
  const btnRef = useRef<HTMLButtonElement>(null)
  const linkRef = useRef<HTMLAnchorElement>(null)

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <Button ref={btnRef} onClick={() => alert("clicked")}>Save</Button>
      <Button as="a" ref={linkRef} href="#docs" variant="outline">Docs</Button>
    </div>
  )
}

バリエーション

ポリモーフィックなコンポーネントをラップしても、柔軟性を維持できます。ComponentProps<typeof Button> を使ってその props を継承してください。

import React from "react"
import { Button } from "./Button"

export function DangerButton(props: Omit<React.ComponentProps<typeof Button>, "variant">) {
  return <Button {...props} style={{ background: "#dc2626", color: "white", padding: 8, borderRadius: 6 }} />
}

// Works with polymorphism too
export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <DangerButton>Delete</DangerButton>
      <DangerButton as="a" href="#confirm">Delete link</DangerButton>
    </div>
  )
}

ヒント

ヒント:

  • T を React.ElementType に制約してください。
  • props 名の衝突を解決するには Omit を使ってください。
  • forwardRef で ref を転送し、React.ComponentRef<T> として型付けしてください。

ポリモーフィックな型付けの確認

クイックチェック: ref を転送するポリモーフィックなコンポーネントを正しくモデル化している型付けはどれですか。

まとめ

まとめ: as prop を持つポリモーフィックな Button を作り、組み込み props を安全にマージし、転送する ref に型を付けました。これにより、利用側で正しい IntelliSense が得られます。

よくある質問

「多相コンポーネント、as props」レッスンは無料ですか？

はい。「多相コンポーネント、as props」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全1レッスンが含まれています。

「多相コンポーネント、as props」で何を学びますか？

as propを持つ多相的なButtonコンポーネントを作り、組み込み・DOM propsを統合し、forwardRefとComponentRef でrefに型を付けます ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。

「多相コンポーネント、as props」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

← TypeScript Academyに戻る