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
600
TypeScript から JavaScript への変換が見えやすくするビューワーを作った話 / 20190403-typescript-studying
雑でごめんなさい
girigiribauer
April 03, 2019
Tweet
Share
More Decks by girigiribauer
See All by girigiribauer
タスクにもストック型・フロー型があるということに Todoist を使い始めて気づいた話 / 20250725-niigata-5min-tech
girigiribauer
0
47
Bluesky のフィードを作ろう / 20250620-niigata-5min-tech
girigiribauer
0
42
『Bluesky 公式アカウント移行まとめ』のアップデートをした話 / 20241018-niigata-5min-tech
girigiribauer
0
100
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
girigiribauer
1
86
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
100
私と Vim / 20240426-niigata-5min-tech
girigiribauer
2
190
がんばらない勉強会の続け方 / 20240426-niigata-5min-tech-omake
girigiribauer
1
560
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
girigiribauer
0
130
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
250
Other Decks in Technology
See All in Technology
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
240
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
masahiro_okamura
0
130
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
sagara
0
120
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
560
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
1
160
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Statistics for Hackers
jakevdp
799
220k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
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) Λτϥόʔγϯάͯ͘͠ΕΔ ͭ͋ΔʢผͷػձͰ୭͔͕Δ…!ʣ
まとめ • Ͳ͏͍͏ϓϦηοτ͕͋ΔͱΑΓֶͼ͕͋Δ ͔ɺ୭͔ڭ͑ͯ΄͍͠ • ໊ݹͰʰϑϩϯτΤϯυ͘͘ձʱΛ ຖ݄ͬͯΔΑʂ͜͏͍͏ͷ͘͘͢Δͱ ͍͍Αʂ