Tweet
Tweet

Slide 1

Slide 1 text

TypeScriptハンズオン Github: @sor4chi 𝕏 Twitter: @monica18_pr

Slide 2

Slide 2 text

今日の目標 TypeScriptのニーズやメリットを理解する TypeScriptの仕組みを理解する TypeScriptを使えるようになる

Slide 3

Slide 3 text

JSの不満

Slide 4

Slide 4 text

JSの確認 JavaScriptは動的型付け言語 旧バージョンからの互換性を持ったアップデートを繰り返して いるせいで、負債と言わんばかりの難解な挙動がある

Slide 5

Slide 5 text

不満その1: 型がない 型がないので、変数や関数の型を把握するのが難しい

Slide 6

Slide 6 text

例えばこんなやつ Q: a のデータ型 is 何 string ? number ?

Slide 7

Slide 7 text

こんなやつも Q: add の引数の型 is 何 A: number ? null ?

Slide 8

Slide 8 text

不満その2: 暗黙的な型変換 色々なデータ型の演算が暗黙的なキャストで行われる

Slide 9

Slide 9 text

例えばこんなやつ Q: a の値 is 何 A: 20

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

文字列の足し算は文字列の連結になるが、引き算は数値の引き 算になる そのため となる

Slide 12

Slide 12 text

不満その3: HTML上の値の取扱い

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Q: resultの値 is 何 A: 11

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

input.value は文字列で返ってくるので、 value + 1 は 文字列の連結になる

Slide 17

Slide 17 text

その不満、 TypeScript で解決できますよ

Slide 18

Slide 18 text

TypeScript知識

Slide 19

Slide 19 text

TypeScriptとは TypeScriptはJavaScriptの 拡張言語 であり、JavaScriptにコ ンパイルタイムの型チェックを追加したもの（静的型付け言 語）。 ただし、コンパイル時に型チェックを行うだけで、実行時には 型チェックは行わない。

Slide 20

Slide 20 text

TypeScriptの目的 JSの無秩序で自由な世界を、型チェックを追加することで秩 序づけること。(型安全) プログラミングをする行為をTypeHintにより効率化するこ と。(型補完)

Slide 21

Slide 21 text

TypeScriptの本質 TypeScriptはJavaScriptに型チェック用の構文を導入したよ うなもの。 TypeScriptは トランスパイラ と呼ばれるコンパイラによって JavaScriptに変換される。

Slide 22

Slide 22 text

CやC++などが機械語でへコンパイルされるのに対し、 TypeScriptはJavaScriptに トランスパイル される。 高級言語 to 高級言語なのでトランス + コンパイル = トランス パイルだと思う

Slide 23

Slide 23 text

例えば... は

Slide 24

Slide 24 text

に変換される

Slide 25

Slide 25 text

本当に 型情報を追加しただけ である。 ※ 本当は拡張構文があったりするので純粋な変換をしているわ けではないが...

Slide 26

Slide 26 text

TypeScriptのエディタサポート

Slide 27

Slide 27 text

ビルド時に型チェックを行うのでいちいちトランスパイルを実 行するのは面倒。 そこで、エディタによる型チェックを行うことで、トランスパ イルを実行しなくてもプログラミングしているタイミングでそ のまま型チェックを行うことができる。

Slide 28

Slide 28 text

キャスト時の型推論

Slide 29

Slide 29 text

再代入時の型チェッ ク

Slide 30

Slide 30 text

メソッドの型補完

Slide 31

Slide 31 text

TypeScriptの型は堅牢だけどカジュアルに書けるため、とても 書き心地が良い。 自分（筆者）はTypeScriptじゃないと書きたくないレベル

Slide 32

Slide 32 text

TypeScriptのエコシステム

Slide 33

Slide 33 text

TypeScriptの導入

Slide 34

Slide 34 text

1. TypeScriptプロジェクトの作成 node.jsはJSのファイルで提供されているため、TypeScriptで 書く場合は型定義をインストールする必要がある。

Slide 35

Slide 35 text

2. TypeScriptの設定ファイルを作成 JSの勉強会で「ブラウザ向けのJS」と「サーバー向けのJS」 の違いを説明したが、TSでもそれをサポートするために設定フ ァイルを作成する必要がある。 (他にも色々な設定項目があるが)

Slide 36

Slide 36 text

設定ファイルは tsconfig.json というファイル名で作成す る。 https://typescriptbook.jp/reference/tsconfig/tsconfig.jso n-settings#バックエンドの場合 にサーバー向けの設定ファイルがあるので、それをコピペ 「2020年版フルスクラッチから作るなら」の「バックエンド の場合」 （設定項目が結構あって、自分でも把握しきれてない）

Slide 37

Slide 37 text

バックエンドのtsconfig.jsonを使った場合、 document や window などのブラウザ環境のグローバル変数が存在しない ため、エラーになる。

Slide 38

Slide 38 text

フロントエンドのtsconfig.jsonを使った場合、ちゃんと document や window などのブラウザ環境のグローバル変 数が存在し、補完されている。

Slide 39

Slide 39 text

3. package.jsonにスクリプトを追加 既存の"scripts"の"test"は削除して、"build"と"start"を追加 する。

Slide 40

Slide 40 text

4. TypeScriptのコンパイル 試しに src/index.ts を作成して と書いてみる。

Slide 41

Slide 41 text

dist ディレクトリが作成され、その中にコンパイルされた JSファイルが作成される。

Slide 42

Slide 42 text

dist/index.js を開いてみると このようにトランスパイルされていればOK

Slide 43

Slide 43 text

5. 実行 1 と表示されればOK

Slide 44

Slide 44 text

TypeScriptの文法

Slide 45

Slide 45 text

基本の型 number string boolean null (値が null -> ない) undefined (値が undefined -> 未定義)

Slide 46

Slide 46 text

他にも色々あるが、基本的にはこれだけで十分

Slide 47

Slide 47 text

型注釈 変数や関数の引数に型をつけることができる それ以外の型の変数や値を代入しようとするとエラーになる

Slide 48

Slide 48 text

配列

Slide 49

Slide 49 text

インターフェース

Slide 50

Slide 50 text

オブジェクトやclassの型などプロパティを持つ複合的な型を 定義するときに使う

Slide 51

Slide 51 text

Type Alias 型を変数として持つイメージ インターフェースと同じように使える、こっちの方が表現力が あって万能だが、オブジェクトとクラスをinterface、それ以外

Slide 52

Slide 52 text

合併型(Union Types) その変数が複数の型のどれかを持つことを表現する

Slide 53

Slide 53 text

応用：interfaceと合わせて使うと便利

Slide 54

Slide 54 text

こういう感じで、 role の値によって hoge の有無を変える ようにする

Slide 55

Slide 55 text

roleがadminかどうかが不確定なので、hogeがあるかどうかも 不確定で型エラーになる

Slide 56

Slide 56 text

こうすると、roleがadminの場合はhogeが必ずあることが保証 されるので、型エラーにならない それ以外の時は「値が存在しない」ことを表す null か「値 が未定義」ことを表す undefined を返すとよい

Slide 57

Slide 57 text

交差型(Intersection Types) 複数の型を結合する

Slide 58

Slide 58 text

リテラル型 値を型として使える！（これが便利）

Slide 59

Slide 59 text

オプショナル型 ? をつけると、そのプロパティがあってもなくてもよくなる

Slide 60

Slide 60 text

関数にも使える 「なくても良い」型なので実際は number | undefined と いう型になる

Slide 61

Slide 61 text

実践編

Slide 62

Slide 62 text

ReactとTypeScript

Slide 63

Slide 63 text

Reactのコンポーネントは関数として定義することができる 例えばpropsを受け取るコンポーネントは以下のように書ける

Slide 64

Slide 64 text

これをTypeScriptで書くと以下のようになる

Slide 65

Slide 65 text

Propsの実体は関数の引数の型なのでこのように書く

Slide 66

Slide 66 text

JSのReactでできたTodoアプリを TypeScriptに移植する

Slide 67

Slide 67 text

実演/演習タイム 試しに、JSのReactでできたTodoアプリをTypeScriptに移植 してみる

Slide 68

Slide 68 text

https://github.com/saitamau-maximum/react-todo-js このリポジトリをcloneしてそのフォルダに入り、 npm install して npm start すると動く

Slide 69

Slide 69 text

ご清聴ありがとうございました 質問などあれば気軽にどうぞ！