フィールド (field)

JavaScriptでインスタンスにフィールドを持たせるには、インスタンス化したオブジェクトのプロパティに値を代入します。

JavaScript
js
class Person {}
const alice = new Person();
alice.name = "Alice";

JavaScript
js
class Person {}
const alice = new Person();
alice.name = "Alice";

TypeScriptでは、これに加えてフィールドの型注釈を書く必要があります。

TypeScript
ts
class Person {
  name: string;
}
const alice = new Person();
alice.name = "Alice";

TypeScript
ts
class Person {
  name: string;
}
const alice = new Person();
alice.name = "Alice";

TypeScriptは、クラスの宣言に書かれていないフィールドへアクセスした場合、コンパイルエラーになります。

TypeScript
ts
class Person {}
const person = new Person();
console.log(person.age);
Property 'age' does not exist on type 'Person'.2339Property 'age' does not exist on type 'Person'.

TypeScript
ts
class Person {}
const person = new Person();
console.log(person.age);
Property 'age' does not exist on type 'Person'.2339Property 'age' does not exist on type 'Person'.

フィールドは宣言時に型を省略した場合でもコンストラクタで値が代入される場合は、代入する値で型が推論されます。下の例ではコンストラクタでstringの型の値を代入しているためnameはstring型となります。

ts
class Person {
  private name;
 
  constructor(name: string) {
    this.name = name;
  }
}

ts
class Person {
  private name;
 
  constructor(name: string) {
    this.name = name;
  }
}

初期化なしのフィールドとチェック

TypeScriptのコンパイラーオプションでstrictNullChecksとstrictPropertyInitializationの両方が有効になっている場合、次の例のname: stringの部分はコンパイルエラーとして指摘されます。なぜなら、new Personした直後は、nameがundefinedになるためです。

ts
class Person {
  name: string;
Property 'name' has no initializer and is not definitely assigned in the constructor.2564Property 'name' has no initializer and is not definitely assigned in the constructor.
}
const alice = new Person();
console.log(alice.name);
undefined

ts
class Person {
  name: string;
Property 'name' has no initializer and is not definitely assigned in the constructor.2564Property 'name' has no initializer and is not definitely assigned in the constructor.
}
const alice = new Person();
console.log(alice.name);
undefined

📄️ strictNullChecks

null・undefinedのチェックを厳しくする

📄️ strictPropertyInitialization

クラスプロパティの初期化を必須にする

この2つのコンパイラーオプションが有効な場合でもチェックを通るように書くには、nameフィールドの型注釈をstring | undefinedのようなユニオン型にする必要があります。

ts
class Person {
  name: string | undefined;
}
const alice = new Person();
console.log(alice.name);
undefined

ts
class Person {
  name: string | undefined;
}
const alice = new Person();
console.log(alice.name);
undefined

コンストラクタを用いたフィールドの初期化

フィールドへの値代入は、コンストラクタを用いて行えます。コンストラクタの中では、thisを用いて値を代入したいフィールドにアクセスします。

TypeScript
ts
class Person {
  name: string;
 
  constructor() {
    this.name = "Alice";
  }
}

TypeScript
ts
class Person {
  name: string;
 
  constructor() {
    this.name = "Alice";
  }
}

コンストラクタに引数を持たせれば、フィールドの値を動的に指定できるようにもできます。

TypeScript
ts
class Person {
  name: string;
 
  constructor(personName: string) {
    this.name = personName;
  }
}
const alice = new Person("Alice");

TypeScript
ts
class Person {
  name: string;
 
  constructor(personName: string) {
    this.name = personName;
  }
}
const alice = new Person("Alice");