【TypeScript入門】基本的な型の使い方24選！コードを用いて徹底解説

// 文字列を指定する
let str: string = "Hello World";

// 数値を指定する
let num: number = 1;

// 真偽値を指定する
let bool: boolean = true;

// nullを指定する(代入すべき値がないため、値がない）
let nullable: null = null;

// undefinedを指定する(値が代入されてないため、値がない）
let data: undefined = undefined;

// 配列を指定する

// 書き方は2通りある
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];

// 二次元配列の場合
let nijigen: number[][] = [
  [50, 100],
  [150, 300],
];

// 複数の型がある場合
let hairetsu: (number | boolean | string)[] = [1, false, "Tokyo"];

// 配列に制約を持たせる

// 1番目には[string型],2番目には[number型]しか許容しない
let profile: [string, number] = ["Teru", 20];

// 順番が違うため、エラーが発生する
profile = [20, "Teru"]; 

// どんな型でも許容する

// 基本的に使うべきではない(エラーを避けるためにとりあえず使う分にはよし）
let str: any = "Teru";
str = 20;
str = true;

// 関数の戻り値がない
function returnNothing(): void {
  console.log("I don't return anything!");
}

// 関数の戻り値が例外
function error(message: string): never {
  throw new Error(message);
}

// オブジェクトを指定する

// Part1 = 制約が甘い
let profile1: object = { name: "Teru" };
profile1 = { birthYear: 2002 };

// Part2 = プロパティに型指定できる(基本こっち)
let profile2: { name: string } = { name: "Teru" };
profile2 = { name: "Yuta" };

// [any型]と同じようにどんな値も許容するが、型を審査する

const func = (): number => 1;

// 共にどんな値でも許容する
let numAny: any = func();
let numUnknown: unknown = func();

let sumAny = numAny + 1;
let sumUnknown = numUnknown + 1; //型を指定してないけど大丈夫？(エラー発生)

//　Type Guard - 暫定的に[unknown型]をつけておいて、型を絞っていきながら型を調べていくアプローチ
// [typeof]を使うことで、ある特定の型であることを確認しながら実行できる
if (typeof numUnknown === "number") {
    let sumUnknown = numUnknown + 10; //[number型]しか許容しないため、エラーは発生しない
}

// 既存の型を組み合わせる

type RedColor = {
  red: number;
};

type BlueColor = {
  blue: number;
};


// [RedColor]と[BlueColor]を組み合わせる
type RedColorAndBlueColor = RedColor & BlueColor;

const PurpleColor: RedColorAndBlueColor = {
  red: 50,
  blue: 50,
};

// 複数の型を許容する

let value: number | string = 1;
value = "foo";
value = 2;

// より詳細な型を指定する

let myName: "Teru" = "Teru";
myName = "Yuta"; //代入できない

// 複数の定数を1つのクラスとしてまとめる

enum Months {
  January = 1, //先頭から順に数字が割り当てられる
  February,
  March,
  April,
  May,
  Jun,
  August,
  September,
  October,
  November,
}

// 定数を追加する
enum Months {
  December,
}

// インスタンス化せずに値を参照できる
console.log(Months.January);  // 実行結果 1

// 型に別名を付与する

// [Mojiretsu]に[string型]を指定する
type Mojiretsu = string;
const foo: Mojiretsu = "Hello";

// オブジェクトの場合
type Profile = {
  name: string;
  age: number;
};

const profile: Profile = {
  name: "Teru",
  age: 20,
};

//  typeof で連動して型を指定できる
type Profile2 = typeof profile;

// オブジェクトの型に名前を付与する

interface ObjectInterface {
  name: string;
  age: number;
}

let object: ObjectInterface = {
  name: "Teru",
  age: 20,
};

// [any型]と[string型]は互換性がある
let foo1: any;
let bar1: string = "TypeScript";

foo1 = bar1;

// [string型]と[number型]は互換性がない
let foo2: string;
let bar2: number = 1;

foo2 = bar2; //エラー発生

// 同じ型は互換性がある
let foo3: string;
let bar3: string = "string";

foo3 = bar3;

// [string型]は[literal型]と互換性がある
let foo4: "fooStringLiteral" = "fooStringLiteral";
foo3 = foo4;


// オブジェクト間の型の互換性はプロパティで判定される
interface Animal {
  age: number;
  name: string;
}

class Person {
  constructor(public age: number, public name: string) {}
}

let animal: Animal;
let person = new Person(20, "テル");
animal = person; 

// 汎用的なクラスやメソッドに特定の型を紐付けるための仕組み

// 以下の2つの関数の実行内容は同じなので、汎用的に使えるようにしたい
const foo = (arg: number): number => {
  return arg;
};

const bar = (arg: string): string => {
  return arg;
};


// ジェネリクスに対応した関数（T = 関数の実行時に指定する型)
const echo = <T>(arg: T): T => {
  return arg;
};

// 関数の実行時に型を指定する
console.log(echo<number>(100));
console.log(echo<string>("Hello"));

// ジェネリクスに対応したクラス
class Example<T> {
  constructor(public value: T) {}
  echo(): T {
    return this.value; 
  }
}

// 関数の実行時に型を指定する
console.log(new Example<number>(123).echo());
console.log(new Example<string>("Hello").echo());

// 型の変換 (左辺に型を指定するのではなく、代入前に型を指定する)

let name: any = "テル";

// 書き方は3パターンある
let length1 = (name as string).length; //JSX記法を書く際に1番わかりやすい
let length2 = name.length as number;
let length3 = (<string>name).length;

// 再代入を許したくない場合（変数を定数に変換する → 全ての要素をreadonlyにする）

let name = "テル" as const;
name = "テルスケ"; //変更不可

let profile = {
  name: "テル",
  height: 175,
} as const;

profile.name = "テルスケ"; 変更不可
profile.height = 180;

// どうしても具体的な値が指定できない場合（nullを許容できるようにしたい） 
// ユニオン型を使用しよう！！

let profile: { name: string; age: number | null } = {
  name: "Teru",
  age: null,
};

// 値を後から次々と追加・変更したい場合

interface Profile {
  name: string; 
  underTwenty: boolean;
  [index: string]: string | number | boolean;
}

let profile: Profile = { name: "テル", underTwenty: false };

profile.name = "テル";
profile.age = 20;
profile.nationality = "日本"; //プロパティを追加
profile.nationality = "ブラジル"; //プロパティを変更