Tech/TypeScript

[TS 기초] TS의 객체 지향적 특징

닝닝깅 2023. 3. 21. 17:59

클래스 

추상 클래스는 다른 클래스가 상속 받을 수 잇는 클래스다. 인스턴스를 직접 만들 수는 없다. 상속받는 클래스의 타입을 알려주는 것이라고 생각하면 된다.

추상 메소드는 메소드를 클래스 안에서 구현하지 않는 것이다. 상속받는 클래스가 구현한다.

 

구분   선언한 클래스 내 상속받은 클래스 내 인스턴스
private      ⭕       ❌            ❌
protected    ⭕       ⭕            ❌
public       ⭕       ⭕            ⭕

 

static 함수

별도의 인스턴스 생성 없이 바로 사용이 가능한 클래스 내부의  함수

 

인터페이스

인터페이스는 속성 타입을 특정할 수 있게 해준다. 

 

type과의 차이점

둘 다 추상클래스를 대체하여 상속 가능하다.

오브젝트의 모양을 알려준다.

인터페이스는 활용되는 범위가 type보다 작다.

type은 객체 속성 타입을 특정하는 것뿐만 아니라 타입 alias를 만들기도 한다.

그리고 상속되는 방식이 다르다.

//type
type PlayerA = {
  name: string;
};
type PlayerAA = PlayerA & {
  lastName: string;
};

//interface
interface PlayerB {
  name: string;
}
interface PlayerBB extends PlayerB {
  lastName: string;
}

동일한 타입명은 쓸 수 없는 반면 동일한 인터페이스명은 사용할 수 있다.

 

인터페이스는 상속시켜 클래스의 타입을 강제할 수 있다. 

추상 클래스와 인터페이스의 차이점은 상속되는 방식이 다르다는 것이다. 그리고 인터페이스는 자바스크립트로 컴파일 되지는 않는다

private 속성을 사용하지 못 한다.

 

간단 로컬스토리지 만들기

제네릭을 클래스로 보낸다.

클래스는 제네릭을 인터페이스로 보낸다.

interface myStorage<T> {
  [key: string]: T;
}

class LocalStorage<T> {
  private storage: myStorage<T> = {};
  set(key: string, value: T) {
    this.storage[key] = value;
  }
  remove(key: string) {
    delete this.storage[key];
  }
  get(key: string): T {
    return this.storage[key];
  }
  clear() {
    this.storage = {};
  }
}

const stringStorage = new LocalStorage<string>();
stringStorage.get("ket");