Typescriptの型定義

はじめに

Typescriptの学習を始めた初学者です。
慣れない型定義の記述を備忘録としてまとめています。
記述に誤りがある場合など、ご指摘いただけると幸いです！

型アノテーションの基本の書き方

// 変数
let height: number = 170;

// 定数
const weight: number = 60;

// 関数
const getTriangle(base: number, height: number) : number {
    return base * height / 2;
}

// クラス
class Person {
    name: string = "山田太郎";
    age: number = 20;

    introduce(): string {
        return `私の名前は${this.name}です。年齢は${this.number}です。`
    }
}

TypeScriptのデータ型

プリミティブ型

// 数値型
const age: number = 30;

// 真偽型
const isMarried: boolean = true;

// 文字列型
const name: string = "John";

// symbol型(一意の値)
const uniqueString: symbol = Symbol("unique");

// undifined型(値が定義されていない状態)
const notDefined: undefined = undefined;

// null型(値が存在しない状態)
const empty: null = null;

// bigint型
const number: bigint = 12345678901234567890n; 

配列型

const language: string[] = ['JavaScript', 'Ruby', 'Python'];

タプル型

const person: [srting, number, boolean] = ['佐藤三郎', 50, false];

オブジェクト型

let member: {
    name: string,
    age: number,
    married: boolean
} = {
    name: '山田太郎',
    age: 50,
    married: true
};

Typescript固有の型

void型

値が存在しないことを示す型。
関数が何も返さない(戻り値がない)場合に使用する。

const greet = (name: string): void => {
    console.log(`私の名前は${name}です。`);
}

any型

どんな値でも代入できる型。型が不明な場合に使用できる。
便利だがどのような値でも許容してしまうためTypescriptの良さが薄れるので、極力使用を避ける。

let age: any;
age = 30;
age = '30歳'

unknown型

どんな値でも代入できる型。型が不明な場合に使用できるが、値に対する制限がある。
any型よりも安全性の高い型と言える。

// unknown型なのでどんな値でも代入できる。
const x: unknown = 100;

// 数値型でないので(unknown型なので)、乗算ができない
console.log(x * 3); => 'x' is of type 'unknown'.エラーが発生。

never型

何も戻り値として返さないことを示す型。
エラーを投げる関数や無限ループ関数などの戻り値として使用する。
※voidとの違い：関数の終端に到達できない場合にnever、関数の実行完了までする場合はvoid。

const throwError = (): never => {
    throw new Error('Error');
}

複数の型を組み合わせる場合

共有体型

複数の型のいずれかを指定する場合に使用する。

// 数値でも文字列でも代入できる。
let age: string | number;
age = 30;
age = '30歳';

// 配列の場合
let person: (string|number)[] = ['山田太郎', 40, '男性'];

型エイリアス

既存の方を別の名前で定義する機能のこと。
type 型名 = 型定義の構文で定義することで、その他の型のように利用ができる。

type Person = {
    name: string,
    age: number,
    gender: string
}

let employee: Person = {
    name: '山田太郎',
    age: 35,
    gender: '男性'
}

ジェネリクス

クラスやメソッドに対して特定の型を紐づけるための仕組みのこと。
ジェネリクス=「型の型」とイメージすると良い。

ジェネリクスは具体的な型を指定するのではなく、型の「テンプレート」を指定できる。つまりどんな型でも代入できるため、重複したコードを避けることができる。

例）ジェネリクスを使用しない場合
引数から値を受け取り、関数の中で処理を実行するという流れが共通している関数がある場合、型が異なるので2回同じような記述をしなければならない。

例

const doubleNumber = (n: number): number  =>  {
    return n * 2;
}

const capitalizeString = (s: string): string => {
    return s.toUpperCase();
}

console.log(doubleNumber(2));
console.log(capitalizeString('i'));

冗長的な記述を書き換えるために、ジェネリクスを用いて型を設定する。

例）ジェネリクスを使用した場合

const checkArg = <T>(arg: T): T => {
    return arg;
};

console.log(checkArg<number>(2));         // 数値を指定
console.log(checkArg<string>('test'));     // 文字列を指定