このページについて

日本一わかりやすい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)
     })
}

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

このページについて