TypeScript

[TypeScript] 타입스크립트 익히기 2탄

Hoon1994 2020. 12. 8. 21:38

 

✏️TypeScript 타입스크립트를 익히기 2탄

 

 

타입스크립트, 저번에는 기본 타입에 대해서 포스팅했는데, 오늘은 TypeScript에서 지원해주는 

interface에 대해서 포스팅하고자 한다.

 

잠시 기본 타입에 대해서 짚고 넘어가면, 

 

const name: string = 'hoon'

 

위와 같이 선언하면 name에는 string 값만 받겠다는 뜻이고, 다른 타입이 들어갈 경우 name아래 빨간 줄이 

그어지며 "해당 형식은 string 형식에 할당할 수 없습니다." 등의 에러 메시지가 보여진다. 

 

타입을 지정해주는 것, 그게 타입스크립트다. 

 

그러면, 저렇게 한 줄 코드가 아니라 여러 인자를 받는 함수가 있다고 가정해보자.

 

const user:{ name: string, age: number, gender: string } = {
  name: 'hoon',
  age: 27, 
  gender: 'male'
}

 

이전 포스팅대로라면 이렇게 선언할 수 있을 것 같다. 하지만 이런 객체가 많고, 또 중복되는 경우에는 어떻게 할까? 

그런 경우 interface를 미리 지정해놓고, 사용할 수 있다.

 

interface User {
  name: string,
  age: number,
  gender: string
}

const hoon:User = {
  name: 'hoon',
  age: 27, 
  gender: 'male'
}

 

또한, interface는 확장이 가능하다.

 

interface User {
  name: string,
  age: number,
  gender: string
}

interface UniqueUser extends User {
	isUnique: boolean;
}

const hoon:UniqueUser = {
  name: 'hoon',
  age: 1,
  gender: 'male',
  isUnique: false,	
}

 

개발하면서, 이런 인터페이스를 용이하게 사용할 수 있을 것 같다. 

더불어 인터페이스와 비슷한 "타입"이 있는데, 정말 비슷하지만 타입은 확장이 가능하지가 않다. 

 

type User = {
  name: string;
  age: number;
}

const hoon:User = {
  name: 'hoon',
  age: 27
}

 

2탄 끝!