TypeScriptの環境をどう用意する？

Transcript

1. TypeScriptの環境 どう用意する？ BEENOS株式会社 小林真成翔
2. 目次 • そもそも自前で用意する？ • 基本はtsc • 楽にTypeScriptを実行したい • 私的にはこう使うと良さげ？
3. • 名前：小林真成翔（MANATO） • ステータス：社会人1年目 • 趣味：旅行、お酒 • 最近触っている、興味がある ◦ Remix ◦ laravel • Typescript歴 ◦ 1年くらい @kobakob17177335 自己紹介
4. そもそも自前で用意する？ フレームワークに任せればよし！
5. 解決！
6. とはいっても • 特殊な環境 ◦ Google App Scipt • 既存プロジェクトへの導入 • CLIツールの開発 • 動作検証
7. こういうとき どうしたら良い？
8. 基本はtcsでJavaScriptにコンパイル • 実行まで 1. 型チェック 2. 型情報を削除 3. トランスパイル 4. JavaScriptを実行 遅い！！ 面倒！！
9. 開発時はもっと 楽したい！！
10. 楽にTypeScriptを実行したい • tsx（TypeScript Execute） ◦ コンパイルなしで直接実行可能 ◦ メリット ▪ 実行早い ▪ ESM / Common両方ともOK ◦ デメリット ▪ JavaScript生成はできない
11. 楽にTypeScriptを実行したい • Node.js ◦ v22.6.0からTypescriptを直接実行可能 ◦ TypeScriptの構文を空白に置き換えて実行
12. 楽にTypeScriptを実行したい • Node.js ◦ 制約 ▪ TypeScript -> JavaScriptへトランスパイルはで きない ▪ Enum / decorator / parameter property • --experimental-transform-typesフラグ ▪ import/requireで拡張子を除外できない
13. 楽にTypeScriptを実行したい TypeScript独自の構文を使用した時 （Parameter Property）
14. 楽にTypeScriptを実行したい 拡張子なしでモジュールをインポート時
15. 楽にTypeScriptを実行したい • Node.js ◦ メリット ▪ ライブラリとか不要なので導入楽 ▪ 公式提供なので壊れるとかない ◦ デメリット ▪ トランパイルできない ▪ 型チェック甘くなりがち
16. 楽にTypeScriptを実行したい • Deno ◦ tsconfigなしでTypeScriptを実行可能 ◦ メリット ▪ 一番楽なのでは ◦ デメリット ▪ 既存Node.jsのPJに導入はキツそう？ ▪ ライブラリによっては動かない？
17. 私的にはこう使うと良さげ？ • BEアプリケーション ◦ 新規開発: tsx&tsc / Deno ◦ 既存PJ：tsx&tsc • CLI系やちょっとしたツール ◦ Deno / Node.js
18. 私的にはこう使うと良さげ？ • Frontendアプリケーション ◦ MinifyやBundle、Tree-shaking ◦ マルっとやってくれるビルドツール ▪ esbuild / Rollup / Rolldown • GAS ◦ グローバルスコープ対応&ES5対応 ◦ IIFEとかでビルドする必要あり
19. ご清聴ありがとうご ざいました！！