HTML5テクニカルノート

TypeScriptハンドブック 01: 基本となる型

ID: FN2104001
Technique: ECMAScript 2015
Package: TypeScript 4.2

「TypeScriptハンドブック」シリーズは、TypeScript公式サイト「Handbook」の構成に沿って型について解説します。邦訳ではなく、各項目の内容を改めて説明し直しました。本稿は「Everyday Types」のページから以下の項目をとりあげます(かっこ内は原文の項目タイトル)。もとのページは長くて、読み終える前に力尽きそうです。そこで、このシリーズではページを分けることにしました。

01 プリミティブー stringとnumberおよびboolean

MDN「Primitive(プリミティブ)」は、つぎのように説明します。

JavaScriptにおいて、プリミティブ(primitive、プリミティブ値、プリミティブデータ型)はオブジェクトでなく、メソッドを持たないデータのことです。

その中でも、よく使われる3つのプリミティブ値の型を、TypeScriptはつぎのように定めます。型の名前は、JavaScriptコードのtypeof演算子で値を調べたときの戻り値と同じです。

string: 文字列の値を示す型です。
number: 四則演算のできる数値を型づけます(NaNはnumber型ではあるものの、数値演算の対象に含めると、結果はつねにNaNです)。JavaScriptでは、整数と浮動小数点数は区別されず、ともにnumber型になります。
boolean: trueかfalseか、二値のいずれかを示す論理値です。


const name: string = "Alice";
const age: number = 7;
const isMale: boolean = false;

02 配列(Array)

配列には要素の型が決められます。つぎの構文が、その場合の定めです。


要素の型[]

たとえば、数値や文字列を要素とする配列は、つぎのように型づけします。


const indices: number[] = [0, 1, 2];
const numberString: string[] = ['one', 'two', 'three'];
// エラー: 'number' を型 'string' に割り当てることはできません。
// const numberString: string[] = ['one', 'two', 3];

同じ配列の型をジェネリック(T<U>)で与えたのが、つぎのコード例です。ジェネリックについて詳しくは、「Generics」をご参照ください。


const indices: Array<number> = [0, 1, 2];
const numberString: Array<string> = ['one', 'two', 'three'];

ノート01■タプル型

配列の角かっこ[]の中に要素それぞれのデータ型を定めるのは、タプルという別の型の構文です。詳しくは、「Tuple destructuring」をお読みください。


const person: [string, number, boolean] = ['Alice', 7, false];
// エラー: 型 'number' を型 'string' に割り当てることはできません。
// 　　　  型 'string' を型 'number' に割り当てることはできません。
// const person: [string, number, boolean] = [7, 'Alice', false];

03 any

anyはTypeScritpが値の型について発するエラーを鎮める特別な型です。データ型どころか、プロパティやメソッドの存在さえ問いません。JavaScriptの構文が間違っていないかぎり、参照や代入も自由です。言い換えれば、その値についてはTypeScriptが働かなくなります。つぎのコードがその例です。本来示されるエラーが出ることはなく、素のJavaScriptコードと同じように実行されます。


let point: any = { x: 0, y: 0 };
// 本来: プロパティ 'getAngle' は型 '{ x: number; y: number; }' に存在しません。
point.getAngle();
// 本来: この式は呼び出し可能ではありません。
// 　　  型 '{ x: number; y: number; }' には呼び出しシグネチャがありません。
point();
// 本来: プロパティ 'z' は型 '{ x: number; y: number; }' に存在しません。
point.z = 100;
// 本来: 型 'string' を型 '{ x: number; y: number; }' に割り当てることはできません。
point = "hello";
// 本来: 型 '{ x: number; y: number; }' を型 'number' に割り当てることはできません。
const n: number = point;

ちょっと試してみるコードに、TypeScriptの長々とした型定義を省きたいといった場合などに使えるでしょう。実際に使うことが決まってから、きちんとした型づけをすれば済みます。

暗黙的なanyへの推論

型を定めず、TypeScriptも文脈から推論できなかったとき、デフォルトではanyとして扱われます。けれど、anyと推論された値には、TypeScriptの型チェックが働きません。anyへの暗黙的な推論を避けるには、noImplicitAnyのフラグを定めてください。推論される型がanyとなるとき、エラーを示します。

作成者: 野中文雄
作成日: 2021年04月11日