日本一わかりやすいTypeScript入門【基礎編】の学習メモ

# このページについて
[日本一わかりやすいTypeScript入門【基礎編】 \- YouTube](https://www.youtube.com/playlist?list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad)を見た際の学習メモです。

## [【日本一わかりやすいTypeScript入門】基本の型定義とアノテーション \- YouTube](https://www.youtube.com/watch?v=KQhyHHQrcic&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad&index=4)
* プリミティブ型
string,number,boolean

## [【日本一わかりやすいTypeScript入門】関数のパラメーターと戻り値に型をつける \- YouTube](https://www.youtube.com/watch?v=obdbskaarVQ&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad&index=5)
* 関数で使われる特別な型
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](https://www.youtube.com/watch?v=2DoYdw-rvL0&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad&index=6)
オブジェクトの型定義、合併型と交差型よく使う。
1. オブジェクトの型定義
goとかtypescriptは、構造的部分型。
オブジェクトの構造に型をつける。
typescriptには、object型があるが、objectの構造毎に型をつけなければ意味がない。
→オブジェクトリテラル記法を使う。

2. 特別なプロパティ
オプショナルのついたプロパティは、あってもなくてもいい。
readonlyのついたプロパティは上書きできない。

3. オブジェクトの柔軟な型定義
インデックスシグネチャ
型エイリアス:typeを使って、型に名前をつける。

4. 合併型(union)と交差型(intersection)
合併型: A or B
交差型: A and B　(※AB両方の型を持つ)

合併型は、string or numberみたいな使い方が多い。オブジェクト型の合併型は、あまり使わない。

## [【日本一わかりやすいTypeScript入門】積極的に使いたい配列・タプルの型定義 \- YouTube](https://www.youtube.com/watch?v=BUSlgsUWn4I&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad&index=7)
* 型定義方法
number[] と Array<number>は全く同じ。
(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](https://www.youtube.com/watch?v=5JYZzB7MMvo&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad&index=8)
ジェネリック型：共通化の手段の一つなので、いつどのように使うべきかを把握しておく。
* 型を抽象化するジェネリック型(総称型)
型の種類が異なるが、同じデータ構造を持つ場合に、型の種類を引数として渡して、型をパラメータ化することで共通化できる。
* ポリモーフィズム(多態性)
いろいろな形に変化できること。
ジェネリック型を用いると、型を抽象化して共通化して、呼び出しの際に具体的な型を渡す。
一つのジェネリック型の定義で、渡す型を変えることで、様々な型に変化できる(ポリモーフィズム)。
→保守性が上がる。
## [【日本一わかりやすいTypeScript入門】TypeScriptで学ぶオブジェクト指向開発 \- YouTube](https://www.youtube.com/watch?v=7u8o1r0LkHU&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad&index=9)
* クラスの3つの役割
まとめる。隠す。たくさん作る。
* 用語
プロパティ：クラスが持つデータのこと。フィールドとかメンバ変数とも呼ばれる。
メソッド：関数
コンストラクタ：クラスからインスタンスを作るときに行う初期化
インスタンス：クラスから作られたオブジェクト
* 抽象クラスは、インスタンス化できない。
インスタンス化せずにクラスを使う場面とは？
→継承でサブクラスを作るためのクラス。つまり親になるためのクラス。
## [【日本一わかりやすいTypeScript入門】ハンズオンで理解するInterfaceとType Aliasの違い \- YouTube](https://www.youtube.com/watch?v=J2vox52T4W8&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad&index=10)
* Interfaceの特徴について
1. 基本的な使い方
```
interface Bread {
 calories: number
}
```
同じ名前を共有する複数の宣言を自動的に結合
※型エイリアスで表現するときは、交差型(union)を使う。
```
interface Bread {
 type: string
}

const francePan: Bread = {
    calories: 350,
    type: "hard"
}
```
2. Interfaceの拡張
extendsを使うことで、継承したサブインターフェースを作成できる。
3. implementsを使って、classに型を定義できる
implements：実装するという意味の英単語
4. Type Aliasとの違い


Type Alias
- 複数の場所で再利用する型に名前をつけるためのもの。
- オブジェクトと関数以外のプリミティブ、配列、タプルも宣言可能。
- 同名のtypeを宣言するとエラーになる。
- 継承はできないが、交差型を使って、新しい型エイリアスを作成できる。
- 拡張しにくいので、アプリ開発で使用する。基本的にはこちらを使う。

Interface
- Interfaceは、構造を定義するためのもの。
- オブジェクトと関数の型のみ宣言できる。
- extendsによる継承ができる。
- 拡張しやすいので、利用者が拡張できるようライブラリ開発で使用する。

## [【日本一わかりやすいTypeScript入門】非同期処理にも型定義！APIから安全にデータを取得 \- YouTube](https://www.youtube.com/watch?v=7BCC4psJXqQ&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad&index=11)
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)
     })
}