【初心者向け】TypeScript超入門#02 基本的な型編

2020-06-22

はじめに

おはようございます!こんにちは!こんばんは!
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です!!

この記事はTypeScript超入門シリーズの第2回目として、TypeScriptの基本的な型についてまとめて解説していきます!

TypeScript 超入門#01 概要説明~環境構築編
TypeScript 超入門#02 基本的な型編
TypeScript 超入門#03 関数編
TypeScript 超入門#04 クラス編
TypeScript 超入門#05 ジェネリクス編
TypeScript 超入門#06 型推論基礎編
TypeScript 超入門#07 型の互換性編
TypeScript 超入門#08 型安全編

ソースコードは以下GitHubを参照してください。

boolean型

boolean型は真偽値を格納するデータ型であり、取りうる値はfalsetrueの二つです。

基本的にはJavaScriptでの変数宣言に[: boolean]と追記するだけで宣言できます。

src/02_basic-types/020_boolean.ts
let isOpen: boolean = false;
console.log(isOpen); //→false

isOpen = true;
console.log(isOpen); //→true

falsetrueの2つ以外のデータを代入するとエラーになります。

src/02_basic-types/020_boolean-number-string.ts
isOpen = 1;
// 型 'number' を型 'boolean' に割り当てることはできません。

isOpen = "Hello world";
// 型 'string' を型 'boolean' に割り当てることはできません。

このように変数(関数も)に型という制約を課すことによって、誤ったデータの代入を防ぐこと(型安全)がTypeScriptの最大のメリットとなります。

number型

number型は浮動小数点値を格納するデータ型です。
以下4つがサポートされています。

  • 2進数
  • 8進数
  • 10進数
  • 16進数
src/02_basic-types/020_boolean-number-string.ts
let counter: number = 0;
console.log(counter); //→0

counter++;
console.log(counter); //→1

counter = 1.5;
console.log(counter); //→1.5

counter = 15;
console.log(counter); //→15

counter = 0x0f; // 16進数
console.log(counter); //→15

counter = 0b1111; // 2進数
console.log(counter); //→15

counter = 0o17; // 8進数
console.log(counter); //→15

数値(number型)以外のデータを代入するとエラーになります。

src/02_basic-types/020_boolean-number-string.ts
counter = "Tom";
// 型 'string' を型 'number' に割り当てることはできません。

counter = false;
// 型 'boolean' を型 'number' に割り当てることはできません。

string型

string型は文字列を格納するデータ型です。
JavaScriptと同じように二重引用符(”)、一重引用符(‘)又はバッククォート(`)で囲みます。

src/02_basic-types/020_boolean-number-string.ts
let name: string = "Tom";
console.log(name); //→Tom

name = "Mike";
console.log(name); //→Tom

let message = `Hello My Name is ${name}`;
console.log(message); //→Hello My Name is Mike

文字列(string型)以外のデータを代入するとエラーになります。

src/02_basic-types/020_boolean-number-string.ts
name = 10;
// 型 'number' を型 'string' に割り当てることはできません。

name = false;
// 型 'boolean' を型 'string' に割り当てることはできません。

array型

array型は配列を格納するデータ型です。

src/02_basic-types/021_array-tuple.ts
let counters: number[] = [0, 1, 2, 3, 4];
console.log(counters); //→[0, 1, 2, 3, 4]
console.log(counters[0]); //→0

次のような書き方もできますが、非推奨とされています。

src/02_basic-types/021_array-tuple.ts
let counters2: Array<number> = [0, 1, 2, 3, 4]; // 非推奨
console.log(counters2); //→[0, 1, 2, 3, 4]

二次元配列の場合は次のように書きます。

src/02_basic-types/021_array-tuple.ts
let counters3: number[][] = [
  [0, 1, 2, 3, 4],
  [5, 6, 7, 8, 9],
];
console.log(counters3); //→[ [ 0, 1, 2, 3, 4 ], [ 5, 6, 7, 8, 9 ] ]

型を複数指定したい場合は次のように書きます。
こちらは後に解説する共用型(Union型)を使用しています。

src/02_basic-types/021_array-tuple.ts
let array: (number | boolean | string)[] = [0, false, "Tom"];
console.log(array); //→[ 0, false, 'Tom' ]

tuple型

tuple型は固定数の要素の型がわかっている配列を表現するデータ型です。

src/02_basic-types/021_array-tuple.ts
let profile: [string, number] = ["Tom", 20];
console.log(profile); //→[ 'Tom', 20 ]

次のようにデータを代入するとエラーになります。

src/02_basic-types/021_array-tuple.ts
profile = [2, "Tom"];
// 型 'number' を型 'string' に割り当てることはできません。
// 型 'string' を型 'number' に割り当てることはできません。

any型

any型は型の不明な変数を扱うことができるデータ型です。

  • JavaScriptのコードをTypeScriptに置き換える時
  • APIからデータを取得する時

などにおいてコンパイルを通過させる時には有効ですが、TypeScriptのメリットを享受できません。ですので、最終的にはany型の現れない、型安全なコードを書くようにしましょう。

src/02_basic-types/022_any-unknown.ts
let anyVariable: any = 0;
console.log(anyVariable); //→0

anyVariable = "Tom";
console.log(anyVariable); //→Tom

anyVariable = false;
console.log(anyVariable); //→false

unknown型

unknown型any型と似ていますが、型安全なany型を表したいときに使用します。

数値を返すgetAge]関数の戻り値をany型unknown型で受け取った場合に、その値にさらに10を加算する処理をする場合にunknown型だとエラーになります。

src/02_basic-types/022_any-unknown.ts
const getAge = (): number => 25;
let ageAny: any = getAge();
let ageUnknown: unknown = getAge();
console.log(ageAny + 10); //→OK
console.log(ageUnknown + 10); //→NG
// オブジェクト型は 'unknown' です。

次のようにタイプガードをしてあげれば、実行することができます。

src/02_basic-types/022_any-unknown.ts
if( typeof ageUnknown === "number"){
  console.log(ageUnknown + 10); //→OK
}

void型

void型は型がないことを表し、通常は値を返さない関数の戻り値の型として利用します。

src/02_basic-types/023_void-null-undefined.ts
function logger(message: string): void {
  console.log(message); //→Hello World!
}
logger("Hello World!");

変数にvoid型を使用した場合は、undefinedしか代入できません。

null/undefined型

null型undefined型void型と同じように、単体ではあまり役に立ちません。

src/02_basic-types/023_void-null-undefined.ts
let nullVar: null = null;
console.log(nullVar); //→null

let undefVar: undefined = undefined;
console.log(undefVar); //→undefined

デフォルト設定ではnullundefinedは全ての型のサブタイプであり、全ての型で代入できます。

ただし、—strictNullChecksをtrueに設定すると、nullundefinedvoid型null型undefined型のどちらかのみ代入できます。基本的には strictNullChecksをtrueに設定しておきましょう。

never型

never型は発生しえない値の型を表します。次のようにエラーを投げるだけの関数など、戻り値を得られない時に使用します。

src/02_basic-types/024_never.ts
function error(message: string): never {
  throw new Error(message);
}
error("Error!");

また、switch文のcaseの漏れを未然にチェックするためにも使うこともあります。一つのcase文をコメントアウトすると型 ‘string’ を型 ‘never’ に割り当てることはできません。checkのところがエラーになります。

src/02_basic-types/024_never.ts
const engineer = (enginner: "Frontend" | "Backend" | "Fullstack") => {
  switch (enginner) {
    case "Frontend":
      return `${enginner}エンジニアなのでReactが好きです!`;
    case "Backend":
      return `${enginner}エンジニアなのでGolangが好きです!`;
    case "Fullstack":
      return `${enginner}エンジニアなのでいろいろ好きです!`;
    default: {
      const check: never = enginner;
    }
  }
};
console.log(engineer("Frontend")); // FrontendエンジニアなのでReactが好きです!

object型

object型はJavaScriptのオブジェクトを格納するデータ型です。
また、非プリミティブ型を表す型なので、boolean,number,string,symbol,null,undefinedのいずれでもありません。

次のコードで[object型]を宣言できます。

src/02_basic-types/025_object.ts
let profile1: object = { name: "Tom" };
profile1 = { age: 20 };

もう一つ次のような書き方もできます。

src/02_basic-types/025_object.ts
let profile2: {} = { name: "Tom" };
profile2 = { age: 20 };

しかし、データ型が文字列でも数値でも問題なくコンパイルできてしまうため、型安全とはいえないので、以下のようにオブジェクトの構造を表す型を指定します。

src/02_basic-types/025_object.ts
let profile3: { name: string } = { name: "Tom" };
profile3 = { name: "Mike" }; //→OK
profile3 = { age: 20 }; //→NG
// オブジェクト リテラルは既知のプロパティのみ指定できます。'age' は型 '{ name: string; }' に存在しません。

こうすれば、型の制約が強くなるため、型安全になります。

型エイリアスとinterface

型エイリアスとは型を別名として作ることができます。
次のコードはAge型number型として作成しています。

src/02_basic-types/026_type-alias-interface.ts
type Age = number;
let age: Age = 20;
console.log(age); // 20

複雑な型も作成できます。

src/02_basic-types/026_type-alias-interface.ts
type Profile = {
  name: string;
  age: number;
};
let profile: Profile = {
  name: "Tom",
  age: 20,
};
console.log(profile); // { name: 'Tom', age: 20 }

オブジェクトに対しては次のinterfaceを使う方法もあります。

src/02_basic-types.ts
interface Profile2 {
  name: string;
  age: number;
}

let profile2: Profile2 = {
  name: "Mike",
  age: 20,
};
console.log(profile2);  //{ name: 'Mike', age: 20 }

intersection型(交差型)

intersection型は複数の型を1つに結合します。書き方は & で型エイリアスを連結します。

src/02_basic-types/027_intersection-union.ts
type Profile1 = {
  name: string;
  age: number;
};
type Profile2 = {
  height: number;
  weight: number;
};

type Profile3 = Profile1 & Profile2;

const profile: Profile3 = {
  name: "Tom",
  age: 20,
  height: 1.7,
  weight: 60,
};
console.log(profile); // { name: 'Tom', age: 20, height: 1.7, weight: 60 }

union型(共用体型)

union型は複数の型のうち、1つの型が成立することを表します。書き方は | を用いて、複数の型を連結します。

src/02_basic-types/027_intersection-union.ts
let value1: number = 1; //→OK
value1 = "Tom"; // 型 'string' を型 'number' に割り当てることはできません。

let value2: number | string = 1; //→OK
value2 = "Tom"; //→OK

literal型

文字列literal型数値literal型真偽値literal型があり、それぞれ正確な値を指定できます。

文字列literal型

src/02_basic-types/028_literal.ts
let myName: "Tom";
myName = "Tom"; //→OK
myName = "Mike"; //→NG
// 型 '"Mike"' を型 '"Tom"' に割り当てることはできません。

数値literal型

src/02_basic-types/028_literal.ts
let zero: 0;
zero = 0;
zero = 1; //→NG
// 型 '1' を型 '0' に割り当てることはできません。

真偽値literal型

src/02_basic-types/028_literal.ts
let isTruth: true;
isTruth = true; //→OK
isTruth = false;  //→NG
// 型 'false' を型 'true' に割り当てることはできません。

enum型(列挙型)

数値列挙文字列列挙の2つを使用できます。

数値列挙は次のように記載します。値を記載しない場合は、0からの連番の値がふられます。

src/02_basic-types/029_enum.ts
enum Day1 {
  Sun,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat,
}
console.log(Day1.Sun);  //→0

次のように書くと1からの連番の値がふられます。

src/02_basic-types/029_enum.ts
enum Day2 {
  Sun = 1,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat,
}
console.log(Day2.Sun); //→1

文字列列挙は数値列挙と基本は同じですが、必ず値を指定しなければなりません。

src/02_basic-types/029_enum.ts
enum Day3 {
  Sun = "日曜日",
  Mon = "月曜日",
  Tue = "火曜日",
  Wed = "水曜日",
  Thu = "木曜日",
  Fri = "金曜日",
  Sat = "土曜日",
}
console.log(Day3.Sun);  //→日曜日

まとめ

今回はTypeScriptの基本の型の解説を行いました。

このあたりはあまり難しくないと思うので、理解はしやすいですね!!
実際にコードを書くときに調べながらやれば、簡単に覚えるられると思います。

次回は関数についてまとめていきたいと思います。

最後まで見ていただきありがとうございました!!

TypeScript超入門シリーズの他の記事もご覧いただければうれしいので是非お願いします!!


©2020-2021.のふのふ🀄All Rights Reserved.