클래스
추상 클래스는 다른 클래스가 상속 받을 수 잇는 클래스다. 인스턴스를 직접 만들 수는 없다. 상속받는 클래스의 타입을 알려주는 것이라고 생각하면 된다.
추상 메소드는 메소드를 클래스 안에서 구현하지 않는 것이다. 상속받는 클래스가 구현한다.
구분 선언한 클래스 내 상속받은 클래스 내 인스턴스
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");
'Tech > TypeScript' 카테고리의 다른 글
[TS 기초] 타입스크립트로 블록체인 만들기 (0) | 2023.04.12 |
---|---|
[ TS 기초 ] 함수 - Call signiture / 오버로딩 / 제너릭 (0) | 2023.03.21 |
[ TS 기초 ] 타입스크립트란 (0) | 2023.03.21 |
[Typescript / TS] 영화 웹 서비스 만들기 (0) | 2023.02.07 |
[Typescript / TS] Frame motion을 사용한 애니메이션 (0) | 2023.01.29 |
클래스
추상 클래스는 다른 클래스가 상속 받을 수 잇는 클래스다. 인스턴스를 직접 만들 수는 없다. 상속받는 클래스의 타입을 알려주는 것이라고 생각하면 된다.
추상 메소드는 메소드를 클래스 안에서 구현하지 않는 것이다. 상속받는 클래스가 구현한다.
구분 선언한 클래스 내 상속받은 클래스 내 인스턴스
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");
'Tech > TypeScript' 카테고리의 다른 글
[TS 기초] 타입스크립트로 블록체인 만들기 (0) | 2023.04.12 |
---|---|
[ TS 기초 ] 함수 - Call signiture / 오버로딩 / 제너릭 (0) | 2023.03.21 |
[ TS 기초 ] 타입스크립트란 (0) | 2023.03.21 |
[Typescript / TS] 영화 웹 서비스 만들기 (0) | 2023.02.07 |
[Typescript / TS] Frame motion을 사용한 애니메이션 (0) | 2023.01.29 |