TypeScriptハンズオン

Transcript

1. TypeScriptハンズオン Github: @sor4chi 𝕏 Twitter: @monica18_pr
2. 今日の目標 TypeScriptのニーズやメリットを理解する TypeScriptの仕組みを理解する TypeScriptを使えるようになる
3. JSの不満
4. JSの確認 JavaScriptは動的型付け言語 旧バージョンからの互換性を持ったアップデートを繰り返して いるせいで、負債と言わんばかりの難解な挙動がある
5. 不満その1: 型がない 型がないので、変数や関数の型を把握するのが難しい
6. 例えばこんなやつ Q: a のデータ型 is 何 string ? number ?
7. こんなやつも Q: add の引数の型 is 何 A: number ? null ?
8. 不満その2: 暗黙的な型変換 色々なデータ型の演算が暗黙的なキャストで行われる
9. 例えばこんなやつ Q: a の値 is 何 A: 20
11. 文字列の足し算は文字列の連結になるが、引き算は数値の引き 算になる そのため となる
12. 不満その3: HTML上の値の取扱い
14. Q: resultの値 is 何 A: 11
16. input.value は文字列で返ってくるので、 value + 1 は 文字列の連結になる
17. その不満、 TypeScript で解決できますよ
18. TypeScript知識
19. TypeScriptとは TypeScriptはJavaScriptの 拡張言語 であり、JavaScriptにコ ンパイルタイムの型チェックを追加したもの（静的型付け言 語）。 ただし、コンパイル時に型チェックを行うだけで、実行時には 型チェックは行わない。
20. TypeScriptの目的 JSの無秩序で自由な世界を、型チェックを追加することで秩 序づけること。(型安全) プログラミングをする行為をTypeHintにより効率化するこ と。(型補完)
21. TypeScriptの本質 TypeScriptはJavaScriptに型チェック用の構文を導入したよ うなもの。 TypeScriptは トランスパイラ と呼ばれるコンパイラによって JavaScriptに変換される。
22. CやC++などが機械語でへコンパイルされるのに対し、 TypeScriptはJavaScriptに トランスパイル される。 高級言語 to 高級言語なのでトランス + コンパイル = トランス パイルだと思う
23. 例えば... は
24. に変換される
25. 本当に 型情報を追加しただけ である。 ※ 本当は拡張構文があったりするので純粋な変換をしているわ けではないが...
26. TypeScriptのエディタサポート
27. ビルド時に型チェックを行うのでいちいちトランスパイルを実 行するのは面倒。 そこで、エディタによる型チェックを行うことで、トランスパ イルを実行しなくてもプログラミングしているタイミングでそ のまま型チェックを行うことができる。
28. キャスト時の型推論
29. 再代入時の型チェッ ク
30. メソッドの型補完
31. TypeScriptの型は堅牢だけどカジュアルに書けるため、とても 書き心地が良い。 自分（筆者）はTypeScriptじゃないと書きたくないレベル
32. TypeScriptのエコシステム
33. TypeScriptの導入
34. 1. TypeScriptプロジェクトの作成 node.jsはJSのファイルで提供されているため、TypeScriptで 書く場合は型定義をインストールする必要がある。
35. 2. TypeScriptの設定ファイルを作成 JSの勉強会で「ブラウザ向けのJS」と「サーバー向けのJS」 の違いを説明したが、TSでもそれをサポートするために設定フ ァイルを作成する必要がある。 (他にも色々な設定項目があるが)
36. 設定ファイルは tsconfig.json というファイル名で作成す る。 https://typescriptbook.jp/reference/tsconfig/tsconfig.jso n-settings#バックエンドの場合 にサーバー向けの設定ファイルがあるので、それをコピペ 「2020年版フルスクラッチから作るなら」の「バックエンド の場合」 （設定項目が結構あって、自分でも把握しきれてない）
37. バックエンドのtsconfig.jsonを使った場合、 document や window などのブラウザ環境のグローバル変数が存在しない ため、エラーになる。
38. フロントエンドのtsconfig.jsonを使った場合、ちゃんと document や window などのブラウザ環境のグローバル変 数が存在し、補完されている。
39. 3. package.jsonにスクリプトを追加 既存の"scripts"の"test"は削除して、"build"と"start"を追加 する。
40. 4. TypeScriptのコンパイル 試しに src/index.ts を作成して と書いてみる。
41. dist ディレクトリが作成され、その中にコンパイルされた JSファイルが作成される。
42. dist/index.js を開いてみると このようにトランスパイルされていればOK
43. 5. 実行 1 と表示されればOK
44. TypeScriptの文法
45. 基本の型 number string boolean null (値が null -> ない) undefined (値が undefined -> 未定義)
46. 他にも色々あるが、基本的にはこれだけで十分
47. 型注釈 変数や関数の引数に型をつけることができる それ以外の型の変数や値を代入しようとするとエラーになる
48. 配列
49. インターフェース
50. オブジェクトやclassの型などプロパティを持つ複合的な型を 定義するときに使う
51. Type Alias 型を変数として持つイメージ インターフェースと同じように使える、こっちの方が表現力が あって万能だが、オブジェクトとクラスをinterface、それ以外
52. 合併型(Union Types) その変数が複数の型のどれかを持つことを表現する
53. 応用：interfaceと合わせて使うと便利
54. こういう感じで、 role の値によって hoge の有無を変える ようにする
55. roleがadminかどうかが不確定なので、hogeがあるかどうかも 不確定で型エラーになる
56. こうすると、roleがadminの場合はhogeが必ずあることが保証 されるので、型エラーにならない それ以外の時は「値が存在しない」ことを表す null か「値 が未定義」ことを表す undefined を返すとよい
57. 交差型(Intersection Types) 複数の型を結合する
58. リテラル型 値を型として使える！（これが便利）
59. オプショナル型 ? をつけると、そのプロパティがあってもなくてもよくなる
60. 関数にも使える 「なくても良い」型なので実際は number | undefined と いう型になる
61. 実践編
62. ReactとTypeScript
63. Reactのコンポーネントは関数として定義することができる 例えばpropsを受け取るコンポーネントは以下のように書ける
64. これをTypeScriptで書くと以下のようになる
65. Propsの実体は関数の引数の型なのでこのように書く
66. JSのReactでできたTodoアプリを TypeScriptに移植する
67. 実演/演習タイム 試しに、JSのReactでできたTodoアプリをTypeScriptに移植 してみる
68. https://github.com/saitamau-maximum/react-todo-js このリポジトリをcloneしてそのフォルダに入り、 npm install して npm start すると動く
69. ご清聴ありがとうございました 質問などあれば気軽にどうぞ！