🕋

TypeScript再入門

作成日: 2024-07-14T15:32:00.000Z

最終更新: 2024-08-07T12:24:00.000Z

型アノテーション

// :string ← これ
// 明示的に型をつけること
const name: string = '名前'

// 補足
// アノテーションとは
// 注釈、データにタグをつけるなど、意味を持たせるということ

プリミティブ型
- プログラミング言語などが仕様として提供する基本的なデータ型（number, string, nullなど）
- プリミティブ = 原始的なもの、原型、根源的な

呼び出しシグネチャ

シグネチャ = 署名

// 省略記法
type LogMessage = (message: string) => void

// 完全記法
type FullLogMessage = {
	(message: string): void
}

// messageはstring、返り値はvoidとなる
const logMessage: LogMessage = (message) => {
	console.log(message)
}

オブジェクトリテラル記法

let country = {
	language: string
	name: string
} = {
	language: 'Japanese',
	name: 'JAPAN'
}

インデックスシグネチャ
- オブジェクトの動的なプロパティの型定義を可能にする特殊な構文要素
- [key名: string]: 型名
- 動的にどんな値がくるか予測できないような、キーが事前に定義できないオブジェクトの型を定義する場合に役立つ
```
type ItemsType = {
  [key: string]: string;
};

const items: ItemsType = {
  desk: "wooden",
  phone: "plastic",
  glasses: "metal",
  bag: "leather",
};
```

型エイリアス

typeを使って、型に名前をつけて宣言すること

type Country = {
	capital: string
	language: string
	name: string
}

厳格な配列タプル

// numberとstringの順に2要素で並ぶ配列という型指定
const array: [number, string] = [123, "array"]

// 可変長（レストパラメータ）も使用可能
const numbers: [string, ...number[]] = ["123", 123]

immutableな配列

// JavaScriptの配列はconstで宣言してもミュータブル（書き換え可能）
const mutableNumbers: number[] = [1,2,3]
mutableNumbers[2] = 4 // [1,2,4]

// readonlyでイミュータブル（書き換え不可）な配列/タプルを作れる
const immutableNumbers: readonly number[] = [1,2,3]
immutableNumbers[2] = 4 // error: 型 'readonly number[]' のインデックス シグネチャは、読み取りのみを許可します。

// 他の書き方
const immutableNumbers2: ReadonlyArray<number> = [1,2,3]
const immutableNumbers3: Readonly<number[]> = [1,2,3]

ジェネリック

// ジェネリック型 型の抽象化
type Generic<T> = (args: T) => T

// Genericという同じ型を汎用的に利用可能
const function01: Generic<number> = (num) => {
    return num
}
// numberしか渡せない
function01(123)

const function02: Generic<string> = (string) => {
    return string
}
// stringしか渡せない
function02("123")

応用

// 2つの抽象的な型指定
type Generic<T, U> = (args: T) => U
const function01: Generic<number, string> = (num) => {
    return `${num}`
}
function01(123)

typeとinterfaceについて

宣言方法

interface

型の宣言

interface Human {
    name: string
    age: number
}

type（型エイリアス）
- 型の代入（=で代入する、セミコロンが最後につく）
```
type Human =  {
    name: string
    age: number
};
```

型の結合

interface

再宣言することでプロパティが追加される

interface Human {
    name: string
    age: number
}

interface Human {
    blood: 'A' | 'B' | 'O' | 'AB'
}

const Taro: Human = {
    name: '太郎',
    age: 20,
    blood: 'A'
}

type

交差型（union）を利用

type NameAndAge =  {
    name: string
    age: number
}

type BloodType =  {
    blood: 'A' | 'B' | 'O' | 'AB'
}

type Human = NameAndAge & BloodType

const Taro: Human = {
    name: '太郎',
    age: 20,
    blood: 'A'
	}

拡張

interface

extendsする

interface Book {
    title: string
}

interface Magazine extends Book {
    cycle: 'daily' | 'weekly'
}

const jump: Magazine = {
    title: '週刊少年ジャンプ',
    cycle: 'weekly'
}

型エイリアスを拡張することも可能

// 型エイリアスのBookに変更
type Book = {
    title: string
}

interface Magazine extends Book {
    cycle: 'daily' | 'weekly'
}

const jump: Magazine = {
    title: '週刊少年ジャンプ',
    cycle: 'weekly'
}

classに型定義する

implements

interface Book {
    page: number
    title: string
    Log(): void;
}

class Comic implements Book {
    page; // numberと認識される
    title; // stringと認識される

    constructor(page: number, title: string) {
        this.page = page
        this.title = title
    }

    // voidと認識される
    Log() {
        console.log(`${this.title}のページ数は${this.page}です`)
    }
}

const popularComic = new Comic(200, "鬼滅の刃")
popularComic.Log();

まとめ

	Type Alias	Interface
用途	複数の場所で再利用する
型に名前をつけるため	オブジェクト・クラス・関数の構造を定義するため
拡張性	同盟のtypeを宣言するとエラー	同盟のinterfaceを宣言するとマージされる
継承	継承はできない
交差型で新しい型エイリアスを作る	extendsによる継承ができる
使用できる型	オブジェクトや関数以外のプリミティブ、配列、タプルも宣言可能	オブジェクトと関数の方のみ宣言できる
考慮事項	拡張しにくい不便さがある	意図しない拡張によるバグが生まれる可能性
いつ使う	アプリ開発ではType Alias	ライブラリ開発ではInterface

番外編
- class
  - 抽象クラス（abstract）
  - インスタンス化できないクラス
  - 継承でサブクラスを作るためのクラス
```
abstract class AbstractClassSample {}
```