[typescript] object에 타입 interface 키워드

 

interface 키워드

 

 

타입을 변수에 담아서 쓰고 싶을 때 type 키워드를 사용한다.

type 타입변수명 = string;

object인 경우는

type 키워드 써도되고

interface 라는 키워드를 써도된다.

 

 

 

< type 키워드 >

type Square = {color : string, width : number}
let 네모 : Square = {color : 'red', width:100}

 

 

 

< interface 키워드 >

interface Square {
  color: string;
  width: number;
}
let 네모: Square = { color: "red", width: 100 };

interface 키워드 쓰는 경우 등호 ' = ' 는 필요 없다.

class 만드는 문법이랑 비슷하다고 생각하면 됨!

 

 

 

굳이 interface 쓰는 이유는?

extends문법을 사용해서 복사가 가능하다. (interface의 장점)

interface Student {
  name: string;
}

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

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

위의 코드를 보면 Student와 Teacher의 name 속성 타입이 중복된다.

이럴땐 각각 만들지 않고 Student를 복사해서 Teacher에 넣는게 효율적인데

이때 extends 문법을 사용하면 쉽게 복사할 수 있다.

 

 

 

interface Student {
  name: string;
}

interface Teacher extends Student {
  age: number;
}

Teacher 뒤에 extends Student

Student interface를 extends 해달라고 적으면 Student 안에 있던게 복사되어 Teacher 안에 들어간다.

Teacher 타입은 age, name 속성을 모두 갖게 되는 것!

 

 

 

type alias와 interface는 거의 똑같은 기능을 제공하긴 하는데

extends 문법이 다르다.

type Animal = { name: string };
type Cat = { name : string, age: number }

type alias 일때

동물과 고양이의 name 속성 타입이 중복되면

 

 

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

' & ' 기호를 사용할 수 있다. (intersection type 교차 타입이라고 함)

extends 문법과 약간 다른 개념으로 

' & ' 기호는 두 타입을 모두 만족하는 타입이라는 뜻이다.

 

 

 

ex)

type Animal = { name: string };
type Cat = { age: number } & Animal;
let 야옹 : Cat = { name : 'kim' }; //오류남

type Cat은는 &기호로 교차타입이기 때문에

문자타입, 숫자타입 모두 만족 해야하는데

문자, 숫자를 모두 만족하는 경우는 없으므로 오류가 난다.

 

 

 

 

type, interface의 차이점

 

 

interface는 중복선언 가능

type은 중복선언 불가능

 

 

interface의 중복선언

interface Student {
  name: string;
}

interface Student {
  score: number;
}

Student // {name : string, socre : number}

interface는 중복선언을 하면 자동으로 합쳐진다.

 

 

 

그런데 type을 사용해서 중복선언하면 오류남

interface는 유연하고

type은 매우 엄격!

 

 

 

외부 라이브러리같은 경우는 interface를 더 많이 씀

다른 사람들이 많이 쓸 것 같으면 obejct 타입을 정할 때 interface 쓰면 된다.

 

 

 

만약 interface 키워드 사용해서 extend 할 때 object 안에서 타입이 다른 속성이 중복된다면?

interface Animal {
	name : string
}

interface Cat extends Animal{
	name : number
}

name 속성 중복되어서 에러남

 

 

 

 

 

type 키워드 사용해서 ' & ' 연산자 사용할 때 중복되면

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

interface와 다르게 오류가 나지 않는다

 

 

 

But 미리 오류나지 않을 뿐

변수에 사용할 땐 오류남

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

let 야옹 : Cat = { name : 'kim' } //오류남

 

 

 

중복속성일때 오류를 어디서 잡아주는 지 약간 다른데

interface 사용할 때가 오류를 미리 잡아줘서 더 사용하기 편리하다.

 

 

 

 

예제1

array안에 여러개의 object들이 들어있는 경우 

interface 사용해서 타입 지정하기

interface Cart {
  product : string,
  price : number
}

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

 

 

예제2

object 중 일부에만 card 속성이 들어가야할 때

interface를 extends 해서 타입 만들기

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

interface Newcart extends Cart{
	card? : boolean
}

let 장바구니 : Newcart = [
{ product : '청소기', price : 7000 },
{ product : '삼다수', price : 800 }, 
{ product : '정수기', prcie : 1000, card : false}
]

card 라는 속성은 선택적으로 사용해야 하므로

card 뒤에 ' ? ' 붙여줘야 한다.

 

 

 

예제3

object 안에 함수 들어있는 경우

plust 함수는 파라미터 두개를 더하는 값을 return,

minus 함수는 파라미터 두개를 빼는 값을 return 

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

let 연산자: Calc = {
  plus(a, b) {
    return a + b;
  },
  minus(a, b) {
    return a - b;
  },
};

* 함수에 타입 지정하는 법은 화살표함수 모양으로 만들면 됐었다 (복습 필요!!)

( 파라미터 : 파라미터 타입지정 ) => return값 타입지정