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
72
Angularの雰囲気を伝えたい
koz
0
49
Other Decks in Technology
See All in Technology
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
1
160
OPENLOGI Company Profile
hr01
0
60k
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.3k
実は強い 非ViTな画像認識モデル
tattaka
3
1.3k
What's new in Go 1.24?
ciarana
1
110
事業を差別化する技術を生み出す技術
pyama86
2
380
AIエージェント開発のノウハウと課題
pharma_x_tech
7
4.1k
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
310
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
350
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
230
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
220
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
Why Our Code Smells
bkeepers
PRO
336
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Thoughts on Productivity
jonyablonski
69
4.5k
Agile that works and the tools we love
rasmusluckow
328
21k
Building Your Own Lightsaber
phodgson
104
6.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
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/
おしまい。