TypeScript 勉強会 Day1
645 Views
September 05, 23
スライド概要
社内で行ったTypeScript勉強会のDay1です。Day1 ではTSの基本文法をメインに取り扱います。
LIFULL HOME'Sを運営する株式会社LIFULLのアカウントです。 LIFULLが主催するエンジニア向けイベント「Ltech」等で公開されたスライド等をこちらで共有しております。
関連スライド
各ページのテキスト
TypeScript ハンズオン Day1 1 © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。
TypeScript勉強会の目的 ● 弊社でTypescriptの採用率が上がっている ● しかし今までの技術スタックが主にv5のphp、ruby、js
TypeScript勉強会の目的 ● TypeScript力を上げて開発者を増やす ● x-bffのコードリーディングが可能になる ● 開発にスムーズに取り掛かれる
TypeScript勉強会の目的 Day 2: Day 1: ● ● TypeScriptとは／なぜ使うのか ● ● 変数、関数、オブジェクトの型 Generics Day 3: 宣言 ● ユーザ定義型ガード ● Type、Interfaceを使った宣言 ● Utility Types ● 型ガード ● Indexed access type ● 型の互換性 ● 実際のリポジトリのコード
Typescriptとは 動的型付けと静的型付け ● プログラムはデータを操作する手順書 ● データには型という性質があり、型はデータに対してどのような操作を行 えるかを決める ● String、Integer、Booleanなど
Typescriptとは 動的型付けと静的型付け ● 動的：コード実行時にコンパイラー／インタプレターがデータの型を解釈 する 例：Javascript、PHP、Pythonなど
Typescriptとは 動的型付けの問題 ● 実行までデータがどの型か分からな いので挙動が予測しずらい ● 実行して初めてmessageがストリング 型と分かってコール出来ないエラーが 発生する
Typescriptとは 動的型付けの問題 予期しない引数が入ってきて も実行時にエラーが起きずに サイレントにバグが発生する
Typescriptとは ● 静的型付け ● データに対してあらかじめ型を宣言してコンパイル時にそれに合わない 形や挙動を受け付けない（エラーが発生する） 例：Java、C++など ● TypeScriptはJavaScriptに静的型付けの機能を加えた上位集合 ● TypeScriptを書いてそれがJavaScriptにコンパイルされる
Typescriptとは 静的型付け ● 型宣言のコスト（開発スピード）と引き換えにバグが少ない安全な開発が できる！ ● 本日はTS力を上げてコストを軽減します
基本の型 変数に型をつけてみよう
基本の型 プリミティブ型 ● string ● number ● boolean ● <変数>:<型>
基本の型 プリミティブ型 ● string ● number ● boolean ● <変数>:<型>
基本の型 プリミティブ型 ● null ● undefined ● 初期化されてない変数
基本の型 配列型 ● 型の後に[ ] を記載 ● <変数>: <型>[]
基本の型 any型 ● 万能、なんでも可能 ● 複雑な型チェックエラーを消す
基本の型 unknown型 (何か分からない型） ● anyと同じでunknownには何で も入れられる
基本の型 unknown型 ● anyと違う所：any以外の型に は入れられない
基本の型 関数型 ● 引数の型 ● 戻り値の型
基本の型 新しい型を作る：ユニオン型 ● TSは既存の型を組み合わせて 新たな型を作る ● ユニオン型＝どちらかの型
基本の型 タイプを定義 ● 前の自作ユニオンをtypeを 使って新しくID型として定義 する
基本の型 関数自体の型 ● アローとメソッドの 2種類がある
基本の型 関数を元に型を宣言する ● 既に宣言された物からtypeofを 使って型を作れる
基本の型 オブジェクトの型 ● 今までのように変数の後 に直接宣言できる
基本の型 オブジェクトの型 ● タイプで宣言 （const見たいに作成後変 更不可）
基本の型 オブジェクトの型 ● インターフェイスで宣言 （変更可能） ● どちらか迷ったらtype
基本の型 新しい型を作る： インターセクション型 ● 両方の型の性質を持つ
基本の型 オブジェクトの型 ● オプショナルのプロパティー
基本の型 オブジェクトの型 ● インデックスの型 ● この場合キーがstringで あれば値がnumberとい う宣言
基本の型 オブジェクトの型 ● インデックスをユニオン型に して解決
基本の型 オブジェクトの型 ● keyof ● オブジェクトのキーからユニ オン型を簡単に作成する
型の絞り込み 型の絞り込み 型が複数の可能性が ある場合、TSコンパイ ラにどの型か教える事
型の絞り込み コンパイラはこの範囲で studentsはstring又は numberと認識してるので numberにtoLowerCase()メ ソッドが無いエラーというエ ラーが発生する
型の絞り込み コンパイラは分岐分を解析 してこの範囲ではstudents はstringって事が分かる
型の絞り込み ● TSコンパイラは:の後の型を読むだけではなく、if文などのロジックを解 析して型を読み取る機能がある
型の絞り込み TSコンパイラに型を絞ることを指 示するオペレータ＝型ガード
型の絞り込み ここではstring又はnumber ここではstring ここではnumber
型の絞り込み Equality型ガード
型の絞り込み instanceof クラスのインスタンスである かの確認
型の絞り込み instanceof
型の絞り込み いつ使われるのか？ DB通信から取ってきた データを使う前にデータが 存在するか確認したい時 等
型の互換性 型の互換性 ● Typescriptでは代入時に型が合わないとエラーが発生するが 厳密に同じ型でなくても互換性があれば問題ない
型の互換性 型の互換性 ● PetとDogで名前が違っても構造 が同じなので互換性がある ● Typescriptの形に沿った互換性 はStructural Typingという
型の互換性 型の互換性 ● 広い型にその型の部分集合 の型は代入できる
型の互換性 型の互換性 ● shapeにdogは代入できる だろうか？
型の互換性 型の互換性 ● stringの方が “Circle”｜”Square” より広いので出来ない