Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript から JavaScript への変換が見えやすくするビューワーを作った話 / 20190403-typescript-studying
Search
girigiribauer
April 03, 2019
Technology
1
490
TypeScript から JavaScript への変換が見えやすくするビューワーを作った話 / 20190403-typescript-studying
雑でごめんなさい
girigiribauer
April 03, 2019
Tweet
Share
More Decks by girigiribauer
See All by girigiribauer
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
girigiribauer
0
11
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
160
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning
girigiribauer
0
98
コードフォーマッタを導入して プロジェクト内に平穏をもたらす話 / 20191025-v-okinawa
girigiribauer
0
150
TypeScript を活用してサービス構築頑張ってみた話 / 20190906_v-sendai_girigiribauer
girigiribauer
1
270
沖縄のバスがつらすぎて自分でバスアプリ作った話 / ngk2018b-okinawabus
girigiribauer
2
1.4k
Other Decks in Technology
See All in Technology
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
1.8k
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
620
Why we expect the Microservices
shkitayama
2
320
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
XSS using dirty Content Type in cloud era
flatt_security
2
1k
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
1
2.9k
ビジネスとエンジニアリングの接合点 そしてコード品質がそこに及ぼす影響 v1.1 / The Intersections of Business and Engineering, and The Impact of Code Quality There (v1.1)
mtx2s
11
2.4k
AWS パートナー企業でテクニカルサポートに従事して2年経ったので思うところをまとめてみた
kazzpapa3
3
1.3k
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
140
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
180
Aurora MySQL v3(MySQL8.0互換)の オンラインDDLの罠挙動を全バージョンで検証した
yutakikai
0
140
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
How GitHub (no longer) Works
holman
302
140k
Optimizing for Happiness
mojombo
369
69k
Writing Fast Ruby
sferik
619
60k
Designing the Hi-DPI Web
ddemaree
276
33k
How STYLIGHT went responsive
nonsquared
92
4.8k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
16k
GraphQLとの向き合い方2022年版
quramy
30
12k
Documentation Writing (for coders)
carmenintech
59
3.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Transcript
TypeScript から JavaScript への 変換が見えやすくする ビューワーを作った話 2019/04/03 TypeScript ษڧձ @girigiribauer
\ 沖縄から来ました /
ts2js-viewer を雑に作った • TypeScript ͕ JavaScript ʹͲͷΑ͏ʹ ม͞ΕΔ͔ɺखؒΛ͔͚ͣʹαΫοͱ ֬ೝ͍ͨ͠ •
https://ts2js-viewer.netlify.com/ ʹ্͛·ͨ͠
左に書いたら、右に出るやつ
変換が分かりやすい! • Enum ͷڍಈͱ͔ʢkey, value ͕ަޓʹೖΔʣ • ܕ͕શ෦֎ΕΔͱ͔ • async
/ await ͕ͿΘͬͱ͘ͳΔͱ͔ ࡶʹ࡞ͬͨϨϕϧͳͷͰɺ ϓϦηοτͷίʔυϕλॻ͖ͩ͠ɺ ʮ͜͏͍͏ม͋ͬͨํ͕͍͍Μ͡Όͳ͍ʁʯ Έ͍ͨͳͷ͕શવཏͰ͖ͯ·ͤΜ
How to use • import * as ts from “typescript";
Ͱ ࡶʹಡΈࠐΜͰͬͪΌ͏ • `npm i typescript` ͩͱ warning ͰͪΌ͏ global ʹΠϯετʔϧͨ͠ͷΛ `npm link` ͯ͠͏ͷ͕ຊདྷͷ͍ํͬΆ͍
Using the Compiler API • https://github.com/Microsoft/TypeScript/ wiki/Using-the-Compiler-API • ts.transpileModule(code, options)
͕γϯϓϧ • γϯϓϧʹม͢Δͭͷଞʹɺ நߏจ (AST) Λτϥόʔγϯάͯ͘͠ΕΔ ͭ͋ΔʢผͷػձͰ୭͔͕Δ…!ʣ
まとめ • Ͳ͏͍͏ϓϦηοτ͕͋ΔͱΑΓֶͼ͕͋Δ ͔ɺ୭͔ڭ͑ͯ΄͍͠ • ໊ݹͰʰϑϩϯτΤϯυ͘͘ձʱΛ ຖ݄ͬͯΔΑʂ͜͏͍͏ͷ͘͘͢Δͱ ͍͍Αʂ