Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
5分でTypeScript入門!〜既存JS環境に引導を渡そう〜
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
nsym-m
April 23, 2021
Programming
44
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
5分でTypeScript入門!〜既存JS環境に引導を渡そう〜
TypeScriptあんまり触ったことないですが、TS入門のLT資料を作ってみました。
nsym-m
April 23, 2021
Transcript
14 slides
5分でTypeScript入門! 〜既存JS環境に引導を渡そう〜
TypeScriptとは? • JavaScriptの静的型付け版の言語 • Microsoftがオープンソースで開発している • Googleでも社内標準言語として利用されている • TypeScriptをJavaScriptにコンパイルして実行する
なぜTypeScript? • 型が保証されている(型推論も使える) • 型があることで改修時のバグ発生率が下がり保守性の向上 • 型を書けるので気持ちがいい(Developer eXperience) • エディタの入力補完を受けられることで開発効率の向上
• 型チェックの厳しさをプロジェクトごと決められる ◦ → 導入障壁が低い!!!
TypeScriptを導入してみよう 弊社のお掃除ロボットるんばちゃんの状況をリアルタイムで知らせる「る んばちゃんbot」のチャットを投稿しているJavaScriptのプログラムに TypeScriptを導入してみようと思います。
ざっくり手順 1. typescriptのinstallとtsconfig.jsonの作成 2. tsconfig.jsonの設定を緩めに指定 3. ファイルの拡張子を .js → .ts
に変更する 4. コンパイルエラーを修正する とっても簡単!!!!(?)
typescriptのinstallと tsconfig.jsonの作成 • typescriptはTypeScriptのコンパイラのモジュール • tsconfig.jsonはTypeScriptコンパイルの設定ファイル
tsconfig.jsonの設定を緩めに指定① • 最初は型チェックに関する設定を緩めにする
tsconfig.jsonの設定を緩めに指定② ☆ポイント • 優先すべきは「TypeScript」導入を完了させること ◦ 「厳密な型を使う」のはあとからでも追加できる • any型を許容する(大事) • 型を緩くしていてもJavaScriptよりも堅い型チェックやエディタによる
補完などのサポートを受けられる
ファイル拡張子を.js → .tsに変更 • `rename`コマンドは追加する必要あり(Mac) • Linuxの`rename`コマンドとは若干違うらしい(未検証) • Windowsの場合は`ren`コマンドが使えそう?(未検証)
コンパイルエラーを修正①
コンパイルエラーを修正② • プロパティを定義していない状態でオブジェクトを作成していたの で、オブジェクト定義の時にプロパティも同時に定義する • ついでに「type」でオブジェクトの型も定義する(必須ではない)
コンパイルエラーを修正③
エラーが出なければOK!! これであなたもTypeScripterの仲間入り!! いざ、ビルド!
ご清聴ありがとうございました。 良いTypeScriptライフを!!!! 参考記事: https://eh-career.com/engineerhub/entry/2019/04/16/103000 https://tech.raksul.com/2019/07/22/introduce-typescript-to-existing-product/ https://komiyak.hatenablog.jp/entry/20170421/1492752232
More Decks by nsym-m
See All by nsym-m
Flutter入門してみた
nsym
0
130
O’ReillyでGo言語入門
nsym
0
140
Other Decks in Programming
See All in Programming
React Native経験者が Flutterを30⽇間触って驚いたこと
3saito
0
180
Modernizing iOS Apps
seyfoyun
0
150
Snowflake Openflow Connector利用の勘所 / 20261024developersio2026tokyo-snowflake-openflow
kasacchiful
PRO
0
340
flutter_test のその先へ — Flutter アプリの LLM 機能に「評価」という品質保証を
kosukesaigusa
0
200
GraphQL の onError と Nullability のこれから
quramy
0
210
AIで開発が速くなった先で、開発チームは何を目指すか
shihochan
1
2k
Railsバージョンを4倍にした話
optim
0
1k
Zero-Tap Sign-In対応、結局何をすればいいの?
mitohato14
0
2.1k
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
siroemk
2
1.2k
PyConTW 2026 - AI Coding 不只是工具升級, 區域醫院醫療資訊系統協作開發與資訊團隊轉型實踐
cclai999
0
250
AIが生成したコードは読むべきか?抽象化設計とコードの品質保証 / abstraction-design-and-quality
minodriven
16
9.1k
graphql-ruby を Spinel で速くしようとした話
mtsmfm
0
150
Featured
See All Featured
A better future with KSS
kneath
240
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.2k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.8k
A Soul's Torment
seathinner
9
3.9k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
660
Balancing Empowerment & Direction
lara
6
1.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
A Modern Web Designer's Workflow
chriscoyier
699
190k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
670
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
2
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
7.1k