Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

\ 沖縄から来ました /

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

変換が分かりやすい！ • Enum ͷڍಈͱ͔ʢkey, value ͕ަޓʹೖΔʣ • ܕ͕શ෦֎ΕΔͱ͔ • async / await ͕ͿΘͬͱ௕͘ͳΔͱ͔ ࡶʹ࡞ͬͨϨϕϧͳͷͰɺ ϓϦηοτͷίʔυ΋ϕλॻ͖ͩ͠ɺ ʮ͜͏͍͏ม׵΋͋ͬͨํ͕͍͍Μ͡Όͳ͍ʁʯ Έ͍ͨͳͷ͕શવ໢ཏͰ͖ͯ·ͤΜ

Slide 6

Slide 6 text

How to use • import * as ts from “typescript"; Ͱ
 ࡶʹಡΈࠐΜͰ࢖ͬͪΌ͏ • `npm i typescript` ͩͱ warning ͰͪΌ͏
 global ʹΠϯετʔϧͨ͠΋ͷΛ `npm link`
 ͯ͠࢖͏ͷ͕ຊདྷͷ࢖͍ํͬΆ͍


Slide 7

Slide 7 text

Using the Compiler API • https://github.com/Microsoft/TypeScript/ wiki/Using-the-Compiler-API • ts.transpileModule(code, options) ͕γϯϓϧ • γϯϓϧʹม׵͢Δ΍ͭͷଞʹ΋ɺ
 ந৅ߏจ໦ (AST) Λτϥόʔγϯάͯ͘͠ΕΔ ΍ͭ΋͋ΔʢผͷػձͰ୭͔͕஻Δ…!ʣ

Slide 8

Slide 8 text

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