타입을 변수에 담아서 사용하고 싶을때는 type 키워드를 사용해서 타입변수를 생성했었다.
object같은 경우에는 두가지 선택을 할수있다. type키워드를 사용해도 되고 interface라는 키워드를 사용해도 된다.
이런식으로 type키워드를 사용해도 상관없지만 아래 사진처럼 interface를 사용해도 똑같다.
그렇다면 type 키워드와 다른점은 무엇일까?? 그전에 중간 퀴즈를 먼저 풀어보자.
이 내용들 interface를 사용해서 타입을 지정해보자.
나의 풀이
interface Stu {
name: string;
}
interface Tea {
name: string;
age: number;
}
let 학생:Stu={name:'st'};
let 선생:Tea={name:'ww',age:23};센세 풀이
그렇다면 interface를 사용하는 장점은 뭘까?
바로 extends로 복사가 가능하다는 점이다. Student라는 인터페이스와 Teacher라는 인터페이스는 name이라는 값이 중복되었다. 그래서 Student라는 인터페이스의 요소를 Teacher라는 인터페이스에 복사해서 넣어주면 코드가 에러없이 똑같이 동작한다.상속해준다고 이해하자.
그러면 type 문법은 extents 가 안되는것인가? 아니다 가능하다.위처럼 &기호를 사용해서 넣어주면 된다. & 기호를 intersection type 이라고 하는데 해당 기호를 사용하면 Animal에 있는 name값이 들어간다.
Cat에 &기호를 사용하여 Animal를 넣어줬는데 왼쪽 조건 즉 age가 number인 조건과 Animal에 설정된 name 이 string인 조건 둘다 만족하는 타입을 만들어 달라는 뜻이다. 즉 두 타입을 전부 만족하는 타입 이라는 뜻이다.
그러므로 let 선생이라는 변수에 Cat을 넣어줘도 에러가 발생하지 않는다.
type VS interface
interface는 중복 선언이 가능하지만 type은 중복선언이 불가능하다.
이렇게 Student라는 인터페이스 속성을 두개를 생성해도 에러가 나지 않는다. 그저 Student라는 인터페이스에 네임과 스코어가 들어갈뿐이다. 한마디로 합쳐진다는 뜻이다.
자동으로 extend가 된다라고 생각하자!
하지만 type은 엄격하기 때문에 중복 자체가 불가능하다.즉 인터페이스는 유연하고 타입은 엄격하다 라는 뜻이다.
외부 라이브러리 같은 경우에는 interface를 많이 사용한다. 추후에 해당 타입에 뭔가를 더 추가하는게 더 용이하기 때문이다. 만약 코드를 구성할때 다른 사람이 많이 이용할것 같다면 오브젝트 타입을 정할때 interface를 사용하면 좋을것같다.
extend할때 알고가야할 점이 있다. extends를 사용할때 중복 속성이 발생하면 안된다. 에러를 발생시켜 주긴 하지만 알고있으면 좋을것 같다.
하지만 & 기호를 사용해서 묶어줄때는 양쪽 조건을 만족하는 타입을 만들어 달라는 뜻인데 그건 말이 되지 않기때문에 ts에서 never타입으로 선언하고 에러를 발생시킨다. &기호는 미리 에러로 잡아주지 않기 때문에 주의를 해야한다. &는 합치는게 아니라 왼쪽 오른쪽 둘다 만족하는 타입을 만들어 주는것이다.
중복속성을 어디서 잡아주는지가 type과 interface의 차이점인것 같다. interface가 조금 더 유연하기 때문에 사용하기는 편리할것 같다.
숙제1) interface 이용해서 간단하게 타입을 만들어봅시다
let 상품 = { brand : 'Samsung', serialNumber : 1360, model : ['TV', 'phone'] }이런 변수가 있는데 interface 키워드로 타입지정 이쁘게 하고 싶습니다. 어떻게 코드를 짜면 될까요?
무슨 타입일지는 알아서 기입합시다.
나의 풀이
interface Num1{
brand : string;
serialNumber :number;
model : string[];
}
let 상품:Num1 = { brand : 'Samsung', serialNumber : 1360, model : ['TV', 'phone'] }센세 풀이
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 Shop{
product : string;
price:number;
}
let 장바구니 :Shop[] = [ { product : '청소기', price : 7000 },{ product : '삼다수', price : 800 }]
센세 풀이
interface Cart {
product : string,
price : number
}
let 장바구니 :Cart[] = [ { product : '청소기', price : 7000 }, { product : '삼다수', price : 800 } ];
array에 들어갈 수 있는 object의 타입을 interface로 만들어봤습니다.
숙제3) 위에서 만든 타입을 extends 해봅시다.
갑자기 서비스가 업데이트되어서 일부 상품은 card 속성이 들어가야합니다.
{ product : '청소기', price : 7000, card : false }위에서 만든 interface를 extends 해서 이 object의 타입을 만들어보십시오.
나의 풀이
interface News extends Shop{
card:boolean
}
let Nee2 : News ={ product : '청소기', price : 7000, card : false };
센세 풀이
interface Cart {
product : string,
price : number
}
interface NewCart extends Cart{
card : boolean
}
숙제4) object 안에 함수를 2개 넣고 싶은데요
-
이 object 자료는 plus() 함수를 내부에 가지고 있으며 plus 함수는 파라미터 2개를 입력하면 더해서 return 해줍니다.
-
이 object 자료는 minus() 함수를 내부에 가지고 있으며 minus 함수는 파라미터 2개를 입력하면 빼서 return 해줍니다.
이 object 자료를 어떻게 만들면 될까요?
interface를 이용해서 object에 타입지정도 해보십시오.
나의 풀이
interface Point{
a:number;
b:number;
}
let N2 ={
plus(a,b){
return a+b;
},
minus(a,b){
return a-b;
}
}
console.log(N2.plus(1,2));
console.log(N2.minus(3,2));
타입 지정을 못했다.
센세 풀이
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
}
}
그랬다고 합니다.
함수타입은 ()=>{} 이렇게 만들면 된다고 했습니다.