TypeScript

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

こんにちは、アプリ開発者のテルです!

本記事では、TypeScriptにおける「基本的な型」の使い方をご紹介します。

どれも初学者向けに「シンプルで分かりやすい」にこだわって解説しています。

厳選した24選は、TypeScriptを用いたWeb開発には欠かせない知識です。基礎をしっかりと押さえて開発の幅を広げていきましょう。

テル

ぜひ参考にしてみてください!

本記事を読むメリット
  1. TypeScriptの基本的な型の使い方を一覧で確認できる
  2. コードを用いて解説しているため、すぐに理解できる

TypeScriptにおける基本的な型の使い方24選

string型

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

number型

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

boolean型

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

null型

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

undefined型

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

array型

// 配列を指定する

// 書き方は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"];

tuple型

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

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

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

any型

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

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

void型

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

never型

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

object型

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

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

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

unknown型

// [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型]しか許容しないため、エラーは発生しない
}

intersection型

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

type RedColor = {
  red: number;
};

type BlueColor = {
  blue: number;
};


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

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

union型

// 複数の型を許容する

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

literal型

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

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

enum型

// 複数の定数を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;

constアサーション

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

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

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

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

Nullable Types

// どうしても具体的な値が指定できない場合(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 = "ブラジル"; //プロパティを変更

まとめ

今回は「TypeScriptにおける基本的な型の使い方」をご紹介しました。

今回ご紹介した24選は、TypeScriptを用いたWeb開発には欠かせない知識になっています。基礎をしっかりと押さえて開発の幅を広げていきましょう。

TypeScriptの実践的なスキルを身につけたいという方にはUdemyがおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。

▶︎【2022年最新】TypeScript学習におすすめのUdemy講座3選

最後までご覧いただきありがとうございました。ではまた!

参考文献
Flutter関連の書籍を出版しました!