Frontend/TS

TS - Class

Creative_Lee 2022. 7. 18. 17:26

1. constructor - 프로퍼티 초기화

자바스크립트에서 처럼 this.X = X 형태의 문법은 더이상 사용하지 않는다.

타입스크립트에서는 constructor에서 한 번에 선언할 수 있다.

접근 제한자도 붙여줄 수 있다.

class Player {
  constructor(
    private firstName: string,
    protected lastName: string,
    public nickName: string
  ){}
}

1-1. 프로퍼티 메뉴얼 초기화

클래스의 프로퍼티가 constructor에 의해 바로 초기화 되지 않도록 할 수 있다.

type Words = {
  [key: string]: string;
};

class Dict {
  private words: Words;
  constructor() {
    this.words = {};
  }
}

위 코드에서는 word 프로퍼티를 수동으로 초기화 시켜주었다.


2.  접근 제한자

* 접근 제한자 - 메서드, 프로퍼티의 접근 범위를 지정할 때 사용한다.

  • private : 해당 클래스에서만 접근 가능
  • protected :  해당 클래스, 자식 클래스 에서 접근 가능.
  • public : 어디에서나 접근 가능하며 생략 가능한 default 값.

 

* 제한자 접근 가능 범위

  클래스 내부 자식 클래스 외부
private O X X
protected O O X
public O O O

 

class Parents {
  constructor(
    private firstName: string,
    protected lastName: string,
    public nickName: string
  ) {}
}

class Child extends Parents {
  privateTest(){
    return this.firstName // error
  }

  protectedTest(){
    return this.lastName
  }
  publicTest(){
    return this.nickName
  }
}

const test = new Child('t','e','st')

test.firstName // private --> error
test.lastName // lastName --> error
test.nickName // public 프로퍼티만 어디서든 접근 가능합니다.

 


3. Abstract class( 추상 클래스 )

추상 클래스는 자식 클래스에게 상속을 강제하기 위한 클래스이다.

추상 클래스는 자신의 인스턴스 생성이 불가능하다.

abstract class Abstract {
  constructor(
    private firstName: string,
    protected lastName: string,
    public nickName: string
  ) {}
}

class Test extends Abstract {}

new Abstract // cannot create an instance of an abstract class.

3-1. Abstract Method (추상 메소드)

추상 메소드는 추상 클래스 안에서만 생성 가능하다.

이 역시 자식 클래스에게 메소드의 구현을 강제하기 위해 사용한다.

 

추상 메소드에는 call signature만 정의하고,

상속 받는 자식 클래스에서 추상 메소드를 구현한다.

abstract class Abstract {
  constructor(
    protected firstName: string,
    protected lastName: string,
  ) {}

  abstract speak():string
}

class Test extends Abstract {
  speak(){
    return `${this.firstName} ${this.lastName}`
  }
}

 

 

 

 

 

 

'Frontend > TS' 카테고리의 다른 글

TS - Interface  (0) 2022.07.19
TS - 제네릭(generic)  (0) 2022.07.15
TS - Function Overloading  (0) 2022.07.15
TS - Call Signatures  (0) 2022.07.14
TS - 새로운 타입과 기본 문법  (0) 2022.07.14