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