본문 바로가기

TypeScript

[TypeScript 강의노트] - class

반응형

class

 

class Cart {
	constructor(user){
    	this.user = user;
        this.store {};   
    }
    put(id, project){
    	this.store[id] = product;
    }
    get(id){
    	return this.store[id];
    }
}

//instance
const cartJohn = new Cart({name:"john"});
const cartJohn = new Cart({name:"jay"});

//typescript------------------------------

interface User{
    name:String;
}

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

class Cart {
    protected user:User; // protected = 외부에서 접근 불가, 클래스 상속시에는 접근가능
    private store:object; //private = 외부에서 접근 불가store라는 속성은 해당 클래스 내부에서만 접근가능
	constructor(user: User){
    	this.user = user;
        this.store {};   
    }
    put(id:string, product:Product){
    	this.store[id] = product;
    }
    get(id:string){
    	return this.store[id];
    }
}

//cart 상속
class PromotionCart extends Cart{
   addPromotion(){
   this.user //protected(상속시 접근 가능) 로 받아온 속성
   }
}

//instance
const cartJohn = new Cart({name:"john"});
//ex) cartJohn.stroe -> 접근불가 : private
const cartJohn = new Cart({name:"jay"});
const cart2 = new PromotionCart({name:"john"});
////ex) cart2.put() -> 접근가능

 

1. 접근 제한자

- protected : 해당 클래스 내부에서만 접근이 가능한 속성 or 메서드 (기본 pubilc), 상속시에는 접근 가능

- private : 해당 클래스 내부에서만 접근이 가능한 속성 or 메서드 (기본 pubilc)

=> 공통 : 클래스 밖 인스턴스에서 접근이 불가하다.

=> 차이 : 클래스 상속시 protected는 접근가능, private은 접근 불가

 

2. 속성과 할당을 동시에 하기 + 접근 제한자

- 생성자 정의시, 매개변수에 접근 제한자를 같이 쓰면 속성을 정의하고 할당하는 코드를 한번에 처리가 가능하다.

 

 

interface User{
    name:String;
}

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

class Cart {
    //protected user:User; 속성과 할당을 동시에 매개변수에서
   // private store:object; 속성과 할당을 동시에 매개변수에서
	constructor(protected user: User, private store:object = {}){ //접근제한자 꼭 명시
    	//this.user = user; 속성과 할당을 동시에 매개변수에서
        //this.store {}; 속성과 할당을 동시에 매개변수에서
    }
    put(id:string, product:Product){
    	this.store[id] = product;
    }
    get(id:string){
    	return this.store[id];
    }
}

 

- 위 코드 처럼 cart의 매개변수에 접근 제한자, 속성, 할당을 동시에 할 수 있다.

- 접근 제한자가 pubilc인 경우, (보통 default가 public라서 생략이 가능하지만) 매개변수에 동시에 작성시에는 pubilc을 명시해줘야한다.

 

 

3. 상속과 인터페이스의 관계

 

//1. implements - 클래스에서 인터페이스를 구현하는 방법

interface Person {
    name: string;
    say(message: string): void;
}

interface Programmer {
	writeCode(requriment:stirng): string
}

class KoreanProgrammer implements Person, Programmer { //다중인터페이스
	constructor(pubilc name: string){
    }
    
    say(message: string): void{
    	console.log(message);
    }
    writeCode(requriment: string): string{
        console.log(requriment);
        return requriment+"..."
    }
    
    loveKimchi(){
    	console.log("love")
    }
}

const jay = new KoreanProgrammer("jay")

---------------------------------------------------------

//2. abstract : 완성이 되지않은 클래스, 추상 클래스 - 인스턴스를 만들수 없는 클래스

abstract class Korean implements Person{
	pubilc abstract jumin:number; //상속시, abstract 정의된 메서드를 꼭 구현해야한다.
	constructor(pubilc name: string){
    }
    
    say(msg: string): void{
    console.log(msg);
    }
    
    abstract loveKimchi(): void; //상속시, abstract 정의된 메서드를 꼭 구현해야한다.
}

// ↓ 추상클래스 상속

class KoreanProgrammer2 extends Korean implements Programmer{
	constructor(pubilc name: string, pubilc jumin:number){ //jumin 구현
    	super(name) // 상속
    }
    
    say(message: string): void{
    	console.log(message);
    }
    writeCode(requriment: string): string{
        console.log(requriment);
        return requriment+"..."
    }
    
    loveKimchi(){
    	console.log("love") //상속시, abstract 정의된 메서드를 꼭 구현해야한다.
    }
}

const jay = new KoreanProgrammer2("jay", 123462)
//const jay = new Korean("jay", 123462) 추상클래스의 인스턴스는 만들 수 없다.

 

implements

- 클래스에서 인터페이스를 구현하는 방법

 

abstract 추상 클래스

- 인스턴스를 만들 수 없는 클래스

- 완성 되지 않은 클래스

- abstract로 정의된 메서드를 꼭 구현해야함.

- 상속을 받아서 하위 클래스에서 추상클래스를 구현해야한다. (이 하위클래스를 인스턴스화 하면 됨)

 

'TypeScript' 카테고리의 다른 글

React + Typescript  (0) 2021.01.28
[TypeScript 강의노트] - 고급타입  (0) 2021.01.22
[TypeScript 강의노트] - generic  (0) 2021.01.21
[TypeScript 강의노트]  (0) 2021.01.21