Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

雑でごめんなさい

Dae10ec620642c4a9f02c8f907397b1f?s=128

girigiribauer

April 03, 2019
Tweet

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