TypeScript から JavaScript への変換が見えやすくするビューワーを作った話 / 20190403-typescript-studying

Transcript

1. TypeScript から JavaScript への 変換が見えやすくする ビューワーを作った話 2019/04/03 TypeScript ษڧձ @girigiribauer

2. \ 沖縄から来ました /

3. ts2js-viewer を雑に作った • TypeScript ͕ JavaScript ʹͲͷΑ͏ʹ
 ม׵͞ΕΔ͔ɺखؒΛ͔͚ͣʹαΫοͱ
 ֬ೝ͍ͨ͠ •

   https://ts2js-viewer.netlify.com/ ʹ্͛·ͨ͠

4. 左に書いたら、右に出るやつ

5. 変換が分かりやすい！ • Enum ͷڍಈͱ͔ʢkey, value ͕ަޓʹೖΔʣ • ܕ͕શ෦֎ΕΔͱ͔ • async

   / await ͕ͿΘͬͱ௕͘ͳΔͱ͔ ࡶʹ࡞ͬͨϨϕϧͳͷͰɺ ϓϦηοτͷίʔυ΋ϕλॻ͖ͩ͠ɺ ʮ͜͏͍͏ม׵΋͋ͬͨํ͕͍͍Μ͡Όͳ͍ʁʯ Έ͍ͨͳͷ͕શવ໢ཏͰ͖ͯ·ͤΜ

6. How to use • import * as ts from “typescript";

   Ͱ
 ࡶʹಡΈࠐΜͰ࢖ͬͪΌ͏ • `npm i typescript` ͩͱ warning ͰͪΌ͏
 global ʹΠϯετʔϧͨ͠΋ͷΛ `npm link`
 ͯ͠࢖͏ͷ͕ຊདྷͷ࢖͍ํͬΆ͍


7. Using the Compiler API • https://github.com/Microsoft/TypeScript/ wiki/Using-the-Compiler-API • ts.transpileModule(code, options)

   ͕γϯϓϧ • γϯϓϧʹม׵͢Δ΍ͭͷଞʹ΋ɺ
 ந৅ߏจ໦ (AST) Λτϥόʔγϯάͯ͘͠ΕΔ ΍ͭ΋͋ΔʢผͷػձͰ୭͔͕஻Δ…!ʣ

8. まとめ • Ͳ͏͍͏ϓϦηοτ͕͋ΔͱΑΓֶͼ͕͋Δ ͔ɺ୭͔ڭ͑ͯ΄͍͠ • ໊ݹ԰Ͱ͸ʰϑϩϯτΤϯυ΋͘΋͘ձʱΛ
 ຖ݄΍ͬͯΔΑʂ͜͏͍͏ͷ΋͘΋͘͢Δͱ ͍͍Αʂ