타입스크립트 클래스와 프로토타입

타입스크립트에서 클래스 기능을 확인해보기 앞써 자바스크립트에서 클래스가 하는 역활이 어떤거고 코드로 어떻게 구현을 하는지 확인해 보겠습니다. 

 

우선 클래스가 하는 역활은 기본적으로 인스턴스를 생성해주는 기능을 한다. 

class Cafejun {
    // class logic
    constructor(name, age) {
        console.log('인스턴스가 생성되었습니다.');
        this.name = name;
        this.age = age;
    }
}

var cafejun = new Cafejun('jun', 29);
console.log(cafejun);

위 코드는 자바스크립트에서 Class 를 생성후 new 라는 예약어를 통해 인스턴스를 생성한 후 cafejun 변수에 담아내고 출력하는 코드 입니다. 해당 코드를 실행하였을때 아래와 같이 Class 호출시 파라미터로 선언한 속성들로 초기화된 객체를 생성이 되었습니다.  

 

그럼 클래스를 왜쓰고 자바스크립트 프로토 타입과 어떤 연관이 있는지 살펴보겠습니다. 여기서 javascript가 프로토타입이라는것을 아래 코드로 확인해 보겠습니다. 

var user = { name: 'capt', age: 100 };

var admin =  {name : 'capt',age: 100, role: 'admin'};

 

위 코드에서 유저는 객체의 속성중 name,age 를 가지고 있고 유저가 가지고 있는 정보로 admin를 역활을 부여하기 위해서 role이라는 속성을 추가하였습니다. 하지만 코드가 중복이 되므로 재활용을 할수 있게 코드를 다시 작성을 해보겠습니다. 

 

var user = { name: 'capt', age: 100 };

var admin = {};
// __proto__속성으로 user 가 가지고 있는 속성을 상속 받음 
admin.__proto__ = user;
// 결과는 user와 동일하게 출력 
console.log(admin.name, admin.age);
// 하지만 admin 은 {} 빈 객체 
console.log(admin);
// admin role 속성을 추가 
admin.role = 'admin';
// 객체에 role 이 추가됨 
console.log(admin);

위 코드를 실행을 하면 아래와 같은 결과가 출력이 됩니다. 

위 실행 결과를 확인을 하였을때는 prototype 이 admin으로 상속이 된것입니다. 자바스크립트에서 이러한 prototype은 여러가지로 많이 사용을 하고 있는데 대표적으로 object 에서 제공하는 메소드들이 최상단 object 클래스에서 proto 제공받은것입니다. 이부분을 Bulit-in Javascript API 또는 Javascript Native API 입니다. 

 

object 에서 제공 받음 

위에서 작성한 class 를 생성자 function 으로 변환이 가능합니다.  

function Cafejun(name, age) {
    this.name = name;
    this.age = age;
}

코드를 실행을 하면  결과가 동일하게 출력이 됩니다. 

 

그럼 타입스크립트의 클래스가 es6 클래스와 어떻게 다른지 확인해 보겠습니다. 

class Cafejun {
    // 멤버 변수 
    private name: string;
    public age: number;
    readonly log: string;
    
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

타입스크립트의 class 에서는 멤버변수를 지정할수있고 접근 범위 (private,public,readonly) 등을 설정할수가 있습니다. 

 

 

참고 URL: 

javascript 는 prototype chain : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

object: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object