---
title: TypeScriptに興味を持って欲しいスライド
tags:  #typescript  
author: [koz](https://convert.docswell.com/user/koz)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/V9E2145JRX.jpg?width=480
description: &lt;https://easy2.connpass.com/event/197872/&gt; で発表したやつ。 TypeScriptはいいぞっていう気持ちを伝えるための資料。 元々は社内向けだったものを、社外向けにリメイクした。
published: March 09, 21
canonical: https://convert.docswell.com/s/koz/PKEL65-2021-03-09-212457
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/V9E2145JRX.jpg)

TypeScriptはいいぞ （TypeScriptはいいぞ）

# Page. 2

![Page Image](https://bcdn.docswell.com/page/5D7YZM6JM9.jpg)

https://www.itmedia.co.jp/news/articles/2012/07/news146.html

# Page. 3

![Page Image](https://bcdn.docswell.com/page/2VEN331E8K.jpg)

こんな人たちに届いて欲しい JavaScriptを知っているけど、TypeScriptは良くわかってない TypeScriptを聞いたことある人 サーバーサイドメインでフロントあんまり興味ない人

# Page. 4

![Page Image](https://bcdn.docswell.com/page/GY7999Y73P.jpg)

自己紹介

# Page. 5

![Page Image](https://bcdn.docswell.com/page/5G7899KJDR.jpg)

- koz (こじ/こず) @kozzzzz4 普段はフロント側 Angular頑張ってます🔰 サクナヒメ（？）やってます

# Page. 6

![Page Image](https://bcdn.docswell.com/page/ML7LWWPER1.jpg)



# Page. 7

![Page Image](https://bcdn.docswell.com/page/54EM9927W1.jpg)

こんな経験ありませんか？

# Page. 8

![Page Image](https://bcdn.docswell.com/page/ZPERGG579L.jpg)

Uncaught ReferenceError: hoge is not deﬁned

# Page. 9

![Page Image](https://bcdn.docswell.com/page/NP7XXXX7XY.jpg)

Uncaught TypeError: Cannot read property &#039;fuga&#039; of undeﬁned

# Page. 10

![Page Image](https://bcdn.docswell.com/page/637KWW97DY.jpg)

Uncaught ReferenceError: hoge is not deﬁned

# Page. 11

![Page Image](https://bcdn.docswell.com/page/4LJ3119E5P.jpg)

TypeScriptって何？

# Page. 12

![Page Image](https://bcdn.docswell.com/page/V8JDXX87GD.jpg)

JavaScript 型

# Page. 13

![Page Image](https://bcdn.docswell.com/page/4VEPPPWE86.jpg)

完全に理解した！ やったね！

# Page. 14

![Page Image](https://bcdn.docswell.com/page/L27V2297QW.jpg)

TypeScriptはあなたを救います

# Page. 15

![Page Image](https://bcdn.docswell.com/page/Z5JGRR47LR.jpg)

救われる３つの内容 ● 型安全性 （バグが減らせる） ● 開発効率が上がる ● 開発のアプローチが変わる

# Page. 16

![Page Image](https://bcdn.docswell.com/page/V47QVVREP5.jpg)

型安全性 型安全性とは、型検査によって不正なプログラムが混入するのを防ぐこと。 つまり、「型安全性 ≒ バグが減る」。

# Page. 17

![Page Image](https://bcdn.docswell.com/page/DKE4MMQ71Q.jpg)

開発効率が上がる IDEによるコード補完が効きます。 これもTypeScriptを使用することによる恩恵です。 つまらないタイプミスとはおさらばです。

# Page. 18

![Page Image](https://bcdn.docswell.com/page/PL7188LJGD.jpg)

アプローチが変わる 型を考える→ロジックを組む。 JavaScriptを使用していた時ではありえませんでした。 型を意識してコードを書くので、無理やりなコードは産まれにくいです。

# Page. 19

![Page Image](https://bcdn.docswell.com/page/8G7WZZQ726.jpg)

全然難しくない型

# Page. 20

![Page Image](https://bcdn.docswell.com/page/W4JZ113E3Y.jpg)

（最初は）難しい型は使う必要無し type Pick&lt;T, K extends keyof T&gt; = { [P in K]: T[P]; };

# Page. 21

![Page Image](https://bcdn.docswell.com/page/KYE6LLZ7VZ.jpg)

引数の型と戻り値を書くだけ function sum(a: number, b: number): number { return a + b; }

# Page. 22

![Page Image](https://bcdn.docswell.com/page/5GE5119J48.jpg)

インターフェースを定義するだけ interface Person { name: string; age: number; married: boolean; } const person: Person = { name: &#039;xxx&#039;, age: 20, married: false };

# Page. 23

![Page Image](https://bcdn.docswell.com/page/V972115ERX.jpg)

ね？簡単でしょう？

# Page. 24

![Page Image](https://bcdn.docswell.com/page/5DJYZZ6EM9.jpg)

これだけは守って欲しい

# Page. 25

![Page Image](https://bcdn.docswell.com/page/2V7N3Y178K.jpg)

非any三原則 ※非any三原則（ひanyさんげんそく）とは、「 anyをもたない、つくらない、もちこまない」という三つの原則からな る、日本の国是。 [要出典]

# Page. 26

![Page Image](https://bcdn.docswell.com/page/GYJ99PYJ3P.jpg)

anyを指定した例 const a: any = 1; const b: any = &#039;b&#039;; // コンパイラさんが仕事を放棄 const c = a * b;

# Page. 27

![Page Image](https://bcdn.docswell.com/page/5GJ89DKEDR.jpg)

メーデー！メーデー！ any = コンパイラがエラーをだす仕事を放棄する anyは我々を救わない anyは危険 anyは闇の魔術

# Page. 28

![Page Image](https://bcdn.docswell.com/page/MLJLWMP7R1.jpg)

闇の魔術に対する防衛術

# Page. 29

![Page Image](https://bcdn.docswell.com/page/547M9Y2JW1.jpg)

ソースコードの平和を守ろう // tsconfig.json { &quot;compilerOptions&quot;: { &quot;strict&quot;: true, } }

# Page. 30

![Page Image](https://bcdn.docswell.com/page/ZP7RG95J9L.jpg)

tsconﬁg.jsonとは TypeScriptを使用したプロジェクトのルートディレクトリに配置されてるやつ。 コンパイルオプションなどを設定できる。 先ほどの例では、コンパイルオプションで”strict: true”を指定している。 { &quot;compilerOptions&quot;: { &quot;strict&quot;: true, }

# Page. 31

![Page Image](https://bcdn.docswell.com/page/NPJXXQXJXY.jpg)

strict: true ? “strict: true”は複数のコンパイルオプションが設定される。 特に”noImplicitAny”がまじエクスペクトパトローナム。

# Page. 32

![Page Image](https://bcdn.docswell.com/page/63JKW99JDY.jpg)

noImplicitAny ? 暗黙的なanyの混入を防いでくれる。 明示的にanyしているのを発見したら、レビューで弾こう！👮

# Page. 33

![Page Image](https://bcdn.docswell.com/page/4LE31W975P.jpg)

因みにAngularでやるなら Strict Modeが用意されてます。 ng new [project-name] --stricta Angular用のコンパイルオプションも有効化されます。

# Page. 34

![Page Image](https://bcdn.docswell.com/page/V8EDXK8JGD.jpg)

完全に興味が湧いた後は？

# Page. 35

![Page Image](https://bcdn.docswell.com/page/4V7PPKW786.jpg)

まずは触ってみよう! https://www.typescriptlang.org/play

# Page. 36

![Page Image](https://bcdn.docswell.com/page/L2JV2V9JQW.jpg)

調べてみよう！ ● 公式サイト（https://www.typescriptlang.org/） ● TypeScript Deep Dive（https://basarat.gitbook.io/typescript/） ● サバイバルTypeScript（https://book.yyts.org/） ● TypeScriptの型入門（https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a）

# Page. 37

![Page Image](https://bcdn.docswell.com/page/Z5EGRL4JLR.jpg)

書籍で学ぼう！ https://www.oreilly.co.jp/books/9784873119045/

# Page. 38

![Page Image](https://bcdn.docswell.com/page/V4JQVYR7P5.jpg)

おしまい。

