티스토리 뷰

반응형

이전 글에서는 기본적인 객체는 인터페이스로 만든다고 하였습니다.

하지만 기존의 class는 없을까요?

그렇지 않습니다. TypeScript는 클래스 또한 존재합니다.

기존에 생성되었던 인터페이스 대신에 클래스로 변환을 해보려고 합니다.

 

class Abbo {
    public group: string;
    public nowYear: number;
    public groupMessage: string;
    constructor(group: string, nowYear: number, groupMessage: string) {
        this.group = group; this.nowYear = nowYear; this.groupMessage = groupMessage;
    }
}

위의 소스를 보시다시피 어디서 접근이 가능한 것인지 접근 제어자를 설정할 수 있고, 

생성자를 지정해서 만들 수 있습니다.

 

 

또 객체를 아래와 같이 생성해서 입력하는 것도 가능하겠죠.

const niyoung2 = new Abbo("ABBO", 2020, "Happy new Year!!");
console.log(helloWorld(niyoung2))

 

하지만 이 소스는 약간의 문제가 있습니다.

group은 굳이 "ABBO" 라고 명시하지 않아도 됩니다.

그래서 group은 "ABBO"는 생성자에 기본적으로 넣고, private 제어자로 변경이 가능합니다.

 

또한 nowYear는 현재 연도를 넣고 있는 것이기 때문에 파라미터로 받으면 안됩니다.

이 역시 생성자에서 Date함수에서 제공하는 것을 사용해도 되겠습니다.

 

생성자 파라미터 받아야 하는 것은 오로지 groupMessage 뿐이 되지 않겠습니다.

그래서 소스를 변경해보겠습니다.

private 제어자로 변경하자마자 helloWorld 소스에 빨간줄이 그어지고 아래 터미널에 에러가 발생하였습니다. 

여러분 에러를 무서워하시면 안됩니다. 에러는 개발자들이 정말 감사해야하는 경이로운 것이에요!

 

이는 이와 같이 변경하면 되겠습니다.

소스가 많이 수정되었습니다. 

위의 사진에 보시다시피 직접 접근하는 것이 아닌 안전하게 접근할 수 있도록 getter를 생성하였습니다.

이로써 에러가 해결되었습니다.

class Abbo {
    private group : string;
    private nowYear: number;
    public groupMessage: string;
    constructor(groupMessage: string) {
        this.group = "ABBO";
        this.nowYear = new Date().getFullYear();
        this.groupMessage = groupMessage;
    }

    public getNowYear() {
        return this.nowYear;
    }

    public getGroup() {
        return this.group;
    }
}
const niyoung2 = new Abbo("Happy new Year!!");

const helloWorld = (team: Abbo): string => {
    let message = `Hello ${team.getGroup}, This year is ${team.getNowYear}.
        ${team.groupMessage}`
    return message
};

console.log(helloWorld(niyoung2))
export {};

 

이로써 접근제어자와 접근 방법에 대해 살펴보는 시간을 가졌습니다 :)

 

반응형
댓글
공지사항