[TS] Classes&Interfaces

Classes

추상 클래스

1. 생성자에서 파라미터만으로 필드 관리. constructor에 this로 저장하지 않아도 됨.
2. 추상 클래스 내에서는 추상 메서드를 구현해서는 안 되고 추상메서드의 call singnature만 작성함.

abstract class User{
	constructor(
    	private firstName:string,//본인만 접근 가능
        private lastName:string,
        protected nickname:string//본인과 자식 클래스에서 접근 가능
        ){}
        
     getFullName(){
		return `${this.firstName} ${this.lastName}`
     }
     
     abstract getNickName():void
     //추상 메서드는 상속받은 클래스에서 반드시 구현해야 함.
}

class Player extends User{
    getNickName(){
        console.log(this.nickname)//protected는 접근 가능함
    }
}

const p1=new Player("wonji","kang","1g");   
}

추상 메서드는 상속받은 클래스에서 반드시 구현해야 함.

public: 모든 클래스에서 접근 가능
private: 해당 클래스 내에서만 접근 가능 (자식 클래스에서도 접근 불가)
protected: 해당 클래스와 자식 클래스에서 접근 가능

Hash

type Movie={
    [key:string]:string
}
class MovieIsGood{
    //클래스 내에서 생성자없이 변수 선언하는 방법
  // words는 initializer 없이 선언해주고 contructor에서 수동으로 초기화
  //private movies:Movie={}; 아래와 같음
    private movies:Movie;
    constructor(){
        this.movies={};
    }
    add(thing:Ani){
        if(this.movies[thing.name]===undefined) this.movies[thing.name]=thing.genre;
    }
    del(thing:Ani){
        if(this.movies[thing.name]!==undefined) delete this.movies[thing.name];
    }
    show(){
        console.log(this.movies)
    }
}
class Ani{
    constructor(public name:string,public genre:string){}
    getInfo():Movie{
        return {[this.name]:this.genre};
    }
}
const movieToday=new MovieIsGood();

const 짱구=new Ani("짱구","comic");
const 인어공주=new Ani("인어공주","story");
const 가필드=new Ani("가필드","family");

인어공주.getInfo();

movieToday.add(짱구);
movieToday.add(인어공주);
movieToday.add(가필드);

movieToday.del(가필드);

movieToday.show();

Interfaces

type

type의 용도 :
1. 특정 값이나 객체의 값에 대한 타입을 지정해줄 수 있다.
2. Type alias(타입에 대한 별명)를 만들어줄 수 있다.
3. 타입을 특정한 값을 가지도록 제한할 수 있다.

type Name=string;//2 allias(별칭)
type Fruit={//1
    name:Name,
    sugarContent:number
}
const banana:Fruit={
    name:'banana',
    sugarContent:7
}

//1
type Friends=Array<string>

//3
type Team="red"|"blue"|"yellow";
type Player={
  nickname:string,
  team:Team
}
const me:Player={
    nickname:"me",
    team:"red"
}

interface

용도 : 오직 오브젝트의 모양을 특정함

type Team="red"|"blue"|"yellow";
interface Player{// 이 부분만 달라짐
  nickname:string,
  team:Team
}
const me:Player={
    nickname:"me",
    team:"red"
}

객체의 type(모양)을 결정하는 방법

1. type
2. interface

type Job="programmer"|"dentist"|"teacher";
interface Family{
    father?:string,
    mother?:string,
    sibling?:string
}
interface personnel{
    name:string,
    age:number,
}
interface Info extends personnel{
  //type Info = personnel& 와 같음
    family?:Family,
    job:Job
}
const me:Info={
    name:"1g",
    age:2,
    family:{
        father:"dad",
        mother:"mom"
    },
    job:"programmer"
}
console.log(me)

interface를 여러 번 만들어도 알아서 TS가 하나로 합쳐줌.

implements

: 클래스 가이드 라인. extends처럼 상속이 아니라 형식을 검사함. 파일 사이즈 줄일 수 있음.

interface User{
    firstName:string,
    lastName:string,
    sayHi(name:string):string
}
class Player implements User{
    constructor(
        public firstName:string,
        public lastName:string
    ){}
    sayHi(name:string){
        return `${this.firstName} ${this.lastName}`
    }
}

인터페이스 상속 시 property는 private/protected가 될 수 없음. 고로 interface와 상속받은 클래스에서의 type은 public이 되어야 함.

정리

1. type은 여러 용도로, interface는 object의 type을 정의하기 위한 용도로만 사용된다.
2. interface는 오브젝트 뿐만 아니라 클래스의 모양을 특정지을 수 있다.
3. interface는 js 코드로 컴파일 되지 않는다. 추상클래스는 js에서 일반적인 클래스로 보임.
   => 만약 특정 모양을 따라하게 만들 용도라면 interface를 사용하는 것이 유리
4. interface 상속 시 private property를 사용하지 못 한다.
5. interface는 constructor가 없다.
6. 한 class에서 하나 이상의 interface를 상속할 수 있다.
7. interface에서 extends는 플러스의 의미(type의 &)를 갖는다. implements는 문법 검사기와 같다.
8. interface는 여러 번 선언하면 오류없이 선언된 필드가 추가된다.
9. object의 모양을 알려줄 때 => interface, 나머지 => type을 사용하면 된다.

Polymorphism

제네릭 : placeholder 타입을 TS가 concreate 타입으로 바꿔줌.

localstorage 만들기

interface Astorage<T>{
    [key:string]:T
}
class LocalStorage<T>{
    private storage:Astorage<T>
    constructor(){
        this.storage={};
    }
    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.set("hello","nice to meet you")
stringStorage.get("hello")
const booleanStorage=new LocalStorage<boolean>()
booleanStorage.set("hi",true);
booleanStorage.get("hi");