このページについて
日本一わかりやすいTypeScript入門【基礎編】 - YouTubeを見た際の学習メモです。
【日本一わかりやすいTypeScript入門】基本の型定義とアノテーション - YouTube
- プリミティブ型
string,number,boolean
【日本一わかりやすいTypeScript入門】関数のパラメーターと戻り値に型をつける - YouTube
- 関数で使われる特別な型
void:return文を持たない関数の戻り値
never:決して戻ることのない関数の戻り値 - アロー関数
export const logMessage = (message: string): void => {
console.log("hello world")
}
- オプション
あってもなくてもいい(オプショナル)を表す場合、パラメーターの最後に?をつける。 - デフォルトパラメーター
- レストパラメーター
可変長引数：型安全ではない。any型の配列の扱い。
レストパラメーター：可変長引数がとりうる型を定義できる。
const sumPrice = (...price: number[]): number => {
console.log(price)
}
- 呼び出しシグネチャとは、どのような関数なのかを表現する型定義。
type LogMessage = (message: string) => void
export const LogMessage6: LogMessage = (message) => {
console.log("hello"
}
【日本一わかりやすいTypeScript入門】型エイリアス(type)でオブジェクトの型定義 - YouTube
オブジェクトの型定義、合併型と交差型よく使う。
-
オブジェクトの型定義
goとかtypescriptは、構造的部分型。
オブジェクトの構造に型をつける。
typescriptには、object型があるが、objectの構造毎に型をつけなければ意味がない。
→オブジェクトリテラル記法を使う。 -
特別なプロパティ
オプショナルのついたプロパティは、あってもなくてもいい。
readonlyのついたプロパティは上書きできない。 -
オブジェクトの柔軟な型定義
インデックスシグネチャ
型エイリアス:typeを使って、型に名前をつける。 -
合併型(union)と交差型(intersection)
合併型: A or B
交差型: A and B (※AB両方の型を持つ)
合併型は、string or numberみたいな使い方が多い。オブジェクト型の合併型は、あまり使わない。
【日本一わかりやすいTypeScript入門】積極的に使いたい配列・タプルの型定義 - YouTube
- 型定義方法
number[] と Arrayは全く同じ。
(string | number)[] = ["ABC", 123]というような合併型もできるけど、おすすめしない。 - 厳格な配列(タプル)
配列の各要素の数と型を定義できる。
let response: [number, string] = [200, "OK"]
可変長引数を使ったタプル
const girlfridends: [string, ...string[]] = ["kana", "keiko", "miyu"]
- イミュータブルな配列
const commands: readonly string[] = ["git add", "git commit"]
const numbers: ReadonlyArray<number> = [1,2,3]
const names: Readonly<string[]> = ["taro", "jiro"]
【日本一わかりやすいTypeScript入門】ジェネリック型を使いながらポリモーフィズムを理解する - YouTube
ジェネリック型：共通化の手段の一つなので、いつどのように使うべきかを把握しておく。
- 型を抽象化するジェネリック型(総称型)
型の種類が異なるが、同じデータ構造を持つ場合に、型の種類を引数として渡して、型をパラメータ化することで共通化できる。 - ポリモーフィズム(多態性)
いろいろな形に変化できること。
ジェネリック型を用いると、型を抽象化して共通化して、呼び出しの際に具体的な型を渡す。
一つのジェネリック型の定義で、渡す型を変えることで、様々な型に変化できる(ポリモーフィズム)。
→保守性が上がる。
【日本一わかりやすいTypeScript入門】TypeScriptで学ぶオブジェクト指向開発 - YouTube
- クラスの3つの役割
まとめる。隠す。たくさん作る。 - 用語
プロパティ：クラスが持つデータのこと。フィールドとかメンバ変数とも呼ばれる。
メソッド：関数
コンストラクタ：クラスからインスタンスを作るときに行う初期化
インスタンス：クラスから作られたオブジェクト - 抽象クラスは、インスタンス化できない。
インスタンス化せずにクラスを使う場面とは？
→継承でサブクラスを作るためのクラス。つまり親になるためのクラス。
【日本一わかりやすいTypeScript入門】ハンズオンで理解するInterfaceとType Aliasの違い - YouTube
- Interfaceの特徴について
- 基本的な使い方
interface Bread {
calories: number
}
同じ名前を共有する複数の宣言を自動的に結合
※型エイリアスで表現するときは、交差型(union)を使う。
interface Bread {
type: string
}
const francePan: Bread = {
calories: 350,
type: "hard"
}
- Interfaceの拡張
extendsを使うことで、継承したサブインターフェースを作成できる。 - implementsを使って、classに型を定義できる
implements：実装するという意味の英単語 - Type Aliasとの違い
Type Alias
- 複数の場所で再利用する型に名前をつけるためのもの。
- オブジェクトと関数以外のプリミティブ、配列、タプルも宣言可能。
- 同名のtypeを宣言するとエラーになる。
- 継承はできないが、交差型を使って、新しい型エイリアスを作成できる。
- 拡張しにくいので、アプリ開発で使用する。基本的にはこちらを使う。
Interface
- Interfaceは、構造を定義するためのもの。
- オブジェクトと関数の型のみ宣言できる。
- extendsによる継承ができる。
- 拡張しやすいので、利用者が拡張できるようライブラリ開発で使用する。
【日本一わかりやすいTypeScript入門】非同期処理にも型定義！APIから安全にデータを取得 - YouTube
Promoise async await
type FetchProfile = () => Promise<Profile | null>
const fetchProfile: FetchProfile = async () => {
.then((res :Pesponse ) => res)
.catch((error) => {
})
const json = await response.json()
.then((json: Profile) => {
console.log(json)
})
}