타입스크립트 - 클래스

자바스크립트 ES6+ 형태의 클래스와 동일하게 클래스를 만들어보겠습니다. 

그랬더니 color에 오류가 발생합니다.(js에서는 정상적으로 작동합니다)

실제 js에서의 결과 

타입스크립트에서 클래스를 작성할 때 맴버 변수는 미리선언해주어야합니다. 

추가로 변수의 타입도 설정해줘야합니다. 

멤버 변수를 선언하지 않고 사용 할 수 있는 방법이 있습니다.

바로 접근제한자나 readonly를 사용하는 것입니다.

 

접근제한자

js ES6에서는 접근제한자를 제공하지 않습니다.

타입스크립트에서는 사용할 수 있습니다.

• public , private , protected 

public

public은 자식 클래스나 클래스 인스턴스에서 접근할 수 있습니다. 

아무것도 작성하지 않으면 기본적으로 public이 됩니다.

부모클래스의 Car의 name변수에 자유롭게 접근할 수 있습니다. 

 

 

private

private를 사용하면 해당 클래스 이외의 위치에서는 접근할 수 없게 됩니다. 

private를 선언하는 다른 방법도 있습니다. 

#을 붙여주는 것입니다. private와 동일한 결과를 보여줍니다. 

 

 

protected

protected 형태의 멤버변수는 자식 클래스에서는 자유롭게 접근 가능하지만 클래스 인스턴스에서는 접근할 수 없습니다. 

 

정리

• public : 자식 클래스, 클래스 인스턴스 모두 접근가능
• private : 해당 클래스 내부에서만 접근 가능
• protected : 해당 클래스와 자식 클래스에서 접근 가능 

 

 

readonly

readonly를 사용하면 접근 제한자와 비슷한 기능을 구현할 수 있습니다. 

읽기만 가능하고 새롭게 수정은 불가능합니다. 

name을 readonly로 설정했는데 name을 변경하려고하니 에러가 발생합니다. 

지금은 "car"고정인데 사용자가 원하는 대로 바꾸고 싶다면 생성자에서

매개변수로 받아서 설정해주는 방법을 사용할 수 있습니다. 

 

 

static

정적 멤버 변수 static은 this가 아닌  class명을 적어서 접근할 수 있습니다. 

하나의 클래스에 하나만 적용이 되기 때문에 필요에 따라 사용할 수 있습니다. 

 

추상클래스

추상클래스는 해당 클래스 앞에  abstract를 붙이면 만들 수 있습니다. 

추상클래스로는 새로운 인스턴스를 만들 수 없고, 반드시 상속을 통해서만 사용할 수 있습니다. 

추상클래스 내부의 메서드에도 abstract를 붙일 수 있습니다. 

이 경우 상속받은 클래스는 반드시 추상메서드의 내용을 만들어야 정상적으로 동작합니다. 

 

단순히 이름만 선언해주고 구체적인 기능은 상속받는 쪽에서 만들어주는 것입니다.

 

추상클래스로 인스턴스를 만들 수 없는 예시입니다. 

추상클래스의 추상메서드를 정의하지 않고 상속했을 때 예시입니다. 

메서드를 정의해주면 에러가 사라집니다.