【TsKaigi】「Track2 16:40 ~ 17:10 のLT」を聞きました

LT

TSのパフォーマンス改善: やじはむ様(@yajihum)

スライド

tskaigi.org

内容について

TSの公式リポジトリにPerfoemanceについての項目がある。

  1. パフォーマンスとな何か、それはなぜ重要なのか
  2. コンパイル改善のための

パフォーマンスとは何か

1.コンパイル速度

ある例だと、50秒かかっていたみたいなことがある → 短縮することで開発生産性に大きく寄与

2.編集体験

tsserverによる型チェックやエラー表示のパフォーマンス

これらのパフォーマンスを改善することで、開発体験や開発効率を上げることができる。

コンパイルしやすいコードを考える必要がある。

コンパイルしやすいコードとは?

typeよりinterfaceを利用する

ポイント

無効な方があった場合にエラーになる

キャッシュされる

型注釈を利用する

型注釈がないと、tscが型のimport先を探しに行ったりなどをしているので、コンパイルが遅くなる。

→ 遅い部分があった時に試してみるみたいな感じでいいらしい。

上記二つはlintで制御できる

複雑な型は名前づけする

関数の戻り値などの型を別で定義しておいたほうが、コンパイルがキャッシュできるので、早くなる。

感想

パフォーマンスといった時に、コンパイル速度などについては時間がかかっても仕方がないものとして諦めていたので、そこの部分を短くできるという考えはあまりなかった。今回を機に考えてみようと思った。

ts-morphを使ってコードリプレイスとASTへのハードルを下げる: 姫野様(@hime)

スライド

tskaigi.org

内容メモ

ASTとは?→抽象構文木というもの。コードを木構造として扱うことができる

どのようなユースケース

例えばbuttonコンポーネントが174個ある

全部のコンポーネントを置き換えたのかわかりにくい。(フロントなので画面を確認すれば一目瞭然だが、コードベースで確認するのは難しい)

ということで、ts-morphと出会った。

感想

なるほど、tsのコードを分析することができるツールなのか。全てを置き換えたかなどについて、自信がなかったりなどの時にとても便利だなと思った。

SWC Transformerから見るTypeScript関数記述ベストプラクティス: hujiyamaorange様 (@fujiyamaorange)

スライド

tskaigi.org

内容メモ

関数記述

関数宣言、関数式、アロー関数がある

これをSWCの観点から、ベストプラクティスを考える。

SWCとはRust製のコンパイラ

変換時の計策結果

関数宣言方式の方が、変換速度が早い。(変換自体にはあまり時間の差は出ない)

emitという処理に差がありそう

関数宣言のみASTの構造がシンプルになっていた

感想

いつも雰囲気で決めていたけど、コンパイル速度などの観点で考えていなかった。気にして書いてみようと思った。

TypeScriptのコード生成を辛くしないために: ノーン様(@nkowne63)

スライド

tskaigi.org

内容について

ts外とのやりとりに対して必要になるコード生成

自分たちで実装しなきゃいけなくなった時に避けるアンチパターンを紹介。

処理だけをコード生成→バグが入っていたり、他のOSSに乗り換えられなくなったりして大変な思いをした。

なので、型を生成して処理は別で書くなどの段階を追うことが良い。

template Literal Typesやmapped Types, Conditional Types

まとめ

コード生成される具体的な処理に依存してしまうと、後々差し替えが効かなくなる

コード生成を行うときは処理だけでなく、型の生成をして、デバッグの難易度を下げたり差し替えをしやすくする。

感想

コード生成を自作することは今までなかったが、もしそのような時には今回聞いたことをちゃんと思い出そうと思った。