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 への変換が見えやすくするビューワーを作った話...
Search
girigiribauer
April 03, 2019
Technology
1
560
TypeScript から JavaScript への変換が見えやすくするビューワーを作った話 / 20190403-typescript-studying
雑でごめんなさい
girigiribauer
April 03, 2019
Tweet
Share
More Decks by girigiribauer
See All by girigiribauer
『Bluesky 公式アカウント移行まとめ』のアップデートをした話 / 20241018-niigata-5min-tech
girigiribauer
0
79
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
girigiribauer
1
62
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
71
私と Vim / 20240426-niigata-5min-tech
girigiribauer
2
160
がんばらない勉強会の続け方 / 20240426-niigata-5min-tech-omake
girigiribauer
1
540
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
girigiribauer
0
95
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
230
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning
girigiribauer
0
100
コードフォーマッタを導入して プロジェクト内に平穏をもたらす話 / 20191025-v-okinawa
girigiribauer
0
160
Other Decks in Technology
See All in Technology
Pwned Labsのすゝめ
ken5scal
2
460
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
IAMのマニアックな話2025
nrinetcom
PRO
6
1.2k
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
450
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
950
OPENLOGI Company Profile for engineer
hr01
1
20k
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.7k
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
250
OPENLOGI Company Profile
hr01
0
60k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
530
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.5k
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
220
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
A Tale of Four Properties
chriscoyier
158
23k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Agile that works and the tools we love
rasmusluckow
328
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
We Have a Design System, Now What?
morganepeng
51
7.4k
Building Adaptive Systems
keathley
40
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Designing for humans not robots
tammielis
250
25k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
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) Λτϥόʔγϯάͯ͘͠ΕΔ ͭ͋ΔʢผͷػձͰ୭͔͕Δ…!ʣ
まとめ • Ͳ͏͍͏ϓϦηοτ͕͋ΔͱΑΓֶͼ͕͋Δ ͔ɺ୭͔ڭ͑ͯ΄͍͠ • ໊ݹͰʰϑϩϯτΤϯυ͘͘ձʱΛ ຖ݄ͬͯΔΑʂ͜͏͍͏ͷ͘͘͢Δͱ ͍͍Αʂ