TypeScript入門 – 基本の型を学ぶ

TypeScriptの基本の型を学ぼう

TypeScriptはJavaScriptに対して主に静的型付けとクラスベースのオブジェクト指向を加えることを特徴としたプログラミング言語です。

公式ドキュメントにはハンドブックとして、基本的な使い方が掲載されています。ハンドブックを元に学んでいきます。

• Basic Types · TypeScript

今回は基本の型を見ていきましょう。

コンパイルしながら試す

以下では型の使い方の説明を書いていますが、都度 TypeScript ファイルにコーディングし、コンパイル・実行しながら試してみると良いでしょう。

以前投稿した記事を参考に tsc コマンドを実行できる状態にします。

まずは5分で学ぶ！TypeScriptことはじめ

適当なフォルダに main.ts を作成し、このファイル内に試したい内容を記述していきます。

let message: string = 'Hello';
console.log(message);

あとは都度コンパイルして実行すると、結果が確認できます。

$ tsc main.ts
$ node main.js
Hello

または、公式でプレイグラウンド（Webアプリ）が提供されているので、ローカルでの構築が面倒な場合はこちらを使いましょう。

• Playground · TypeScript

基本の型

Boolean

ブール型です。 true または false のいずれかをセットできます。

// ブール値
let isDone: boolean = false;

Number

数値型です。JavaScriptと同様、TypeScriptの数値は全て浮動小数点値となります。

// 浮動小数点数
let decimal: number = 6;
// 16進数
let hex: number = 0xf00d;
// 2進数
let binary: number = 0b1010;
// 8進数
let octal: number = 0o744;

String

文字列です。文字列はシングルクオート ' またはダブルクオート " で囲います。また、バッククオート ``` と構文式 ${ exp } を組み合わせることで文字列に変数値などを埋め込むことができます。

// 文字列（ダブルクオート）
let blue: string = "blue";
// 文字列（シングルクオート）
let red = 'red';

// 埋め込み式
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.

I'll be ${ age + 1 } years old next month.`;

この埋め込み式は以下に変換されます。

Hello, my name is Bob Bobbington.
I'll be 18 years old next month.

Array

配列型です。[] で囲い、カンマ区切りで要素を入れます。要素に入る型を指定する場合は number[] または Array<number> のように記述します。

// 配列
let listA: number[] = [1, 2, 3];
let listB: Array<number> = [1, 2, 3];

Tuple

タプル型です。タプルは、要素数、および要素の型を予め決めてある配列です。例えば [number, string] と定義した場合、0番目に number、1番目に string の値のみ入れることができます。

// タプル（OK）
let ok: [string, number] = ["hello", 10];
// タプル（NG）
let ng: [string, number] = [10, "hello"];

Enum

列挙型です。enum で始め、{} にカンマ区切りで値を定義します。以降は型として使うことができます。

// 列挙型の定義
enum Color {Red, Green, Blue}
// 列挙型
let color: Color = Color.Green;

なお、列挙型定義時に値を代入することができます。未定義の場合は0番目が 0 となり、以降インクリメントされていきます。0番目だけ明示的に指定することもできます。

// 全指定
enum ColorA {Red = '#ff0000', Green = '#00ff00', Blue = '#0000ff'}
// 未指定の場合は0番目は0が指定される
enum ColorB {Red, Green, Blue}
// 0番目だけを指定
enum ColorC {Red = 1, Green, Blue}

Any

Any型です。代入される値によって、型が動的に変わります。

// 始めは数値
let notSure: any = 4;
// 文字列を代入可能
notSure = "maybe a string instead";
// ブール値を代入可能
notSure = false;

any では、代入されている現在の値の型に存在していなくても、メソッドの呼び出しを行なってもコンパイルエラーにはなりません。一方で Object を使った場合はコンパイルエラーになります。

let notSure: any = 4;
// コンパイラはチェックしなため通る
notSure.hoge();

let prettySure: Object = 4;
// コンパイルエラー
prettySure.hoge();

Void

Void型です。any とは反対に、値が何もないことを表現したいときに使います。主に関数において、戻り値に値を返さない場合に指定します。

// 戻り値のない関数
function warnUser(): void {
    console.log("This is my warning message");
}
// null または undefined のみ代入可能
let unusable: void = undefined;

Null と Undefined

JavaScriptでは値が無い、または定義がない表現として null と undefined がありますが、TypeScriptではそのまま null と undefined のそれぞれの型が用意されています。null と undefined は全ての型のサブタイプとなっているため、例えば number 型の変数に null をセットすることができます。

// それぞれの型が用意されている
let u: undefined = undefined;
let n: null = null;
// 他の型に代入できる
let no: number = null;

Never

Never型は 決して発生しない値 を表現します。あまり聞きなれませんが、例えば呼び出すと必ず例外が発生するような関数の戻り値などに利用します。

// 必ず例外が発生する場合、戻り値は返さない = 決して発生しない
function error(message: string): never {
    throw new Error(message);
}

また、Never型は全ての型のサブタイプですが、Never型に値を代入することはできません。

Object

Object型は、プリミティブ型ではないことを表現する型です。例えば以下のように、プリミティブ型の値を引数にできない関数などを表現できます。

function create(o: object | null): void {
  console.log(`created: ${o}`);
};

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error (--strictNullChecks オプションが有効な場合のみ)

型アサーション

値の型は、任意の型に変換することができます。これを型アサーションと言います。

具体的には、例えば文字列が既に代入されているAnyという抽象的な型を、より具体的なString型として扱いたい場合などに使います。

以下の例では any に指定された someValue が定義されていますが、代入されている文字列の文字数を取得するために string に変換して length を呼び出しています。

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

型アサーションは2種類の書き方があります。

• 書き方その1 : <変換したい型>値
• 書き方その2 : 値 as 変換したい型

JSXが利用できる環境では <変換したい型>値 のような書き方は使うことができない（JSXの記法と競合する）ため as を使った書き方で行います。

let についての注意点

従来のJavaScriptでは、変数宣言は var でしか行えませんでしたが、最近は let や const が使えるようになったため、こちらを利用することが推奨されています。var let const の違いについては以下の記事を参考にしてください。

• JavaScript var/let/constによる変数宣言 - Qiita

まとめ

基本的な型を見ていきました。使い方は非常に簡単なので、コーディングしていくうちに自然に身に付くことでしょう。

参考

本記事の執筆にあたり、以下の記事を参考にしました。

• Basic Types · TypeScript
• Type Assertion - TypeScript Deep Dive 日本語版
• TypeScript入門者がハマりがちな記法(文法)の呼び方と簡易解説まとめ - Qiita