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

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

Dae10ec620642c4a9f02c8f907397b1f?s=47 girigiribauer
April 03, 2019
Technology
1
370

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

雑でごめんなさい

Dae10ec620642c4a9f02c8f907397b1f?s=128

girigiribauer

April 03, 2019
Tweet

More Decks by girigiribauer

See All by girigiribauer
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
Dae10ec620642c4a9f02c8f907397b1f?s=48 girigiribauer
0
45
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning
Dae10ec620642c4a9f02c8f907397b1f?s=48 girigiribauer
0
67
コードフォーマッタを導入して
プロジェクト内に平穏をもたらす話 / 20191025-v-okinawa
Dae10ec620642c4a9f02c8f907397b1f?s=48 girigiribauer
0
130
TypeScript を活用してサービス構築頑張ってみた話 / 20190906_v-sendai_girigiribauer
Dae10ec620642c4a9f02c8f907397b1f?s=48 girigiribauer
1
230
沖縄のバスがつらすぎて自分でバスアプリ作った話 / ngk2018b-okinawabus
Dae10ec620642c4a9f02c8f907397b1f?s=48 girigiribauer
2
1.3k

Other Decks in Technology

See All in Technology
一番小さなリファクタリングの話
Bf7fe621f4fe1615c228ef8a79b87282?s=48 shirayanagiryuji
0
140
JAWS-UG 朝会 #36 登壇資料
08dd0b93e011904f40d60d5a1b54c671?s=48 takakuni
1
500
Learning to Solve Hard Minimal Problems
2c88806cbaab6024dc95b9a654c99d86?s=48 takmin
1
240
VS Code Meetup #21 - もう一度知りたい基礎編 - ファイル操作、コーディングの基本編
Fc815be82d09a2e922d4000b65b9f83b?s=48 74th
0
150
GCCP Creator @ COSCUP 2022
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
1.4k
テクニカルライティングの検定を受けてみた話 / "My Story About Taking the Technical Writing Exam
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
1
180
Microsoft Data Analytics trends : ”Lakehouse” , ”Data Mesh"
0d7a3b61c5c1f64a50136cf4bb5702b7?s=48 ryomaru0825
2
100
AlexNet前夜
Be0f86176276318b4b9775d795278f7e?s=48 yushiku
PRO
0
550
SBOMを利用したソフトウェアサプライチェーンの保護
45b7a05a1056c10d70bc4caa77d1b2c9?s=48 masahiro331
0
150
IBM Cloud Festa Online 2022 Summer
Fecdd3417cd7375cc0bd0352d72db27e?s=48 1ftseabass
PRO
0
190
品質特性のすすめ
95d0e8ddf4a989d9734c25bd6b1af295?s=48 honamin09
0
150
データ分析のためのAWS Well-Architected -Data Analytics Lens-
Eefeb193691fd905cf9edafc98f7198d?s=48 maru1981
0
220

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
Adopting Sorbet at Scale
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
63
7.6k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
290
48k
Code Reviewing Like a Champion
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
506
37k
Art Directing for the Web. Five minutes with CSS Template Areas
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
196
9.5k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
21k
Java REST API Framework Comparison - PWX 2021
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
11
4.8k
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
84
4.7k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
940

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