[TS] Classes / Intefaces

Class

 

constructor

 

constructor안에 있는 private firstName은 자바에서 this.firstName=firstName과 같다. 

 

 

추상 클래스 

다른 클래스가 상속받을 수 있는 클래스이다.

이 클래스는 직접 새로운 인스턴스를 만들 수 없다. 

 

추상 클래스 안에  메서드를 만들어보자! 

 

 

그렇다면 추상 메서드는 어떻게 만들 수 있을까? 메소드를 클래스 안에서 구현하지 않으면 된다.

getFullName을 예시로 들면 return 구문이 '구현'에 해당한다. 즉, 추상메서드가 되려면 return 코드를 작성하지 않으면 된다.

 

추상 클래스 안에 추상 메서드를 만들 수 있다. 메소드를 구현해서는 안되고 대신에 메소드의 call signature만 적어줘야 한다!

여기서 구현하지 않았다는 것을 코드가 없다는 것으로 이해해도 된다!

여기서 getNickName 함수를 보면 매개변수는 없고 리턴타입을 명시해 놓은 call Signature이다. 추상 메서드는 return이 없어야 하기에 리턴타입을 void로 해줬고 이를 추상 메서드라고 부른다. 

 

결론적으로 추상 메서드는 내가 추상 클래스를 상속받는 모든 것들이 구현을 해야하는 메소드를 의미한다. 

자 그러면 User에 추상메서드 getNickname을 만들었고 User의 자식 클래스인 Player에서 getNickName을 구현해줘야 하는데 문제는 nickname 프로퍼티를 private으로 설정해줘서 접근이 안된다!! 이럴때 protected라는 접근제어 지시자를 사용해줄 수 있다. 

 

클래스도 타입처럼 쓸 수 있다. 

 

해쉬맵 스타일로 딕셔너리 클래스를 만들어봤다. 

 

Words의 type alias를 보면 

https://lakelouise.tistory.com/196

[TypeScript] 타입스크립트 인덱스 시그니처 (Index Signature)

인덱스 시그니쳐 형식으로 만들어줬다. 자바스크립트에서 객체에 접근 할때 [] <-- 대괄호 쓰는 것 처럼 이것도 대괄호를 통해 객체의 내용에 접근한다고 보면 된다. 

 

type Words = {
    [key: string]: string
}
 
 
class Dict {
    private words: Words
    constructor() {
        this.words = {}
    }
    add(word: Word) { //클래스를 타입처럼 사용가능
        if (this.words[word.term] === undefined) {
            this.words[word.term] = word.def;
        }
    }
 
    def(term: string) {
        return this.words[term]
    }
 
}
 
class Word {
    constructor(
        public term: string,
        public def: string
    ) { }
}
 
const kimchi = new Word("kimchi", "한국의 음식");
 
const dict = new Dict()
 
dict.add(kimchi);
dict.def("kimchi")

Dict 클래스의 add 함수를 보면 Word 클래스 타입을 매개변수로 받아준 것을 확인할 수 있다!

 

 

kimchi를 넣은 상태에서 this.words를 출력한다면 

{

"kimchi" : "한국의 음식"

 

}

 

으로 object 형식으로 출력된다. 

애초에 this.words 자체가 객체이고 this.words[word.term]은 A["apple"]이런식으로 객체 내의 값에 접근한다고 생각하면 된다.

 

 

Word 클래스에서 term이랑 def모두 public이지만 누군가가 수정할 수 없게 만들려고 한다.

이때는 readonly 속성을 붙여주면 된다. 

 

이 외 다른 기능들 

concrete 타입의 특정 값을 type으로 지정해줄 수도 있다. 사실상 Team에는 red,blue,yellow만 오게끔 타입을 제한하는 것이기도 하다. 

 

 

Interface

 

위 사진의  Player 오브젝트의 모양을 설명하는 다른 방법이 있는데 그게 바로 "인터페이스" 이다!

인터페이스는 타입스크립트에게 오브젝트의 모양을 설명해준다. 

인터페이스는 타입스크립트에만 있다! 그래서 자바스크립트 코드로 컴파일 되지 않는다!

 

타입스크립트에게 오브젝트의 모양을 알려주는 방법에는 두가지가 있다.

 

1. type을 쓰고 오브젝트의 모양을 써준다.

2. interface

 

둘은 오브젝트의 모양을 결정한다는 공통점이 있지만 type키워드는 interface 키워드보다 활용도가 높다.

(예를 들어 interface가지고 타입지정이 안된다. interface Hello=string 요런거 안된다.)

 

 

1. 인터페이스로 오브젝트 만들기

 

2. type으로 오브젝트 만들기

 

상속받을 때 & 써주는게 차이점이다!

 

 

같은 인터페이스에 있는 다른 property들을 합치는 기능도 수행할 수 있다! (타입은 안된다.)

 

 

인터페이스의 특징이 있다면 가볍다는 것이다. 인터페이스는 컴파일 하면 JS로 바뀌지 않고 사라진다.

추상클래스인 User는 사실상 쓰이지 않기 때문에 필요가 없다. 그러나 이 코드는 자바 스크립트 코드에 존재한다.

이럴때 인터페이스를 쓰면 좋다! 이 추상클래스를 인터페이스로 바꿔볼 것이다.

인터페이스는 오브젝트나 클래스의 모양을 묘사하도록 해준다.

 

 

extends는 자바스크립트에서 쓰는 것인데 이것을 implements로 바꿔줄 수 있다. 

다만 상속할 때 주의점이 있다면 인터페이스는 property를 private으로 지정할 수 없다.

 

클래스는 타입과 인터페이스 둘다 상속받을 수 있다!