[코딩애플] ts part 1-11. interface

interface: Object에 타입지정하려면

type 키워드로 타입 변수를 생성할 수 있다고 했다.

근데 object의 경우에는 초이스가 두 가지다.

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

네모 라는 오브젝트가 있다고 해보자.

1) type 키워드로 타입변수 생성

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

이거 타입지정하려면 어떻게 해야하나? 타입은 자동으로 된다!

근데 만약 어려운 타입이 미리 들어가야 한다, 하면 type alias를 만들어서 쓰면 된다.

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

2) object 타입지정 시 interface 사용가능

interface Square { color :string, width :number};

• 등호 (=)는 필요없다.
• class 만드는 법이랑 유사하다 (작명하고 중괄호 안에 작성).
• ,콤마 대신 ;세미콜론 써도 된다. 맘에 드는 거 쓰면 된다.

interface Square { 
    color :string;
    width :number;
};

Q. 이거 타입지정 interface 써서 해보기

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

A.

interface Student {
    name :string;
}
interface Teacher {
    name :string;
    age :number;
}

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

type vs interface

interface 장점: 'extends'로 복사 가능

지금 Student, Teacher에서 name 속성이 중복된다. 각 interface를 쓰는게 아니라, Student를 복사해서 Teacher를 만들면 되지 않나. interface는 extends를 이용해서 그게 가능하다.

interface Student {
    name :string;
}
interface Teacher extends Student {
    age :number;
}

type alias의 & 기호(intersection type)

& 기호(intersection type)

• 두 타입을 전부 만족하는 타입이라는 뜻

근데 interface의 extends는 type alias 의 & 기호로도 유사한 기능이 가능한데..

type Animal = { name: string };
type Cat = { age: number} & Animal; // 왼 & 오 만족하는 type 생성

type vs interface

• **interface는 중복선언 가능**
• **type은 중복선언 불가능**

interface Student {
	name :string;
};
interface Student {
    score :number;
}
// Student = {name :string, score :number}

에러 없이 가능하다. 중복 선언하면 자동으로 extends가 된다.

근데 type은 엄격해서 중복선언이 안된다.

type Animal = { name: string };
type Animal = { age: number }; // Error: Duplicate identifier 'Animal'. ts(2300)

ts로 작성된 외부 라이브러리는 interface를 많이 쓴다. type이 아니라.

왜냐하면 interface를 갖다 쓸 때, 사람들이 커스텀마이징할 수 있기 때문이다(속성 추가 가능).

그래서 **다른 사람이 이용많이 할 것 같으면 object 타입을 정할 때 interface를 쓰자**.

extends 쓸 때 중복속성 발생하면? -> 에러로 잡아줌

interface Student {
    name :string;
}
interface Teacher extends Student{
    name: number; // 에러 발생
}

왜냐하면

interface Teacher textends Student {
    name: string;
    name: number;
}

이 코드랑 동일하기 때문에 에러 발생한다.

& 쓸 때 중복속성 발생하면? -> 미리 에러안나서 주의

type Animal = { name: string };
type Cat = { name: number} & Animal; // 에러 없음

에러가 안난다. 그런데 여기선

let 야옹이 :Cat = { name: 'kim' }; // 에러 발생

에러가 발생한다. 왜냐하면 **&는 합치는게 아니라 왼쪽 오른쪽 둘 다 만족하는 타입이기 때문**이다.

interface가 더 안전해보인다. 미리 에러를 내주니까.

숙제

1) interface 이용해서 간단하게 타입을 만들어봅시다

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

이런 변수가 있는데 interface 키워드로 타입지정 이쁘게 하고 싶습니다. 어떻게 코드를 짜면 될까요?

무슨 타입일지는 알아서 기입합시다.

➡️

interface Product {
    brand : string,
    serialNumber : number,
    model : string[]
}
let 상품 :Product = { brand : 'Samsung', serialNumber : 1360, model : ['TV', 'phone'] };

2) array 안에 object 여러개가 필요합니다.

쇼핑몰 장바구니를 구현하려고 하는데

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

이렇게 생긴 object들이 잔뜩 들어갈 수 있는 array는 어떻게 타입을 지정해야할까요?

오늘 배운 interface 문법을 써봅시다.

➡️

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

3) 위에서 만든 타입을 extends 해봅시다.

갑자기 서비스가 업데이트되어서 일부 상품은 card 속성이 들어가야합니다.

{ product : '청소기', price : 7000, card : false }

위에서 만든 interface를 extends 해서 이 object의 타입을 만들어보십시오.

➡️

interface Basket { 
    product : string,
    price : number
}
interfacef NewBasket {
    card : boolean
}

4) object 안에 함수를 2개 넣고 싶은데요

1. 이 object 자료는 plus() 함수를 내부에 가지고 있으며 plus 함수는 파라미터 2개를 입력하면 더해서 return 해줍니다.
2. 이 object 자료는 minus() 함수를 내부에 가지고 있으며 minus 함수는 파라미터 2개를 입력하면 빼서 return 해줍니다.

이 object 자료를 어떻게 만들면 될까요?

interface를 이용해서 object에 타입지정도 해보십시오.

➡️

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

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