こまったこと:
1. カスタムソースディレクトリー ./src.react を tsc が認識できなかった
諸事情により ./src ではなく ./src.react に react 用のソースを配置していたが、 tsconfig.json の include では "." 文字の入ったディレクトリーは認識しない仕様らしく困りました。
考えた解決方法:
- symlink を作って渡す
./src-reactに変える
もんやり感はありましたが (2) でディレクトリーの名前から "." を排除して解決しました。ちなみに React のソースファイルパスのカスタムは react-app-rewired で eject-free に対応しています。
2. .tsx 化したモジュールで他の .tsx 化したモジュールを import できなかった
import Hoge from "./Hoge.tsx"← ダメ🙅♀️import Hoge from "./Hoge"← ヨシ！🙆♀️
3. 独自定義のタグが JSX.IntrinsicElements に無いですよエラーで困った
独自定義のタグ、例えば GUI のルック・アンド・フィール的に Xel を使っていると <x-box> とか <x-button> とか使います。TypeScript化していない状態では一般的なHTMLタグと同様に埋め込めましたが、 TypeScript にしたら
Property 'x-box' does not exist on type 'JSX.IntrinsicElements'. TS2339
などと怒られてビルドできなくなりました。
単純なタグとしてのみの場合、かつ独自定義のタグが少ない場合は、
declare global { namespace JSX { interface IntrinsicElements { "my-awesome-tag": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; } } }
↑のようにまじめに TypeScript らしさを残したハック的なコードを <my-awesome-tag> を使いたい .tsx ファイル冒頭へ加えればよい。よいのだけど、 Xel を使いたい場合のようにたくさんのタグをぶちこみたい場合や、独自定義のタグに独自定義のプロパティーも使いたい場合は、 TypeScript にこだわって疲弊するよりは↓型は any にして "my-awesome-tag": any; のようにすると少し楽です。
