.tsx拡張子ファイルは、Reactなどで利用するJSX構文をTypescriptで書いた際に保存される拡張子ファイルです。今回、typescriptの公式ドキュメントをのぞいてみたところ、少し普通の.tsファイルと比べた制約など学びを得たので、まとめていきたいと思います。
Contents
型アサーションに山括弧<>は使えない
型アサーションは、Typescriptによる型推論、あるいは既に型定義済みの変数の型を上書きするときに使うテクニックです。これは変数の前に<>をつけるやり方と、asを付すやり方との２通りが存在します。
const foo: any// 以下はどちらも同じ操作const str = <string> fooconst str = foo as stringしかし.tsxファイルにおいては、JSXの構文（つまりHTMLのタグ構文）も扱うので、それらと型アサーションの<>が混在すると、Typescriptランタイムがプログラムをパースする際に支障が出る可能性があります。そこで、.tsxにおいては<>を利用した型アサーションはできないようになっています。もう一方のasを使いましょう。
Reactと同じ命名規則がある
Reactの公式ドキュメントによると、ユーザが独自に定義したコンポーネントの名前は大文字で始めること、という命名規則があります。一方、<div>や<span>組み込みのコンポーネントは、すべて小文字始まりで定義されています。この仕様はReactがJSXを最終的にReact.createElement()する時に影響するため、.tsxファイルにおいても同様のコンベンションが定められています。
Intrinsic Elements
組み込み要素はJSX.IntrinsicElementsという特殊なインターフェースの中から検索されます。このインターフェースが指定されていない場合、型チェックは行われません。一方、指定されている時は、JSX.IntrinsicElementsのプロパティの中から組み込み要素の名前が検索されます。
declare namespace JSX { interface IntrinsicElements { foo: any }}<foo />; // ok<bar />; // errorまた、以下のように任意のstring型識別子を指定することもできます。
declare namespace JSX { interface IntrinsicElements { [elemName: string]: any; }}
