타입스크립트에서 object와 interface

잔잔바리한접시·2022년 6월 14일
1

typescript

목록 보기
6/7

object

타입스크립트에서 object 타입은 인터페이스와 클래스의 상위 타입입니다.
object타입으로 선언된 변수는 number, boolean, string 등 다른 타입의 값을 가질 수 없지만, 속성 이름이 다른 객체를 모두 담을 수 있습니다.

예시

let user: object = {name: "hoon", age: 26};

위 코드에서 object 타입은 객체를 대상으로 하는 any 타입처럼 동작합니다. 즉, object 안에 있는 속성들의 타입을 검사하지 않습니다. 이를 타입스크립트스럽게 동작하게 하기 위해 인터페이스 구문이 사용됩니다.

interface

타입스크립트는 객체의 타입을 정의할 수 있게 해주는 interface라는 키워드를 제공합니다.

기본 구조

interface 인터페이스 이름{
	속성 이름: 속성 타입
    속성 이름: 속성 타입
}

예시

interface IPerson{
	name: string
  	age: number
}

IPerson 인터페이스를 자세히 보겠습니다.

IPerson 인터페이스의 목적은 name과 age라는 속성이 둘 다 있는 객체만 유효하도록 하는 것 입니다.

예시

interface IPerson{
	name: string
  	age: number
}

let user1: IPerson = {name: 'hoon', age: 26} // 통과

let user2: IPerson = {name: 'nam'} // age 속성이 없으므로 error
let user3: IPerson = {age: 27} // name 속성이 없으므로 error
let user4: IPerson = {} // name과 age 속성이 모두 없으므로 error
let user5: IPerson = {name: 'young', age: 30, gender: 1} 
// gender 속성이 있어서 error

선택 속성 구문

인터페이스를 설계할 때 어떤 속성은 필수적으로 존재하여야 하지만, 어떤 속성은 선택적으로 존재하게 설계하고 싶을 때가 있습니다. 이러한 속성을 선택 속성(optional property)이라고 합니다.

예시

interface IPerson{
	name: string
  	age: number
  	gender?: number
}

let user1: IPerson = {name: 'hoon', age: 26} // 통과
let user5: IPerson = {name: 'young', age: 30, gender: 1} // 통과

익명 인터페이스

타입스크립트에서는 interface 속성을 사용하지 않고 인터페이스의 이름조차 없는 인터페이스를 만들 수 있습니다. 이를 익명 인터페이스(anonymous interface)라고 합니다.

예시

let user: {
	name: string
  	age: number
  	gender?: number
} = {name: 'hoon', age: 26}

이러한 익명 인터페이스는 주로 함수를 구현할 때 사용합니다.


let user: {
	name: string
  	age: number
  	gender?: number
} = {name: 'hoon', age: 26}

function callMe(me: {name: string, age: number, gender?: number}){
	console.log(
    	me.gender ?
      		`${me.name} ${me.age} ${me.gender}` : 
      		`${me.name} ${me.age}`
    )
}

callMe(user); // hoon 26

0개의 댓글