[TypeScript] : CLASS

이번 타입스크립트의 CLASS에서는 큼지막한 특징들만 다루면서 자바스크립트와의 차이점은 어떤 것들이 있는지 알아볼 것입니다.

여기서는 자바스크립트에서 한 번쯤은 다루었던 CLASS 내용은 다루지 않을 예정이니 참고 부탁 드립니다.

✍ Access Modifier

Access Modifier는 자바스크립트에는 간편하게 없는 기능 중 하나 이기에 다음에 예제를 보면서 파악해보자.

//JavaScript
class Developer {
	constructor(firstName,field,age){
			this.firstName = firstName;
			this.field = field;
			this.age = age;
	}
}
//TypeScript
class Developer {
	constructor(
			private firstName : string,
			public field : string,
			protected age : number,
	){}
}

우선 위 코드들을 간단하게 설명하자면 클래스를 JavaScript에서 생성했을 때와 TypeScript에서 생성했을 때를 표기한 것이다.

필자도 자바스크립트에서 클래스를 정의 할 당시, this를 쓰면서 property를 중복으로 써준다는 느낌이 별로였는데 타입스크립트에서는 불필요한 중복 입력도 할 필요가 없고 타입스크립트의 주 특징인 타입도 지정해 줄 수 있을 뿐만 아니라 Access Modifier도 지정해 줄 수 있어서 타입스크립트에서 찾아 볼 수 있는 어메이징한 기능 중 하나 이다.

Access Modifier란 쉽게 말해 클래스 정의시 각 property에 접근 권한을 수정하는 것으로 크게 private, protected, public이 있다.

📝 Access Modifier의 종류

• PRIVATE : 오직 클래스 내부에서만 접근이 가능하기에, 인스턴스와 그 외부에서 접근이 불가능하다.
  • 자바스크립트 내에서도 #을 붙이는 것으로 표현이 가능하지만 사용 할 때마다 붙여줘야 하므로 불편하다.
• PROTECTED : 프라이빗 보다 낮은 등급으로 인스터스 내부 까지에서는 접근이 가능하다.
• PUBLIC : 위치에 상관 없이 접근이 가능하다.

다음 코드를 보면서 주석에 간단하게 설명을 달아보겠다.

class Developer {
	constructor(
			private firstName : string,
			public field : string,
			protected age : number,
	){}
}

const sean = new Developer('Sean','Backend',31);
console.log(sean.firstName) // 접근 불가능
console.log(sean.field) // Backend 출력
console.log(sean.age)// 접근 불가능

✍ Abstract Class (추상 클래스) or Abstract Method (추상 메서드)

타입스크립트 내에서도 역시 자바스크립트와 동일하게 클래스를 상속할 수 있는 확장 커맨드인 extends가 존재하는데 이 때 상속을 주는, 상위 레벨의 클래스를 정의 할 때 Abstrat을 활용 할 수 있다.

다음 코드를 보면서 추가 설명을 해보겠다.

abstract class User{
    constructor(
        private firstName:string,
        protected lastName:string,
        public nickName:string,
    ){} 

    abstract getNickName():void

    getFullName(){
        return `${this.firstName} ${this.lastName}`
    }
}

class Student extends User {
    getNickName(): void {
        console.log(this.nickName); //실행
        console.log(this.firstName); //실행 불가
        console.log(this.lastName); //실행
    }
}

여기서 보면 Student라는 클래스는 User라는 클래스를 상속하고 있기에 생성자를 그대로 이어받는데, 역시 상위 레벨의 클래스가 가지고 Access Modifier의 성격도 그대로 가지고 있다.

추상 클래스 생성 시 알아두어야 할 점은 다음과 같다.

• 추상 클래스는 그 자체 만으로 쓰여질 수 없다. 참고 및 상속 용 클래스라고 보면 된다.
• abstract이 붙은 클래스 내 메서드는 상속되는 클래스에서 반드시 정의를 해줘야 한다.

위 2가지만 알아두어도 타입스크립트 내에서 클래스 구현은 충분히 할 수 있다!! 이제 마음껏 타입스크립트를 즐겨보자!