少し前に作ったsvelteファイルのインスタントビュワーをもうちょっと改造することで、TypeScriptとか、svelteの動作なんかのことがちょっとわかったので、自分用のメモ書き。
ちなみに、興味のある方にですが、前回作ったsvelteの簡易ビューは、改造して子コンポーネントも参照してスタイルもスコープが聞くようにしました。コンポーネント内の最後のタグしか表示しないバグも修正済みです。またエディターのコンテキストメニューにも追加して、そこから開いた場合はエディターの内容で作成し、ファイルエクスプローラーのコンテキストメニューから開いた場合はファイルの内容で表示する様にしました。
TypeSriprtではrequireは使わない方がいい？
まだ使い始めたばかりでよくわからないのですが、VSCodeで拡張機能を作っていると、importの場合はタイプセーフが強要され、インテリセンスも有効に働くのですが、requireだとany型になってしまってタイプセーフにならず、インテリセンスも動作しなくなります。requireは使わない方がよさそう。
TypeScriptでimportを使うとjavascriptのパッケージはエラーになる
拡張機能でDOM操作をしようとimportで「jsdom」を組み込んで使うと型宣言のエラーが出る。エラーメッセージに従って「@types/jsdom」をインストールすることで型定義のファイルがインストールされる。どうやらこれが基本のようですね。javascriptのパッケージを使うために多くのパッケージの型定義を@typesに集めてくれているみたいですね。これが無ければ自分で作るしかないみたいですし、ありがとうございます。
VSCodeの拡張機能のデフォルトではDOMのライブラリが参照されていいない
「@types/jsdom」のおかげで「jsdom」事態はタイプセーフになりインテリセンスも動作したのですが、DOM関連の型定義が参照されていない。これも「@types」シリーズかと思って探したけれど見つからない。結局「tsconfigjson」の「lib」に「dom」を追加することが必要だった。まあ、拡張機能の開発で基本はDOMの参照は不要なんでしょうけど、ネットで探してもなかなか見つからなかった。
svelteのコンポーネントはスクリプトとスタイルシート以外の全てのタグだった
これはチュートリアルをちゃんとやらなかった自分があほなだけ。拡張機能でビューに組み込むときにスクリプトとスタイルとそれ以外のタグが一つしかないと勘違いして作ってしまったので、複数ある時に最後の一つしか表示していなかった。おかげで作った拡張機能は最後のタグしか出ていない。あほじゃ！
VSCodeではタスクの「watch」をうまく使うのがいいみたい
Visual Studioで作っていると、あまり考えずにデバッグとすれば勝手にコンパイルしてサーバーを起動した上にブラウザを開いて初期ページの表示まで勝手にできてしまう。同じようにしようと考えたが、どうもVSCodeのデバッグではちょっと小細工する必要がありそう（とりあえず見つけたけど...）。それよりは、基本「watch」オプションを利用してデバッグはブラウザをラウンチするのがよさそう。少なくともscssの変換は変換タスクをwatchにしておけば、保存されたときに勝手に変換される。トランスパイルもそうした方がいいのだろうか。ただ、毎度トランスパイルする場合、規模が大きくなったらどうなるのか心配。
ただ、トランスパイルをwatchしておけば、ファイルを変えてもすぐに表示できるし試しに作ってみた簡易表示は必要ないかなぁー。
やっぱりjavascriptもtypescriptも環境構築からめんどくさい
正直VisualStudioでC#使ってると、初期の環境構築で悩むことがほとんどない。新しいテンプレートを試すときはさすがに色々と悩むけれど。やっぱりオープン系の開発はいろいろとめんどくさいなーと感じました。typescriptの型定義も、柔軟性に無理に対応するために記述が非常に複雑で面倒だと思う。クラスが動的に定義できる方が便利か、静的な片づけを基本とする方が扱いやすいのか、双方のメリットデメリットがあるなと思うのでした。まあ、web系ではインタフェースにいろいろな形式のデータをやり取りすることが多いので、静的に型定義をすることが大きなデメリットになるのはわかるんだけど...。
まあ、フロントエンドと言われる部分の開発はまだあまり慣れていないので、これからもいろいろと試してみます。