Field (field)

Để instance có field trong JavaScript, gán giá trị cho property của object đã instance hóa.

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

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

Trong TypeScript, ngoài ra còn cần viết type annotation cho field.

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 sẽ báo lỗi compile khi truy cập field không được viết trong khai báo class.

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'.

Ngay cả khi bỏ qua kiểu khi khai báo field, nếu giá trị được gán trong constructor thì kiểu sẽ được suy luận từ giá trị gán. Trong ví dụ dưới, name có kiểu string vì gán giá trị kiểu string trong constructor.

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

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

Field không khởi tạo và kiểm tra

Khi cả hai compiler option strictNullChecks và strictPropertyInitialization của TypeScript được bật, phần name: string trong ví dụ sau sẽ bị báo lỗi compile. Vì ngay sau khi new Person, name sẽ là 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

Làm nghiêm ngặt check null và undefined

📄️ strictPropertyInitialization

Bắt buộc khởi tạo class property

Để vượt qua kiểm tra ngay cả khi hai compiler option này được bật, cần đặt type annotation cho field name là union type như 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

Khởi tạo field bằng constructor

Có thể gán giá trị cho field bằng constructor. Trong constructor, sử dụng this để truy cập field muốn gán giá trị.

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

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

Cho constructor nhận tham số để có thể chỉ định giá trị field động.

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");