타입스크립트 Interface

type 키워드로 타입변수 생성 가능
interface 키워드도 타입변수 생성 가능

Interface

기존 type 키워드

// type Square = { color  : string, width : number }

interface Square  { color  : string,
 					width : number }

let 네모 :Square : { color : 'red', width : 100 }

interface 장점 : extends로 복사가능 (class와 마찬가지)

extends

---

[활용전]
interface Student {
	name : string	
}

interface Teacher {
	name : string,
    age : number 
    // (컴마 대신 세미콜론도 가능)
}

let 학생 :Student = { name : 'kim' }
let 선생 :Teacher = { name : 'kim', age : 20 }


[활용후]
interface Student {
	name : string	
}

interface Teacher extends Student{
    age : number
}

let 학생 :Student = { name : 'kim' }
let 선생 :Teacher = { name : 'kim', age : 20 }


[&활용]
interface Student {
	name : string	
}

interface Teacher {
    age : number
}
let 변수 :Student & Teacher = { name : 'kim', age : 90 }

---

type 별명에서도 사용 가능 : &

type Animal = { name : string }
type Cat = { age : number } & Animal
type Cat = { age : number } & Student

// 인터섹션을 활용해서 왼쪽도 오른쪽도 둘 다 만족하도록
// 두 타입을 전부 만족하게 해주세요

type vs interface

interface는 중복선언 가능 / type은 중복선언 불가능

하지만, name : string 과 name : string 이면 하나로 합쳐줌 name : string

두 개가 겹치면 자동 extends 즉, 자동으로 합쳐짐

interface - 유연
type - 엄격

일반적인 상황에서는 type 키워드 자주 활용함

외부 라이브러리 같은 경우 interface 많이 씀
그럼 추후에 타입에 뭐 더 하는 게 쉬움

다른 사람이 이용 많이 할 것 같으면 object 타입 정할 때 interface 쓰기

extends 중복?

interface Student {
	name : string	
}

interface Teacher {
	name : number
}

같은 name 중복은 불가 

위 같은 코드는

아래와 같은 결과가 나오기 때문

& 중복?

type Animal = { name : string }
type Cat = { name : number } & Animal

let 야옹이 :Cat = { name : 'kim' }

미리 에러가 나오지 않으니까 유의

type은 나중에 나오니까 interface를 활용하는 게 낫긴 함

---

예제 1

interface 이용해서 간단하게 타입 만들어보기

interface Product {
	brand : string,
    serialNumber : number,
    model : string[]
}

let 상품 :Product = { brand : 'samsung', serialNumber : 1360, model : ['TV', 'phone'] } 

예제 2

이렇게 생긴 object들이 잔뜩 들어갈 수 있는 array의 타입을 지정하는 방법

interface Cart {
	product : string, 
      price : number
    
}

let 장바구니 :Cart[] = [ { product : '청소기', price : 7000 }, 
product : '삼다수', price : 800 } ] ;

예제 3

위에서 만든 타입에 extends 해보기

[내답]
interface pay {
	card : bool
}

interface Cart extends pay {
	product : string, 
      price : number
}

[정답]
interface Cart {
	product : string,
    price : number
}

interface NewCart extends Cart {
	card : boolean
}

[& 활용]
interface Cart {
	product : string,
    price : number
}

interface NewCart {
	card : boolean
}

let 장본거 :Cart & NewCart = [ {~~,~~} {~~,~~} ]

예제 4

object안에 함수 두 개 넣기

interface MathObj {
	plus : (a:number, b:number) => number,
    minus : (a:number, b:number) => number
}

let 오브젝트 :MathObj = {
	plus (a, b) {
    	return a + b
    },
    minus (a, b) {
    	return a - b
    }
}