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に興味を持って欲しいスライド
Search
koz
December 24, 2020
Technology
0
230
TypeScriptに興味を持って欲しいスライド
https://easy2.connpass.com/event/197872/
TypeScriptはいいぞっていう気持ちを伝えるための資料。
元々は社内向けだったものを、社外向けにリメイクした。
koz
December 24, 2020
Tweet
Share
More Decks by koz
See All by koz
3分でわかる WebRTCのP2P通信
koz
0
71
Angularの雰囲気を伝えたい
koz
0
49
Other Decks in Technology
See All in Technology
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
210
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
110
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
860
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
1
340
分解して理解する Aspire
nenonaninu
2
1k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
190
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
3
340
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.6k
クラウドサービス事業者におけるOSS
tagomoris
4
1k
手を動かしてレベルアップしよう!
maruto
0
200
Share my, our lessons from the road to re:Invent
naospon
0
140
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
Thoughts on Productivity
jonyablonski
69
4.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
A Philosophy of Restraint
colly
203
16k
Embracing the Ebb and Flow
colly
84
4.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Adopting Sorbet at Scale
ufuk
74
9.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Transcript
TypeScriptはいいぞ (TypeScriptはいいぞ)
https://www.itmedia.co.jp/news/articles/2012/07/news146.html
こんな人たちに届いて欲しい JavaScriptを知っているけど、TypeScriptは良くわかってない TypeScriptを聞いたことある人 サーバーサイドメインでフロントあんまり興味ない人
自己紹介
koz (こじ/こず) @kozzzzz4 TOPGATE - 普段はフロント側 - Angular頑張ってます - サクナヒメ(?)やってます
None
こんな経験ありませんか?
Uncaught ReferenceError: hoge is not defined
Uncaught TypeError: Cannot read property 'fuga' of undefined
Uncaught ReferenceError: hoge is not defined
TypeScriptって何?
JavaScript 型
完全に理解した! やったね!
TypeScriptはあなたを救います
救われる3つの内容 • 型安全性 (バグが減らせる) • 開発効率が上がる • 開発のアプローチが変わる
型安全性 型安全性とは、型検査によって不正なプログラムが混入するのを防ぐこと。 つまり、「型安全性 ≒ バグが減る」。
開発効率が上がる IDEによるコード補完が効きます。 これもTypeScriptを使用することによる恩恵です。 つまらないタイプミスとはおさらばです。
アプローチが変わる 型を考える→ロジックを組む。 JavaScriptを使用していた時ではありえませんでした。 型を意識してコードを書くので、無理やりなコードは産まれにくいです。
全然難しくない型
(最初は)難しい型は使う必要無し type Pick<T, K extends keyof T> = { [P
in K]: T[P]; };
引数の型と戻り値を書くだけ function sum(a: number, b: number): number { return a
+ b; }
インターフェースを定義するだけ interface Person { name: string; age: number; married: boolean;
} const person: Person = { name: 'xxx', age: 20, married: false };
ね?簡単でしょう?
これだけは守って欲しい
非any三原則 ※非any三原則(ひanyさんげんそく)とは、「 anyをもたない、つくらない、もちこまない」という三つの原則からな る、日本の国是。[要出典]
anyを指定した例 const a: any = 1; const b: any =
'b'; // コンパイラさんが仕事を放棄 const c = a * b;
any = コンパイラがエラーをだす仕事を放棄する anyは我々を救わない anyは危険 anyは闇の魔術 メーデー!メーデー!
闇の魔術に対する防衛術
ソースコードの平和を守ろう // tsconfig.json { "compilerOptions": { "strict": true, } }
tsconfig.jsonとは TypeScriptを使用したプロジェクトのルートディレクトリに配置されてるやつ。 コンパイルオプションなどを設定できる。 先ほどの例では、コンパイルオプションで”strict: true”を指定している。 { "compilerOptions": { "strict": true,
}
strict: true ? “strict: true”は複数のコンパイルオプションが設定される。 特に”noImplicitAny”がまじエクスペクトパトローナム。
noImplicitAny ? 暗黙的なanyの混入を防いでくれる。 明示的にanyしているのを発見したら、レビューで弾こう!
因みにAngularでやるなら Strict Modeが用意されてます。 ng new [project-name] --stricta Angular用のコンパイルオプションも有効化されます。
完全に興味が湧いた後は?
まずは触ってみよう! https://www.typescriptlang.org/play
調べてみよう! • 公式サイト(https://www.typescriptlang.org/) • TypeScript Deep Dive(https://basarat.gitbook.io/typescript/) • サバイバルTypeScript(https://book.yyts.org/) •
TypeScriptの型入門(https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a)
書籍で学ぼう! https://www.oreilly.co.jp/books/9784873119045/
おしまい。