반응형

javascript에서도 class는 자주 사용해보진 않았지만, 해당 개념은 알고 있어야하니 정리를 해봅니다.

객체지향의 자바를 해봅셨다면 아주 어렵게 느껴지진 않을겁니다. 거의 똑같은 느낌입니다.

 

 

class

typescript에서 class를 정의하는 방법은 간단합니다.

constructor인 생성자부분에서 변수의 접근 제한자 변수명: 타입; 형태로 작성합니다.

class Players {
  constructor(
    private firstName: string,
    private lastName: string,
    public nickname: string
  ) {}
}

const p1 = new Players("shinwoo", "park", "shin");

자바에서 많이 하던짓과 비슷합니다.

다만 javascript에서는 파라미터부분에 파라미터명들을 넣어주고, this.var1 = var1; 등을 해줘야하지만, typescript는 정의만으로 끝입니다.

 

이후 생성된 인스턴스를 사용해보면 public인 nickname만 접근 가능한 것을 볼 수 있습니다.

 

 

private값을 호출하거나 변경하고 싶다면?

firstName과 lastName은 private이므로 선언한 클래스 내부인 Players에서만 접근이 가능합니다.

해당 값을 가져오거나 변경하고 싶다면 setter, getter를 활용합니다.

class Players {
    constructor(
        private firstName: string,
        private lastName: string,
        public nickname: string
    ) { }

    setFName(name: string) {
        this.firstName = name;
    }
    getFName() {
        return this.firstName;
    }
    getLName() {
        return this.lastName;
    }
}

const p1 = new Players("shin", "p", "shin");
p1.setFName("변경")
console.log(p1.getFName());
console.log(p1.getLName());

 

 

abstract

추상클래스는 다른 클래스들이 상속받는 용도로 사용되는 클래스입니다.

직접 인스턴스 생성은 불가능합니다.

(인스턴스 new형태로 클래스를 생성하는것을 말합니다.)

abstract class User {
  constructor(
    private firstName: string,
    private lastName: string,
    public nickname: string
  ) {}

  getFullname() {
    return `${this.firstName}${this.lastName}`;
  }
}

class Player extends User {}

const shin = new Player("shinwoo", "park", "shin");
shin.nickname = "shin2";
console.log(shin);
console.log(shin.getFullname());

getFullname인 추상클래스의 메소드도 상속받아졌기때문에 Player클래스에서 별다른 정의가 하나도 없는데도 자동으로 사용할수 있는것을 볼 수 있습니다.

 

주로 라이브러리등을 전달할때 해당 방식을 많이 사용합니다.

 

 

abstract method

추상메소드는 추상클래스 내의 추상메소드들을 의미합니다.

해당 메소드들은 추상클래스를 상속받는 클래스내에서 무조건 구현되어야하는 함수들을 의미합니다.

abstract class User {
    constructor(
        private firstName: string,
        private lastName: string,
        public nickname: string
    ) { }
    abstract getName(): void;

    getFullname() {
        return `${this.firstName}${this.lastName}`;
    }
}

class Player extends User {
    //무조건 상속받는 클래스내에서 작성해야하는 메소드
    getName() {
        return this.getFullname(); //딱히 구현할게 없으니 그냥 같은 fullname을...작성함
    }
}

const shin = new Player("shinwoo", "park", "shin");
shin.nickname = "shin2";
console.log(shin);
console.log(shin.getName()); //이전과 동작은 동일하다. 같은걸 뱉으니까...

abstract class User내부의 abstract getName이 그런 경우입니다.

 

User를 상속받고 있는 Player클래스는 getName을 무조건 지정된 속성으로 작성해줘야합니다.

 

 

🧷 접근 제한자들의 접근 가능한 위치들

  선언 클래스 내부 상속받은 클래스 내부 인스턴스(new 사용)
private
protected
public
반응형