TS. Interfaces

1. 복습

type Nickname = string;
type Health = number;
type Friends = Array<string>

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

type Player2 = {
    nickname: Nickname,
    healthBar: Health
}

const nico:Player = {
    nickname: "nico",
    healthBar: 3
}

type Food = string;

const kimchi:Food = "delicious"

2. 정해진 값만 사용가능하게 type / interface 지정하기

type Team = "red" | "blue" | "yellow";
type Health = 1 | 5 | 10

type Player = {
    nickname: string,
    team: Team
    health?: Health
}

const nico:Player = {
    nickname: "nico",
    team: "blue" // specific things
}

type Team = "red" | "blue" | "yellow";
type Health = 1 | 5 | 10

interface Player {
    nickname: string,
    team: Team
    health?: Health
}

const nico:Player = {
    nickname: "nico",
    team: "blue" // specific things
}

- type: 다양하게 사용가능

-interface: 타입스크립트에게 오브젝트의 모양을 설명해주는 하나의 목적으로만 사용가능

3.interface 기능: 상속

interface User {
    name: string 
}

interface Player extends User {}   

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

번외) type에서 상속

interface User {
    name: string 
}

type Player = User & {}

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

4. interface 기능: property 축적

interface User {
    name: string
}

interface User {
    lastName: string 
}

interface User {
    health: number
}

const nico: User = {
    name: "nico",
    lastName: "N",
    health: 3
}

- type 은 property 축적 불가능

5. abstract

- class를 표준화하기 위해 사용 -> 새로운 인스턴스 못만듬

abstract class User {
    constructor(
        protected firstName: string,
        protected lastName: string
    ){}
    abstract sayHi(name:string):string
    abstract fullName():string
}

// Not allowed 인스턴스 만드는 걸 허용하지 않음
new User()

class Player extends User {
    fullName(){
        return`${this.firstName} ${this.lastName}`
    }
    sayHi(name:string){
        return `Hello ${name}. My name is ${this.fullName}`
    }
}

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

interface Human {
    health: number
}

class Player implements User, Human {
    constructor(
        public firstName: string,
        public lastName: string,
        public health: number
    ){}
    fullName(){
        return`${this.firstName} ${this.lastName}`
    }
    sayHi(name:string){
        return `Hello ${name}. My name is ${this.fullName}`
    }
}


function makeUser(user: User){
    return "hi"
}

makeUser({
    firstName:"nico",
    lastName:"las",
    fullName: () => "xx",
    sayHi: () => "xx"
})

6. Recap

type PlayerA = {
    name: string
}
type playerAA = playerA & {
    lastName: string
}
const PlayerA : playerAA = {
    name: "nico",
    lastName: "las"
}

interface PlayerB {
    name: string
}
interface PlayerBB extends playerB{
    lastName: string
}
const PlayerB: PlayerBB = {
    name: "nico"
    lastName: "las"
}

- property 추가

interface PlayerB {
    name: string
}
interface PlayerB {
    lastName: string
}
interface PlayerB {
    health: number
}
const PlayerB: PlayerBB = {
    name: "nico",
    lastName: "las",
    health: 10
}

7. Polymorphism

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("kk")
stringsStorage.set("hello", "How are you?")

const booleansStorage = new LocalStorage<boolean>()
booleansStorage.get("kk")
booleansStorage.set("hello", true)