tsgoを触ってみて得た学び
by
karukan029
×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
tsgo を触ってみて得た学び かるカン
Slide 2
Slide 2 text
自己紹介 👋 かるカン X (Twitter): @karukan013L23 フロントエンドエンジニア 最近はTypeScript/React を書いてます コーヒーが好き
Slide 3
Slide 3 text
TSKaigi のとあるセッションにて tsgo 、触ってみましたか? ・・・触ってないです
Slide 4
Slide 4 text
というわけで、触ってみた
Slide 5
Slide 5 text
typescript-go とは? TypeScript をGo で実装し直したバージョン Strada: v6 まで(従来のTS ) Corsa: v7 以降(Go 版のTS ) ↑ 今回試したのはCorsa 現在はプレビュー版として一部機能を提供 LSP 既存のts-server からの移行 VSCode 向けに拡張機能が提供 import の補完などまだ一部動作しない リファクタリング機能でAI 統合を検討中 型チェック tsgo --noEmit で型チェックのみ実行 ↑これを試しに触ってみた
Slide 6
Slide 6 text
tsgo 、何が嬉しい? パフォーマンスの向上 Go 移植によるシングルスレッド性能の向上 3.5 faster! 並列化 2.5 〜3 ? faster! コンパイルはesbuild やSWC を使用することで高速化することができるが、型チェックはtsc しかできない 開発体験の改善 特にCI に組み込んでいる場合は、かなり恩恵を得られそう
Slide 7
Slide 7 text
本当か🤔
Slide 8
Slide 8 text
実際に試してみた tsc とtsgo を実行してパフォーマンスを比較してみる # TypeScriptのプレビュー版をインストール npm install -D @typescript/native-preview # tscを実行 # オプションを追加して、型チェックのみ実行・コンパイル関連の情報を出力 npx tsc -p ./src/tsconfig.json --noEmit --extendedDiagnostics # tsgoを実行 # オプションを追加して、型チェックのみ実行・コンパイル関連の情報を出力 npx tsgo -p ./src/tsconfig.json --noEmit --extendedDiagnostics
Slide 9
Slide 9 text
小規模プロジェクト ( ポモドーロタイマー) tsc ts-go 3.14x faster! Files: 789 Lines: 190,287 Total time: 2.23s Files: 789 Lines: 190,287 Total time: 0.710s
Slide 10
Slide 10 text
大規模プロジェクト (VSCode) tsc ts-go 8.47x faster! 💡 大規模プロジェクトほどパフォーマンス改善が顕著 Files: 5,109 Lines: 1,604,791 Check time: 40.36s Total time: 47.22s Files: 5,109 Lines: 1,604,791 Check time: 4.416s Total time: 5.571s
Slide 11
Slide 11 text
大体10x faster!!
Slide 12
Slide 12 text
tsgo を触ってみて 型チェックについては、大方は既に正常に動く状態 ローカルで動かした分にはエラーは発生しなかった いくつかIssue が上がっていた 隙を見て仕事のプロジェクトでも試してみる TypeScript のコンパイラ関連の知見が深まった 型チェック、コンパイラの関連性を改めて整理する機会になった パフォーマンス関連情報を出力できるオプション --extendedDiagnostics 1 次情報に触れることで得られる学び 記事読んで満足するのではなく、自分でも触ってみることで実感が伴った学びになる 関連領域についても調べるので、学習の機会としてもよかった 今後も継続的に情報をキャッチアップしていく
Slide 13
Slide 13 text
typescript-go のリポジトリと公式記事を読んでみよう! 公式記事 https://devblogs.microsoft.com/typescript/typescript-native-port/ https://devblogs.microsoft.com/typescript/announcing-typescript-native-previews/ typescript-go リポジトリ https://github.com/microsoft/typescript-go?tab=readme-ov-file#what-works-so-far README に対応状況が記載されている
Slide 14
Slide 14 text
ありがとうございました ぜひtsgo を触ってみてください!