.tsx
(.ts
の代わりに)を使用してください。tsconfig.json
のcompilerOptions
で "jsx" : "react"
を使ってください。npm i -D @types/react @types/react-dom
)。.tsx
ファイルにインポートします(import React from "react"
となります)。$ npm i -g create-react-app
というコマンドでローカルPCにグローバルにインストールできます。そうすれば、Reactの公式Webサイトに書かれているように$ npx create-react-app my-app --template typescript
というコマンドで、最初からTypeScriptを利用可能なプロジェクトを簡単に作成できます。React.createElement('div')
とReact.createElement(MyComponent)
のJavaScriptのコンパイル結果に同じではありません)。どちらとして扱われるかは、最初の文字のケース(大文字小文字)です。foo
はHTMLタグとして扱われます。そして、Foo
はコンポーネントとして扱われます。foo
の型はJSX.IntrinsicElements.foo
です。これらの主要な型は、セットアップの一部としてインストールした型定義ファイルreact-jsx.d.ts
の中で、予め定義されています。下記にその中に含まれる型定義のサンプルを示します。React.FC
インターフェースを使ってステートレスなFunctionコンポーネントを定義することができます。React.FC
は単に、React.FunctionComponent
の短いバージョンです。props
プロパティに基づいて型チェックされます。コンポーネントは、JSXが、どのように変換されるか、ということを考慮して型チェックされます。例えばJSXのタグの属性は、コンポーネントのprops
の一部である必要があります。react.d.ts
は、React.Component<Props,State>
クラスを定義しています。このクラスを、コンポーネントを作成するときに継承します。このクラスは、そのコンポーネント独自のProps
とState
の型をジェネリクスとして設定できるようになっています。これを以下の例で示します(下記の例では、Stateには空のオブジェクト型を設定しています):JSX
やstring
をレンダリングすることができます。これらはすべてReact.ReactNode
型に統合されていますので、レンダリング可能なものを受け入れる場合などに使用してください。React.ReactElement<T>
という型を提供しています。これを、<T/>
クラスコンポーネントのインスタンスを保持できる型アノテーションに利用できます。例えば以下の通りです:もちろん、これを関数の引数や、コンポーネントのPropsの型として使用することもできます。
React.Component<Props>
はReact.ComponentClass<P> | React.StatelessComponent<P>
のように2つの種類のコンポーネントの型を統合しています。なので、Props
型を受け取り、JSXを使ってレンダリングする何かを受け入れることができます。extends
を使用すると、コンパイラがジェネリックであることを教えられます。extends
は、ジェネリックの型に制約を付けるためのキーワードです。{}
をextends
する、ということは、オブジェクトであれば、何でも良い、ということです。なので、単に構文エラーを回避するために、このようにすることができます:null
で初期化できます。そして、それをコンポーネントのrefプロパティに渡したコールバック関数で初期化できます。?
を使って、デフォルト値のあるPropsを定義できます。このPropsには、(外部からReactの仕組みによって)値が渡されます(これが最も理想的なものとは限りませんが、今思いつく限りでは、シンプルでミニマムなコードです)。@types/react
)には定義されていません。しかし、アンビエント宣言(declare
)を使って簡単に定義できます。例えば、my-awesome-slider
というWebComponentがあるとします。これは、MyAwesomeSliderProps
を受け取ります。この場合、以下のようになります: