TypeScript(Interface)

들어가기 전 하나 알고 가자 +1

Static 

• JS method입니다.
• method를 호출할 때, 원래는 new Hi와 같은 instance를 새로 생성해서 hello()를 호출해야하는데
• static 정적 메소드를 쓰면, 바로 class에서 method 호출 가능!

class Hi {
	constructor() {
		static hello() {
			return "hello";
		}
	}
}

Hi.hello(); //ok to go

---

Type VS Interface

• 두 개의 공통 목표?
  • object의 모양과 타입을 설명해줍니다.

Type의 기능

• Type (Object)
  • Shape of object (객체가 어떻게 생겼는가?)를 알 수 있습니다.
  • Property Name을 알 수 있습니다. -> nickname, age
  • Property Type을 알 수 있습니다. -> string, number

type Player = {
	nickname:string,
	age: number
}

const vini : Player = {
	nickname: "vini",
	age: 28
}

• Type (String)
  • type이 object뿐만 아니라 다른 타입임을 (string임을) 지정해줄 수 있습니다.

type Food = string;

const kimchi : Food = "delicious"

• Type (aliases)
  • type을 지정해서 재사용할 수 있습니다.

type Nickname=string
type Age=number

type Player = {
	nickname:Nickname,
	age: Age
}

• Type (Specific value)
  • Type뿐만 아니라 특정하게 지정도 가능합니다.

type Team= "red"|"blue"|"yellow"

type Player = {
	nickname: string,
	team:Team
}

const vini:Player={
	nickname:"vini",
	team:"yellow" //"pink"는 불가능!
}

이 때, Object의 모양과 타입을 지정해주기 위해 Type말고 쓸 수 있는 다른 방법은?
▷ Interface!!

Interface

• only 1개의 기능만 함!
  • type이 더 많은 기능을 가지고 있습니다.
  • Object의 shape & type을 explain해줍니다.

type과 비교해서, interface를 쓸 때는 "="을 빼주고 사용해요

type Player = {
	nickname: string,
	team:Team
}

interface Player {
	nickname: string,
	team:Team
}

class 의 쓰임새와 매우 유사하다 (기능도 비슷)

• 상속 방법이 type과 다름
• 객체지향 프로그래밍처럼 보일 수 있게 해줌

interface User {
	name:string
}

interface Player extends User {
}

const vini:Player={
	name: "vini"
}

위의 예시가 type이었다면?

type User = {
	name:string
}

type Player = User & { //&연산자 사용해야함
}

const vini:Player={
	name: "vini"
}

property accumulate이 가능해집니다.

• 여러 개의 property를 추후에 추가할 수 있습니다.

interface User {
	name:string
}

interface User {
	lastName: string
}

interface User {
	age:number
}

const vini:User={
	name:"vini",
	lastName: "An",
	age: 28
}

위의 예시가 type이었다면?

type User = {
	name:string
}

type User = {
	lastName: string //⛔️ User을 계속 정의할 수 없기 때문에 작동안돼!!! 한번에 작성해줘야돼!!
}

---

Interface VS class

class 

abstract class를 쓰는 이유?
▷ 상속받는 class들이 어떤 method를 구현하는지를 보여주지,
어떻게 구현하는지는 abstract class에서 이미 다 해주니까!

abstract class User { //abstract class=> JS에선 class User로 일반적인 클래스로 바뀜
    constructor(
        protected firstName:string, //protected=> 추상클래스로부터 상속받은 클래스들이 property에 접근하도록 해줌
        protected lastName:string
    ) {}
    abstract sayHi(name:string):string
    abstract fullName():string
}

class Player extends User{
    fullName() {
        return `${this.firstName} ${this.lastName}`
    }
    sayHi(name: string) { //abstract class는 어떤 method를 implement해야되는지를 알려주기 때문에, type을 한번 더 지정해줘야함
        return `Hello ${name}. My name is ${this.fullName()}`
    }
}

Interface

• 내가 원하는 method와 property를 class가 강제로 가지도록 하게 해줌
• JS에선 interface가 없음! TS에서만 존재하기 때문에, JS 코드에선 보이지가 않음
• JS code를 smaller, lighter하게 만들어줄 수 있어짐

interface User{ 
    firstName: string,
    lastName: string,
    sayHi(name:string):string
    fullName():string
}

interface Human{
    health: number
}
//위의 interface들은 JS에서 안보임

//implements=JS에는 없는 메소드라 class Player{}로 나오게 됨
class Player implements User,Human {
    constructor(
        public firstName: string, //문제점이 있다면.. private&protected는 안됨!
        public lastName: string,
        public health: number
    ){}
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
    sayHi(name: string) {
        return `Hello ${name}. My name is ${this.fullName()}`
    }
}

type PlayerA = {
    firstName: string
}

interface PlayerB{
    firstName: string
}

//type & interface 둘 다 implement 가능
class User implements PlayerA{
    constructor(
        public firstName: string
    ){}
}

⭐️ object의 모양과 타입을 정의하고 싶으면 interface를 쓰고, 이외에 경우엔 다 type을 쓰면 돼!

---

Polymorphism

• 다형성 => 다양한 모양의 코드를 가질 수 있게 해줍니다
• generics를 이용하면 되겠찌?!!?!?
  • not a concrete type, it is a placeholder type

interface SStorage<T> {
    [key:string]: T
}

class LocalStorage<T> {
    private storage : SStorage<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 stringsStorage=new LocalStorage<string>()
stringsStorage.get("ket")
stringsStorage.set("hello", "how are you") //generics를 string으로 지정해줬기 때문에, string으로 value를 지정하라고 함

const booleanStorage=new LocalStorage<boolean>();
booleanStorage.get("XXX")
booleanStorage.set("hello", true) //generics를 boolean으로 지정해줬기 때문에, boolean type으로 value를 지정하라고 함