TypeScript에서 생성자 자체의 공개 읽기 전용 클래스 필드를 정의하고 초기화하는 방법은 무엇입니까?
9846 단어 typescript
생성자 자체에서 공개 및 읽기 전용 클래스 필드를 정의하고 초기화하려면 TypeScript에서 생성자 함수의 매개변수 대괄호에
public
가시성 수정자 키워드가 뒤에 오는 클래스 필드 이름을 작성해야 합니다.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(public readonly name: string, public 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} ✅
예를 들어
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
및 public
가시성 수정자 키워드를 사용하여 클래스 필드 이름을 작성할 수 있습니다.// 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(public readonly name: string, public 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(public readonly name: string, public 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(public readonly name: string, public 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에 있는 위의 코드를 참조하십시오.
그게 다야 😃!
이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.
Reference
이 문제에 관하여(TypeScript에서 생성자 자체의 공개 읽기 전용 클래스 필드를 정의하고 초기화하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/melvin2016/how-to-define-and-initialize-public-readonly-class-fields-in-the-constructor-itself-in-typescript-3k65텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)