TypeScript에서 클래스 생성자를 만드는 방법은 무엇입니까?

Originally posted here!

TypeScript에서 클래스 생성자를 만들려면 class 본문 안에 키워드 constructor를 사용하고 그 뒤에 () 기호(대괄호를 닫고 여는 매개변수)를 사용한 다음 {} 기호를 쓸 수 있습니다.

TL;DR

// a simple class
class Person {
  name: string;
  age: number;

  // constructor for this class and
  // using parameter names that are
  // similar to the class field names
  // and then assigning it to the class fields
  // using the `this` keyword
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// create an instance of the `Person` class
// and pass the values for the `name` and `age` fields
// through the brackets
const john = new Person("John Doe", 23);

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

예를 들어, Person 유형을 갖는 name 및 string 유형을 갖는 age와 같은 일부 필드가 있는 number라는 클래스를 생성해 봅시다.

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

// a simple class
class Person {
  name: string;
  age: number;
}

이제 클래스를 만들었으므로 name 클래스의 인스턴스를 만들 때 클래스의 age 및 Person 필드에 값을 제공해야 합니다. 이를 위해서는 constructor가 필요하며 constructor 키워드를 사용하여 Person 클래스의 인스턴스를 생성할 때 new를 통해 필드에 필요한 값을 전달할 수 있습니다.
constructor는 다음과 같습니다.

// a simple class
class Person {
  name: string;
  age: number;

  // constructor for this class
  constructor() {
    // cool code goes here
  }
}

위의 코드에서 볼 수 있듯이 constructor 클래스에 대해 Person를 생성했지만 클래스의 필드에 값을 어떻게 설정합니까?
constructor 매개변수 괄호를 활용하여 이를 수행할 수 있습니다. 필요한 유형과 함께 매개변수 괄호 안에 매개변수 이름을 쓸 수 있습니다. 이는 함수 매개변수의 사용법과 유사합니다. 매개변수 대괄호에 매개변수를 작성한 후 this 키워드를 통해 매개변수에 액세스하여 클래스 필드에 매개변수 값을 할당합니다.

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

// a simple class
class Person {
  name: string;
  age: number;

  // constructor for this class
  // using parameter names that are
  // similar to the class field names
  // and then assigning it to the class fields
  // using the `this` keyword
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

위 코드에서 this는 우리가 생성한 클래스의 인스턴스에 대한 pointer이며 this.name 및 this.age는 인스턴스 개체 필드를 나타냅니다.

마지막으로 Person 키워드를 사용하여 new 클래스의 인스턴스를 생성하고 John Doe 매개변수에 대해 name 값을, 23 매개변수에 대해 age 값을 대괄호를 통해 전달합니다.

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

// a simple class
class Person {
  name: string;
  age: number;

  // constructor for this class
  // using parameter names that are
  // similar to the class field names
  // and then assigning it to the class fields
  // using the `this` keyword
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// create an instance of the `Person` class
// and pass the values for the `name` and `age` fields
// through the brackets
const john = new Person("John Doe", 23);

이제 john 개체의 내용을 기록하면 이를 출력으로 볼 수 있습니다.

// a simple class
class Person {
  name: string;
  age: number;

  // constructor for this class and
  // using parameter names that are
  // similar to the class field names
  // and then assigning it to the class fields
  // using the `this` keyword
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// create an instance of the `Person` class
// and pass the values for the `name` and `age` fields
// through the brackets
const john = new Person("John Doe", 23);

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

위의 로그는 우리가 제공한 값으로 클래스Person의 인스턴스를 성공적으로 생성했음을 분명히 나타냅니다. 예이 🥳!

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

그게 다야 😃!

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