TypeScript オブジェクト型

概要: このチュートリアルでは、TypeScript の object 型と、より正確な object 型宣言の記述方法について学習します。

TypeScript オブジェクト型の概要

TypeScript の object 型は、プリミティブ型ではないすべての値を表します。

TypeScript のプリミティブ型は以下のとおりです。

オブジェクトを保持する変数を宣言する方法を以下に示します。

let employee: object;

employee = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    jobTitle: 'Web Developer'
};

console.log(employee);Code language: TypeScript (typescript)

出力

{
  firstName: 'John',       
  lastName: 'Doe',
  age: 25,
  jobTitle: 'Web Developer'
}Code language: TypeScript (typescript)

プリミティブ値を employee オブジェクトに再代入すると、エラーが発生します。

employee = "Jane";Code language: TypeScript (typescript)

エラー

error TS2322: Type '"Jane"' is not assignable to type 'object'.Code language: JavaScript (javascript)

employee オブジェクトは、固定されたプロパティリストを持つ object 型です。 employee オブジェクトに存在しないプロパティにアクセスしようとすると、エラーが発生します。

console.log(employee.hireDate);Code language: CSS (css)

エラー

error TS2339: Property 'hireDate' does not exist on type 'object'.Code language: JavaScript (javascript)

上記のステートメントは JavaScript では正常に動作し、代わりに undefined を返すことに注意してください。

employee オブジェクトのプロパティを明示的に指定するには、まず以下の構文を使用して employee オブジェクトを宣言します。

let employee: {
    firstName: string;
    lastName: string;
    age: number;
    jobTitle: string;
};Code language: TypeScript (typescript)

次に、記述されたプロパティを持つリテラルオブジェクトに employee オブジェクトを代入します。

employee = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    jobTitle: 'Web Developer'
};Code language: TypeScript (typescript)

または、同じステートメントで両方の構文を次のように組み合わせることができます。

let employee: {
    firstName: string;
    lastName: string;
    age: number;
    jobTitle: string;
} = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    jobTitle: 'Web Developer'
};Code language: TypeScript (typescript)

object vs. Object

TypeScript には、大文字の O を持つ Object という別の型があります。これらの違いを理解することが重要です。

object 型はすべての非プリミティブ値を表しますが、Object 型はすべてのオブジェクトの機能を記述します。

たとえば、Object 型には、どのオブジェクトからもアクセスできる toString() メソッドと valueOf() メソッドがあります。

空の型 {}

TypeScript には、{} で表される空の型と呼ばれる別の型があり、これはオブジェクト型と非常によく似ています。

空の型 {} は、それ自体にプロパティを持たないオブジェクトを記述します。このようなオブジェクトのプロパティにアクセスしようとすると、TypeScript はコンパイル時エラーを発行します。

let vacant: {};
vacant.firstName = 'John';Code language: TypeScript (typescript)

エラー

error TS2339: Property 'firstName' does not exist on type '{}'.Code language: JavaScript (javascript)

ただし、プロトタイプチェーンを介してオブジェクトで使用可能な Object 型で宣言されているすべてのプロパティとメソッドにアクセスできます。

let vacant: {} = {};
console.log(vacant.toString());Code language: TypeScript (typescript)

出力

[object Object]Code language: JSON / JSON with Comments (json)

まとめ

TypeScript の object 型は、プリミティブ値ではない任意の値を表します。
ただし、Object 型は、すべてのオブジェクトで使用可能な機能を記述します。
空の型 {} は、それ自体にプロパティを持たないオブジェクトを指します。

このチュートリアルは役に立ちましたか？