1. 생성자 (Constructor)
class Employee {
fullName: string;
jobTitle: string;
constructor(fullName: string, jobTitle: string) {
this.fullName = fullName;
this.jobTitle = jobTitle;
}
printEmployeeDetails = (): void => {
console.log(`${this.fullName}의 직업은 ${this.jobTitle}`);
};
}
let employee1 = new Employee('민수', '프론트엔드 개발자');
employee1.printEmployeeDetails(); // 민수의 직업은 프론트엔드 개발자- 생성자를 사용하면 코드를 명확하고 가독성 있게 쓸 수 있음
- 모든 클래스는 생성자를 가짐
- 생성자 메소드는 클래스로부터 객체를 생성할 때 호출되는 함수
- 객체의 초기화를 담당
- 생성자 메소드는 매개변수를 가질 수 있음
- 전달된 매개변수를 객체 생성 시에 멤버 변수인 프로퍼티의 값으로 초기화할 수 있음
- this 뒤는 클래스의 멤버 변수, = 뒤는 전달된 매개변수(parameter)를 나타냄
- 클래스를 통해서 객체를 생성할 때, 생성자에 정의된 매개변수의 값이 전달인자로 전달되어야 함
- 생성자는 전달되는 매개변수를 강제함, 옵셔널 매개변수로도 만들 수도 있음
- 선택적 매개변수들은 반드시 필수 매개변수 뒤에 위치
2. 접근 제한자 (Access Modifiers)
class Employee {
fullName: string;
jobTitle: string;
constructor(fullName: string, jobTitle: string) {
this.fullName = fullName;
this.jobTitle = jobTitle;
}
printEmployeeDetails = (): void => {
console.log(`${this.fullName}의 직업은 ${this.jobTitle}`);
};
}
let employee1 = new Employee('민수', '프론트엔드 개발자');
employee1.fullName = '헨리';
employee1.printEmployeeDetails(); // 헨리의 직업은 프론트엔드 개발자class Employee {
private fullName: string;
jobTitle: string;
constructor(fullName: string, jobTitle: string) {
this.fullName = fullName;
this.jobTitle = jobTitle;
}
printEmployeeDetails = (): void => {
console.log(`${this.fullName}의 직업은 ${this.jobTitle}`);
};
}
let employee1 = new Employee('민수', '프론트엔드 개발자');
employee1.fullName = '헨리'; // 에러 발생
console.log(employee1.fullName); // 에러 발생- 생성자를 통해 할당된 초기값을 다른 value로 쉽게 바꿀 수 있음
- 프로그램을 만들 때 외부로부터 데이터를 보호하기 위해서 객체의 프로퍼티로 접근하여 객체의 값을 바꾸는 경우를 제한하고 싶을 때
- 접근 제한자는 클래스 속 멤버 변수(프로퍼티)와 메소드에 적용될 수 있는 키워드
- 클래스 외부로 부터의 접근을 통제하므로 버그를 줄이고, 코드의 안전성 향상시킬 수 있는 장점 있음
- 타입스크립트의 접근 제한자 종류 : Public, Private, Protected, Public과 Private가 흔하게 쓰임
- Public : 클래스의 외부에서 접근 가능함, 자식 클래스와 클래스 인스턴스 모두 접근 가능
- Private : 클래스의 내에서만 접근 가능, 클래스 외부에서 접근 불가능 (비공개 멤버)
- Protected : 클래스 내부, 그리고 상속받은 자식 클래스에서 접근 가능
- 타입스크립트에서 기본적으로 클래스 내의 각 멤버들은 Public, 코드에서 아무런 접근 제한자가 명시되어 있지 않으면 Public
- Public 멤버를 노출시키기 위해서 Public 키워드를 명시할 필요 없음
- Private 클래스 외부에서 읽을 수 조차 없음
class Car {
private name: string = 'car';
color: string;
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
console.log(this.name); // 접근 가능
}
}
class Bmw extends Car {
constructor(color: string) {
super(color);
}
showName() {
console.log(super.name); // 에러 발생
}
}class Car {
#name: string = 'car';
color: string;
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
console.log(this.#name); // 접근 가능
}
}
class Bmw extends Car {
constructor(color: string) {
super(color);
}
showName() {
console.log(super.#name); // 에러 발생
}
}- Private 키워드는 #변수명으로도 작성 가능
- 사용할 때 모두 #을 붙여야하고, 기능상 차이는 없음
3. Getter 와 Setter
class Employee {
private _fullName: string;
jobTitle: string;
constructor(fullName: string, jobTitle: string) {
this._fullName = fullName;
this.jobTitle = jobTitle;
}
get fullName() {
return this._fullName;
}
set fullName(value: string) {
this._fullName = value;
}
printEmployeeDetails = (): void => {
console.log(`${this._fullName}의 직업은 ${this.jobTitle}`);
};
}
let employee1 = new Employee('민수', '프론트엔드 개발자');
employee1.fullName = '헨리';
console.log(employee1.fullName); // 헨리
employee1.printEmployeeDetails(); // 헨리의 직업은 프론트엔드 개발자- 비공개로 설정된 객체의 멤버 변수에 접근하여 값을 읽거나 쓰기 위함
- Get과 Set 키워드를 사용하여 Getter와 Setter를 선언
- Private 멤버의 프로퍼티 앞에 _(underscrore)를 넣어서 비공개 멤버임을 나타냄
- getter : 키워드 get 뒤에 프로퍼티의 이름, 괄호와 중괄호, 중괄호 속은 실행될 코드 작성
- setter : 키워드 set 뒤에 프로프티의 이름, 괄호 안에는 전달될 매개변수와 타입, 중괄호 안에는 전달될 매개변수의 값을 비공개 매개변수의 값으로 재할당하는 코드 작성
- get과 set 뒤에 나타나는 코드는 함수, 메소드의 형태이지만 일반적인 클래스 내의 메소드와 다른 점은 상태를 나타낸 Public 멤버 변수들과 같은 방법으로 클래스 외부에서 getter와 setter에 접근 가능
- 객체의 getter나 setter에 접근하기 위해서는 public 멤버 변수를 부를 때 처럼 괄호 없이 getter나 setter의 이름을 바로 부를 수 있음
4. Constructor와 Access Modifiers
class Employee {
constructor(private _fullName: string, public jobTitle: string) {}
get fullName() {
return this._fullName;
}
set fullName(value: string) {
this._fullName = value;
}
printEmployeeDetails = (): void => {
console.log(`${this._fullName}의 직업은 ${this.jobTitle}`);
};
}- 생성자의 매개변수에 접근 제한자 직접 적용 가능
- 생성자 메소드의 매개변수 앞에 접근 제한자를 붙여줌
- 생성자 매개변수 앞에 접근 제한자를 붙여주면 접근 제한자가 사용된 생성자의 매개변수는 암묵적으로 클래스의 필드, 멤버 변수로 선언됨
- 객체가 생성될 때, 생성자의 매개변수로 전달된 값은 객체의 프로퍼티 값으로 자동으로 그 값이 초기화되고 할당됨
FrontEnd Developer