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

Originally posted here!

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

TL; DR

// a simple class
class Person {
  // define and assign the values to class
  // fields inside the class
  // constructor parameters brackets
  constructor(protected 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} ✅

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

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

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

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

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

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

다음과 같이 생성자 함수의 매개변수 대괄호에 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 name: string, protected age: number) {
    // we do not need any code
    // in the constructor body 🔥
  }
}

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

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

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

// 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 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} ✅

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

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

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

그게 다야 😃!

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