TypeScript 클래스-1

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ'

| 타입 스크립트 클래스

 

es6의 추가된 class를 new 연산자를 통해 객체로 인스터스화 가능하다.

class Cart{
    constructor(user){
        this.user = user;
        this.store = {};
    }

    put(id,product){
        this.store[id] = product;
    }

    get(id){
        return this.store[id];
    }
}

 

TypeScript의 작성방식

 

User, Product 인스턴스를 선언합니다. 그리고 Cart class 블록 안에 user, store 속성을 정의할 수 있습니다. 그리고

각 파라미터 값에 타입을 작성합니다.

interface User{
    name : string;
}

interface Product {
    id : string;
    price : number;
}

class Cart{
    user: User;
    store : any

    constructor(user : User){
        this.user = user;
        this.store = {};
    }

    put(id: string , product: Product){
        this.user
        this.store[id] = product;
    }

    get(id: string){
        return this.store[id];
    }
}

작성한 클래스는 new 연산자를 사용하여 인스턴스화 시켜 Cart 내부의 모든 method, property를 접근이 가능합니다.

const cartJohn = new Cart({ name : 'john'});
const cartJay = new Cart({ name : 'jay'});

cartJohn.store;
cartJohn.user;
cartJohn.put("id1", { id : "id1", price : 30000 } );
cartJohn.get("id1");

cartJay.store;
cartJay.user;
cartJay.put("id2", { id : "id2", price : 100000 } );
cartJay.get("id2");

 

TypeScript의 또 다른 특징으로는 각 method, property에 접근 제한자를 지정할 수 있습니다.

public : 모두 접근 가능

private : 클래스 내부에서만 접근 가능

protected : 인스턴스에선 접근 불가능 하지만 Cart라는 클래스를 상속받았을 경우 접근이 가능

 

기본적으로 접근 제한자를 작성하지 않으면 default public입니다. 

상속받은 PromitionCart 클래스에서 user가 접근 가능하며 상속받은 cart2 인스턴스 또한 put매서드에 접근 가능

class Cart{
    protected user: User;
    private store : any

    constructor(user : User){
        this.user = user;
        this.store = {};
    }

    put(id: string , product: Product){
        this.user
        this.store[id] = product;
        this.get("id");
    }

    private get(id: string){
        return this.store[id];
    }
}

// Cart 클래스 상속
class PromotionCart extends Cart{
    addPromotion(){
        // protected 제한자 접근 가능
        this.user
    }
}

const cartJohn = new Cart({ name : 'john'});
const cartJay = new Cart({ name : 'jay'});

cartJohn.put("id1", { id : "id1", price : 30000 } );

cartJay.put("id2", { id : "id2", price : 100000 } );

const cart2 = new PromotionCart({name:'John'});
cart2.put("1",{id:"1",price : 2000});
cart2.addPromotion();

constructor( 생성자 ) 매개변수에 한 번에 작성하는 방법

매개변수(파라미터) 값으로 접근 제한자 + 초기화 값도 설정 가능하며 설정을 할 경우 생성자에 

값을 넣지 않아도 정의가 가능

class Cart{
    // protected user: User;
    // private store : any

    constructor(protected user : User , private store : any = {}){
        // this.user = user;
        // this.store = {};
    }

    put(id: string , product: Product){
        this.user
        this.store[id] = product;
        this.get("id");
    }

    private get(id: string){
        return this.store[id];
    }
}

class PromotionCart extends Cart{
    addPromotion(){
        this.user
    }
}