interface object 타입지정

타입스크립트(TypeScript)는 자바스크립트(JavaScript)에 비해 타입을 엄격하게 처리하므로 변수 또는 객체를 선언할 때, 타입을 정의해야 합니다.

 

객체의 타입을 정의하는 방법은 interface와 type이 존재하는데, 대부분의 TypeScript 개발자들은 확장성이 좋은 interface 사용을 권장합니다.

 

하지만, 타입이 심플하거나 절대 변경되지 않는 경우에는 type을 사용하여 객체의 타입을 정의하기도 합니다.

 

 

type Square = { color: string; width: number }; //type키워드로 타입지정

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

interface Square {
  color: string;
  width: number;
} //interface키워드로 타입지정

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

 

 

interface 장점 :extends로 복사가능

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

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

각각 interface 만드는 게 아니라 Student에 있는 거를 복사해서 집어넣음.

 

 

 

type 키워드와의 차이점

type alias와 interface는 거의 똑같은 기능을 제공.

차이는 extends 문법이 약간 다름.

interface Animal {
  name :string
}
interface Cat extends Animal {
  legs :number
}

interface의 경우 일반적으로 이렇게 extends 

 

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

type alias의 경우 extends는 안되고 & 기호를 쓰면 object 두개를 합칠 수 있습니다. (intersection. 교차 타입)

이러면 Cat 타입은 name, legs 속성을 가질 수 있습니다.

 

그리고

 

interface 는 중복선언 가능

interface Animal { 
  name :string 
} 
interface Animal { 
  legs :number 
}

Animal 타입은 name, legs 속성을 가질 수 있음.

 

 

type 은 중복선언 불가능

type은 에러남. 엄격!

 

 

 

실습 1) interface 이용해서 간단하게 타입지정

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

 

 

실습 2) array 안에 object 여러 개가 필요합니다. (array 타입지정)

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

 

 

실습 3) 위에서 만든 타입을 extends하기

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

 

 

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

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

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

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

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