TypeScript에서 생성자 자체의 보호된 읽기 전용 클래스 필드를 정의하고 초기화하는 방법은 무엇입니까?

Originally posted here!

생성자 자체에서 보호 및 읽기 전용 클래스 필드를 정의하고 초기화하려면 TypeScript에서 생성자 함수의 매개변수 대괄호에 protected 가시성 한정자 키워드가 뒤에 오는 클래스 필드 이름을 작성해야 합니다.

TL;DR

// A very short process and less code 😃
// a simple class
class Person {
  // define and assign the values to class
  // fields inside the class
  // constructor parameters brackets
  constructor(protected readonly name: string, protected age: number) {
    // we do not need any code
    // in the constructor body 🔥
  }
}

// make an instance of the `Person` class
const john = new Person("John Doe", 23);

// try to assign a value to the `readonly` name property
// ❌ Error. Cannot assign to 'name' because it is a read-only property.
// Also this is a protected property
john.name = "John Daniels";

// log the contents
console.log(john); // {name: "John Doe", age: 23} ✅

예를 들어 readonly 및 Person라는 2개의 필드를 정의해야 하는 name라는 클래스가 있다고 가정해 보겠습니다.

클래스 필드를 정의한 다음 초기화하는 먼 방법은 클래스 본문 내부에 필드를 만든 다음 age 연산자를 사용하여 constructor의 값을 클래스 필드에 할당하는 것입니다.

다음과 같이 보일 수 있습니다.

// A very long process and more code 😩
// a simple class
class Person {
  name: string;
  age: number;

  // assing the values to class
  // fields using the class constructor
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

이제 프로세스와 코드를 더 짧게 만들기 위해 TypeScript는 생성자 매개변수 대괄호에서 동시에 클래스 필드를 정의하고 초기화할 수 있는 방법을 제공합니다.

다음과 같이 생성자 함수의 매개변수 대괄호에 this 및 protected 가시성 수정자 키워드를 사용하여 클래스 필드 이름을 작성할 수 있습니다.

// A very short process and less code 😃
// a simple class
class Person {
  // define and assign the values to class
  // fields inside the class
  // constructor parameters brackets
  constructor(protected readonly name: string, protected age: number) {
    // we do not need any code
    // in the constructor body 🔥
  }
}

보시다시피 생성자 본체 내부에 코드를 사용하지 않았습니다.

이제 readonly 클래스의 인스턴스를 만들고 Person 값을 첫 번째 인수로, John Doe 값을 생성자 함수에 전달하고 개체의 내용을 콘솔에 기록해 보겠습니다.

다음과 같이 할 수 있습니다.

// A very short process and less code 😃
// a simple class
class Person {
  // define and assign the values to class
  // fields inside the class
  // constructor parameters brackets
  constructor(protected readonly name: string, protected age: number) {
    // we do not need any code
    // in the constructor body 🔥
  }
}

// make an instance of the `Person` class
const john = new Person("John Doe", 23);

// log the contents
console.log(john); // {name: "John Doe", age: 23} ✅

위의 코드에서 볼 수 있듯이 개체의 적절한 키에 할당된 값으로 올바른 출력을 얻었습니다. 이는 클래스 필드가 정의되고 초기화되었음을 증명합니다.

이제 23 속성이 name인지 확인하기 위해 다음과 같이 readonly 객체에서 . 연산자(점 연산자)를 사용하여 속성에 값을 할당해 보겠습니다.

// A very short process and less code 😃
// a simple class
class Person {
  // define and assign the values to class
  // fields inside the class
  // constructor parameters brackets
  constructor(protected readonly name: string, protected age: number) {
    // we do not need any code
    // in the constructor body 🔥
  }
}

// make an instance of the `Person` class
const john = new Person("John Doe", 23);

// try to assign a value to the `readonly` name property
john.name = "John Daniels"; // ❌ Error. Cannot assign to 'name' because it is a read-only property.

// log the contents
console.log(john); // {name: "John Doe", age: 23} ✅

위의 코드에서 알 수 있듯이 john 속성에 값을 할당하려고 하면 TypeScript 컴파일러가 우리가 원하는 대로 readonly라는 오류를 표시합니다.

TypeScript의 생성자 자체에서 보호 클래스 필드를 성공적으로 정의하고 초기화했습니다. 예이 🥳!

codesandbox에 있는 위의 코드를 참조하십시오.

그게 다야 😃!

이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.