セクション 4: @types/react と @types/react-dom API
@types型定義は、ユーザーが使用する「公開」型と、内部で使用される「非公開」型の両方をエクスポートします。
自動生成された完全なリファレンスについては、SaltyCraneのReact TypeScript チートシートを参照してください。
@types/react
名前空間: React
最も一般的に使用されるインターフェースと型
ReactNode- JSX *内*でレンダリング可能なもの。これは、コンポーネントによってレンダリングできるものとは異なります！Component- すべてのクラスベースコンポーネントの基底クラスPureComponent- すべてのクラスベースの最適化されたコンポーネントの基底クラスFC,FunctionComponent- 関数コンポーネントの完全なインターフェース。独自の型を定義する代わりに、外部コンポーネントの型付けによく使用されます。CSSProperties- スタイルオブジェクトの型付けに使用されます。- すべてのイベント：イベントハンドラーの型付けに使用されます。
- すべてのイベントハンドラー：イベントハンドラーの型付けに使用されます。
- すべての定数：
Children、Fragmentなどはすべて公開されており、Reactランタイムの名前空間を反映しています。
あまり使用されないが知っておくと役立つもの
Ref-innerRefの型付けに使用されます。ElementType- 高階コンポーネントまたはコンポーネントに対する操作（例：ポリモーフィックコンポーネント）に使用されます。ReactElement-cloneElementに渡す必要がある場合に使用できます つまり、非常にまれに使用されます。ComponentType- 本来のコンポーネントを特に扱わない高階コンポーネントに使用されます。ReactPortal- プロパティをポータルとして型指定する必要がある場合に使用します。それ以外の場合は、ReactNodeの一部です。ComponentClass-Componentを拡張するクラス宣言によって生成されたコンストラクター関数の完全なインターフェース。独自の型を定義する代わりに、外部コンポーネントの型付けによく使用されます。JSXElementConstructor- TypeScriptがJSX式の開始タグに入れることができる有効なものとみなすものすべて。ComponentProps- コンポーネントのプロップス - HTML要素のラップ/ミラーリングに最も役立ちます。ComponentPropsWithRef- クラスベースのコンポーネントの場合、refプロパティを独自のインスタンス型に置き換えるコンポーネントのプロップス。ComponentPropsWithoutRef-refプロパティのないコンポーネントのプロップス。HTMLPropsとHTMLAttributes- これらは最も一般的なバージョンであり、グローバル属性用です（MDNで「グローバル属性」としてマークされている属性のリストを参照）。一般的には、React.ComponentProps、React.JSX.IntrinsicElements、または特殊化されたHTMLAttributesインターフェースを優先します。
特殊化されたHTMLAttributesのリスト
これらの属性は約50個あり、いくつかのHTML要素は網羅されていないことに注意してください。
AnchorHTMLAttributesAudioHTMLAttributesAreaHTMLAttributesBaseHTMLAttributesBlockquoteHTMLAttributesButtonHTMLAttributesCanvasHTMLAttributesColHTMLAttributesColgroupHTMLAttributesDataHTMLAttributesDetailsHTMLAttributesDelHTMLAttributesDialogHTMLAttributesEmbedHTMLAttributesFieldsetHTMLAttributesFormHTMLAttributesHtmlHTMLAttributesIframeHTMLAttributesImgHTMLAttributesInsHTMLAttributesInputHTMLAttributesKeygenHTMLAttributesLabelHTMLAttributesLiHTMLAttributesLinkHTMLAttributesMapHTMLAttributesMenuHTMLAttributesMediaHTMLAttributesMetaHTMLAttributesMeterHTMLAttributesQuoteHTMLAttributesObjectHTMLAttributesOlHTMLAttributesOptgroupHTMLAttributesOptionHTMLAttributesOutputHTMLAttributesParamHTMLAttributesProgressHTMLAttributesSlotHTMLAttributesScriptHTMLAttributesSelectHTMLAttributesSourceHTMLAttributesStyleHTMLAttributesTableHTMLAttributesTextareaHTMLAttributesTdHTMLAttributesThHTMLAttributesTimeHTMLAttributesTrackHTMLAttributesVideoHTMLAttributesWebViewHTMLAttributes
- すべてのメソッド：
createElement、cloneElementなどはすべて公開されており、ReactランタイムAPIを反映しています。
@Ferdaberのメモ：React.JSX.Elementがブラックボックスであるため、ほとんどの...Element型の使用を推奨しません。React.createElementによって生成されるものはすべて、基本型React.ReactElementであるとほぼ常に想定する必要があります。
名前空間: JSX
Element- すべてのJSX式の型。TypeScriptの制限のため、理想的にはこれを見る必要も使う必要もありませんが、実際にはあります。LibraryManagedAttributes- JSX要素がプロパティ型を宣言および初期化できる他の場所を指定します。コンポーネントの内部プロップスタイプを使用して、静的なdefaultPropsとpropTypesを解決するために使用されます。IntrinsicElements- JSXで小文字のタグ名として入力できるすべてのビルトインコンポーネント。「Intrinsic」の意味を知る必要がないため、HTML要素の属性を取得するためにこれを使用する場合は、React.ComponentProps<element>の方が読みやすいかもしれません。
あまり使用されないが知っておくと役立つもの
IntrinsicAttributesすべてのIntrinsicElementsがサポートする属性のセット…基本的にkeyだけです。ElementChildrenAttributeコンポーネントがサポートする子要素の型をTSが判断するために参照するプロパティの名前。基本的にchildrenプロパティ。ElementAttributesPropertyコンポーネントがサポートする属性をTSが判断するために参照するプロパティの名前。基本的にpropsプロパティ（クラスインスタンスの場合）。
使用しない/内部/非推奨
上記にリストされていないものはすべて、内部型と見なされ、公開されていません。不明な場合は、@types/reactのソースを確認してください。型には適切に注釈が付けられています。
SFCElementSFCComponentStateLegacyRefStatelessComponentReactType
非標準属性の追加
buttonやimgなどのホストコンポーネントで許可される属性は、HTMLリビングスタンダードに従います。リビングスタンダードの一部ではない、または特定のブラウザーでのみ実装されている新しい機能は、型エラーの原因となります。これらのブラウザー用にコードを記述するか、これらの属性をポリフィルする場合は、モジュール拡張を使用して、anyまたは@ts-ignoreを使用せずに、これらのコンポーネントの型チェックを行うことができます。
この例では、loading属性を追加します。これにより、Chromeで遅延読み込み画像がサポートされます。
// react-unstable-attributes.d.ts
import "react";
declare module "react" {
interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
loading?: "auto" | "eager" | "lazy";
}
}
@types/react-dom
作成中