[TypeScript] Interface: 타입 지정하기

타입스크립트에서 타입을 지정하는 방법을 알려드리겠습니다.

const a = {
  name: "Kim",
  age: 24,
};

console.log(a);
//결과 : { name: 'Kim', age: '24' }

변수 a를 const로 선언하고 객체를 할당했을 때,

console.log로 변수 a를 출력하게 되면 다음과 같은 결과를 출력받게 됩니다.

 

이떄 타입스크립트에서는 Type을 지정할 수가 있습니다.

const a: { name: string; age: number } = {
  name: "Kim",
  age: 24,
};

console.log(a);

위의 코드와 같이 상수 a에 name은 문자열 age는 숫자형으로 명시해줌으로써 타입을 지정해줄 수가 있습니다.

타입을 지정할때에는 해당 상수, 변수에 :를 붙이고 중괄호 { } 를 이용해서 안에다가 명시할 수 있습니다.

근데 이렇게 타입을 지정할 경우, 여러개의 상수, 변수가 있다고 하면 일일이 타입을 지정해주기가 번거로운 문제가 있습니다.

이럴때 interface를 사용하여 쉽게 타입을 지정할 수가 있습니다.

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

const a: type = {
  name: "Kim",
  age: 24,
};

console.log(a);

먼저 interface를 사용하여 타입을 지정해줍니다.

그리고 상수 a의 타입을 인터페이스로 선언한 type으로 붙여주면 타입스크립트에서 쉽게 타입을 지정할 수가 있습니다.

---

그런데 만약 타입에 없는 속성을 추가하고 싶거나, 타입에 있는 속성이지만 객체에는 넣고 싶지 않다면 어떻게 해야할까요?

interface User {
  email: string;
  isActive: boolean;
}

const kim: User = {
  email: "kim@email.com",
};

const lee = {
  email: "lee@email.com",
  isActive: true,
};

console.log(kim);
console.log(lee);

이렇게 코드를 구성하면 kim상수에서는 isActive 속성이 없기 때문에 오류가 발생하게 됩니다.

이럴 때에는 isActive뒤에 ?를 사용하여 넣어도 되고 안넣어도 되고 상관없는 식으로 코드를 구성하시면 됩니다.

interface User {
  email: string;
  isActive?: boolean;
}

const kim: User = {
  email: "kim@email.com",
};

const lee = {
  email: "lee@email.com",
  isActive: true,
};

console.log(kim);
console.log(lee);

그러면 코드를 실행하였을때

{ email: 'kim@email.com', isActive: false }

{ email: 'lee@email.com', isActive: true }

문제없이 잘 돌아가게 됩니다.