【TypeScript】型一覧と型強制

型とは？

TypeScriptをは、JavaScriptに型をつけてより安全にコードを書くことができる言語です。

安全なコードを書くためには、型がポイントの１つになってきます。

型というのは、変数宣言をするときにその変数にどんな値を代入できるかを指定するものになります。

その指定のことを型注釈(type annotation、型アノテーション)と言います。

TypeScriptでは、変数宣言の型注釈は以下のように変数名の右に型を書きます。

const num: number = 1;

TypeScriptでは型を記載するのは必須ではありません。C言語やJavaのように型を必ず指定し、コンパイル時に変数の型がわかるように実装する言語のことを静的型付け言語と言います。
一方、JavaScriptやPythonのように型を必要としない言語を動的型付け言語と言います。

TypeScriptの変数について知りたい方は以下をご覧ください。

Tomokiの技術ブログ

Tomokiの技術ブログ | 【TypeScript】変数 この記事ではTypeScriptにおける変数宣言の方法を解説します。TypeScriptでの変数の使用方法がわかります。TypeScriptでの変数の使用方法ががわからない、理解してみたい人…

型の分類

TypeScriptの型は大きく分けて以下の2つに分けられます。

• プリミティブ
• オブジェクト

TypeScriptのプリミティブの特徴として挙げられるのが値を変更できない点です。

このように値を変更できない特性をイミュータブル(immutable)と言います。

一方、オブジェクトは値を後で変更できるため、ミュータブル(mutable)の特定を持っています。

プリミティブの種類

TypeScriptのプリミティブは次の7つがあります。

• 論理型
• 数値型
• 文字列型
• undefined型
• null型
• シンボル型
• bigint型

論理型(boolean)

論理型(boolean)とはtrueとfalseの論理値からなる型です。

const isOK: boolean = true;
const isAnimal: boolean = false;

数値型(number)

数値型(number)とは1や-1などの整数と0.1などの小数を含めた数値の型です。

言語によっては少数はfloatやdoubleという型で表すものもありますが、TypeScriptではそれらを含めてnumberになっています。

また、整数をさらに32ビットと64ビットに細分化する言語もありますが、TypeScriptでは区別しません。

const age: number = 24;
const point: number = -10;
const average: number = 80.4;

可読性が下がるためおすすめはしませんが、小数は以下のように書くことができます。

console.log(0.1 === .1)
// true

console.log(2.0 === 2.)
// true

2進数、8進数、16進数

プログラミングでは10進数以外にも2進数、8進数、16進数を扱う時が出てきます。
その際は数値の接頭辞に以下をつけます。

• 2進数
  • 0b
• 8進数
  • 0o
• 16進数
  • 0x

const num0b: number = 0b0101;
console.log(num0b)
// 5

const num0o: number = 0o755;
console.log(num0o)
// 493

const num0x: number = 0xff;
console.log(num0x)
// 255

数値の区切り文字

数値リテラルは可読性のためにアンダースコアで区切って書くことができます。

何桁ごとに区切るかは自由です。

const yen: number = 100_000_000;

ただし、アンダースコアを先頭や末尾、小数点の前後、連続で2個以上で記載することはできません。

つまり、以下のような記載方法はできません。

_100
100_
100_.0
100._0
1__00

数値のtoString()

一般的にtoString()で変数の文字列リテラルを返すことができます。

数値のtoString()を使用する場合は、小数点の.とプロパティアクセッサーの.が区別できないため、以下のように記載します。

1..toString();
(1).toString();

1.toString();
// An identifier or keyword cannot immediately follow a numeric literal.

数値の範囲

数値型は、IEEE 754の倍精度浮動小数です。

64ビットのうち、52ビットが数値の格納に、11ビットが小数の位置に、1ビットが正負符号に使われます。

正確に扱える数値は-(2^53 − 1)から2^53 − 1の間です。

整数について言うと、他言語の64ビット整数型の範囲より狭いです。

特殊な数値

TypeScriptの数値型には、NaNとInfinityという特殊な値があります。

NaN

NaNは非数(not-a-number)を表す変数です。

処理の結果によって数値にならない場合にNaNを返すことがあります。

たとえば、文字列を数値に変換するparseInt関数は、数値化できない入力に対し、NaNを返します。

const price = parseInt("百円");
console.log(price);
// NaN

値がNaNであるかどうかはNumber.isNaNを用います。

const price = parseInt("百円");
const isValid = Number.isNaN(price)
console.log(isValid);
// true

NaNは等号比較では常にfalseになります。

console.log(NaN == NaN);
// false
console.log(NaN === NaN);
// false

Infinity

Infinityは無限大を表す変数です。

たとえば、1を0で割った場合、この値になります。

console.log(1 / 0);
// Infinity

文字列型(string)

文字列型とは言葉のとおり文字列を表す型です。

TypeScriptでは、ダブルクォート(“)、シングルクォート(‘)、バッククォート(`)で文字列を囲むことで文字列型となります。

const str1: string = "Hello";
const str2: string = 'Hello';
const str3: string = `Hello`;

文字列中に同じ引用符が含まれている場合は、バックスラッシュ(\)でエスケープする必要があります。

const message1 = "'He said hello, I\'m Mike.'";
console.log(message1);
// 'He said hello, I'm Mike.'

const message2 = "\"He said \"hello\", I'm Mike.\"";
console.log(message2)
// "He said "hello", I'm Mike."

テンプレートリテラル

バッククォート(`)で囲んだ文字列はテンプレートリテラルと言います。

テンプレートリテラルは、文字列の中に改行や変数、式を埋め込むことができます。

これはかなり便利なのでどんどん使っていきましょう。

console.log(`改行を
します`);
// 改行を
// します

const age: nubmer = 25;
console.log(`私の年齢は${age}です。`);
// 私の年齢は25です。

const message: string = `合計金額は${Math.floor(100 * 1.1)}円です。`
console.log(message);
// 合計金額は110円です。

文字列リテラルは「‘」、「“」、「`」のどれを使うべきか？

これは正解もなければデファクトスタンダードというわけでもないので、開発チームの方針に従うべきです。

個人的には以下のように使い分けています。

null型

nullは値がないことを示す値です。

const value: null = null;

typeof演算子の注意点

値の型を調べるtypeof演算子がありますが、nullに対してtypeofを用いるとobjectが返ります。

console.log(typeof null);
// object

undefined型

undefinedは未定義を表す値です。

const value: undefined = undefined;

主に以下の場合にundefinedが返ってきます。

• 変数に値がセットされていない。
• 戻り値が無い関数を呼び出して変数に格納した。
• オブジェクトに存在しないプロパティにアクセスした。
• 配列に存在しないインデックスでアクセスした。

let name: string;
console.log(name);
// undefined

function calc() {
    const num: number = 1;
}
console.log(func());
// undefined

const dict = {};
console.log(dict.name);
// undefined

const array = [];
console.log(array[1]);
// undefined

戻り値のない関数はundefinedになりますが、TypeScriptで戻り値なしを型注釈で表現する場合、undefinedではなくvoidを使用します。

undefinedとnullの違いについては私が執筆しております以下の記事をご参照ください。

Tomokiの技術ブログ

Tomokiの技術ブログ | 【JavaScript】nullとundefinedの違い この記事ではJavaScriptのコレクション関数をまとめています。nullとundfinedの違いを知るだけでも技術の差が広がると思います。nullとundfinedの違いが知らない方は是非ご…

シンボル型

シンボル型は、その値が一意になる値です。

論理型や数値型は値が同じであれば、等価比較がtrueになります。

一方、シンボルはシンボル名が同じであっても、初期化した変数が異なるとfalseになります。

const symbol1: symbol = Symbol("hello");
const symbol2: symbol = Symbol("hello");
console.log(symbol1 === symbol2);
// true

console.log(symbol1 === symbol2);
// false

個人的な意見ですが基本的に使用しません。

bigint型

bigint型は、数値型よりも大きな整数を扱える型です。

bigint型は整数値の末尾にnをつけて書きます。

const value: bigint = 100n;

別の方法としてbigint型はBigInt関数を使って作ることができます。

BigInt関数は第1引数に数値、もしくは文字列を渡します。

const age = BigInt(25);
const id = BigInt("1234567890");

bigint型を数値型と計算するには、そのまま演算をすることはできません。

どちらかに型を合わせる必要がありますが、基本的に幅の広いbigint型に合わせる方が良いとされています。

const value = 1n + BigInt(2); //=> 5n
console.log(value);
// 3

型強制

型の異なる2つの値に対し演算してもエラーにならない場合があります。

たとえば、文字列型の”1″から数値型の1を減算した場合、数値型の0が計算結果として出てきます。

const num = "1" - 1; 
console.log(num)
// 0

これは型強制と呼ばれる仕組みがあるためです。

型強制とは、型が異なる2つの値を処理するとき、暗黙的に別の型へ変換されることです。

上記の例では、文字列型の”1″が数値型の1に型強制された上で、1が引かれたため結果として0になるわけです。

どんな型に型強制されるかは演算子によって異なります。

たとえば、文字列型の”1″に数値型の1を加算する場合は、結果として文字列型の”11″になります。

これは、数値型の1が文字列型の”1″に型強制された上で、”1″ + “1”の文字列結合になるためです。

const num = "1" + 1; 
console.log(num)
// 11

演算をする際は基本的に型を合わせましょう。

まとめ

本記事では、TypeScriptにおける型一覧、および型強制について説明しました。

安全なコードを書くために型を理解するようにしましょう。

是非、いいねやコメントをお願いします。