본문 바로가기

JavaScript/TypeScript

타입스크립트 클래스

반응형
// 클래스

// class Car{
//     constructor(color){
//         this.color = color;
//     }
//     start(){
//         console.log("start");
//     }
// }
// const bmw2 = new Car("red");
//자바스크립트에서의 클래스

class Car{
    color:string;
    //1. 멤버변수는 미리 선언해줘야한다.
    constructor(color:string){
        //2. 매개변수 타입 명시
        this.color = color;
        
    }
    start(){
        console.log("start");
    }
}
const bmw2 = new Car("red");
//타입스크립트에서의 클래스. - 멤버변수 미리 선언하는 방식


class Car2{
    constructor(public color:string){
    // constructor(readonly color:string){
        //접근제어자 || readonly 키워드 이용
        this.color = color;
        
    }
    start(){
        console.log("start");
    }
}
const bmw3 = new Car("red");
//타입스크립트에서의 클래스. - 접근제어자 || readonly 키워드 이용하는 방식

//(1) 접근제한자 (Access modifier) - public, private, protected
//public : 자식 클래스나 클래스 인스턴스에서 접근가능 (기본값)
//private : 해당 클래스의 내부 상태를 외부에서 직접 변경할 수 없으며, 캡슐화의 원칙을 따르게 된다.
//protected : 자식 클래스에서는 참조가능하지만 클래스 인스턴스에서는 참조불가능
//:자바스크립트에서는 지원하지않는 기능
//(2) 정적멤버변수 static
class Car3{
    readonly name: string = "car";
    //private color:string;
    #color:string;
    protected price:number = 1000;
    static wheels = 4;

    //1. 멤버변수는 미리 선언해줘야한다.
    constructor(color:string,name:string){
        //2. 매개변수 타입 명시
        //this.color = color;
        this.#color = color;
        //#을 썼으면 호출할때도 #사용해야함
        this.name = name;

    }
    start(){
        console.log("start");
        console.log(this.name);
        console.log(this.#color);
        //#을 썼으면 호출할때도 #사용해야함
        console.log(this.price);
        console.log(Car3.wheels);
        //클래스명으로 접근가능한 정적매개변수
    }
}
//카 클래스를 상속받은 Bmw
class Bmw2 extends Car3{
    constructor(color:string, name:string){
        super(color,name);
        //자식 클래스에서 부모클래스의 생성자 호출 -> private인데도 접근가능 캡슐화
    }
    showName(){
        console.log(super.name);
        //부모클래스의 변수가 public이므로 자식클래스에서 접근가능 -> private일 경우 해당 클래스 내부에서만 사용가능
    }
    showPrice(){
        console.log(this.name);
        //자식클래스에서도 참조가능한 protected
    }
}
const z4 = new Bmw2("black", "1234");
z4.showName();
z4.showPrice();
//z4.price;
//인스턴스에서는 참조못하고, 자식클래스에서는 참조가능한 protected
//z4.name = "1234";
//readonly 라서 읽기만 가능 -> 생성자로는 가능

console.log(Car3.wheels);
//클래스명으로 접근가능한 정적매개변수

//추상화: 프로퍼티나 메서드의 이름만 선언하고 구체화하는 것은 상속받는 쪽에 맡김 -> 구현하는 방식에 따라 다양함
//추상클래스
abstract class Car4{
    color: string;
    constructor(color:string){
       this.color=color; 
    }
    start(){
        console.log("start");
    }
    abstract doSomething() :void;
    //추상메서드
}
//const car3 = new Car4("red");
//new로 객체 생성이 불가능한 추상클래스

class Bmw4 extends Car4{
    constructor (color:string){
        super(color);
    }
    doSomething(){
        alert(3);
    }
    //추상메서드는 상속하는 클래스에서 반드시 구현해야함
}
const z5 = new Bmw4("black");
//상속을 통해서만 구현이 가능한 추상클래스
반응형