type 키워드와 interface 키워드

이전의 포스팅에서 타입스크립트의 기본 타입들에 대해서 알아보았다. 하지만 기본 타입만으로는 타입스크립트를 우리가 원하는 대로 다룰 수는 없다. 조금 더 복잡한 타입을 다룰 수 있어야 한다.

그래서 생겨난 것이 type 키워드와 interface 키워드이다.

---

type

쉽게 말하면 타입스크립트의 타입에 이름을 지어주는 역할을 한다.

type NewStringType = string;

NewStringType은 타입스크립트에서 string 타입으로 지정이 되었다. 그래서 앞으로 NewStringType의 명칭을 가지고 우리가 원하는 변수에 타입을 지정해줄 수 있다.

type NewNullType = null;
type NewNumberType = number;

이와 같이 타입스크립트에 존재하는 모든 타입들을 다른 명칭으로 사용할 수 있다.

const stringVar: string = 'test';
const stringVar2: NewStringType = 'test';

앞서 살펴본 개념으로 NewStringType을 string 타입으로 선언했기 때문에 변수에 타입을 지정해줄 수 있다.

객체에서는 어떻게 타입을 사용할 수 있을까?

type SingerType = {
  name: string;
  year: number;
};

SingerType은 name과 year 프로퍼티가 존재해야 하는 오브젝트임을 나타낸다. 이것을 활용하는 예제를 살펴보자.

const taeYeon: {
  name: string;
  year: number;
} = {
  name: '태연',
  year: 1989,
} // 이것보단

const taeYeon: SingerType = {
  name: '태연',
  year: 1989,
} // 이렇게

타입 부분에 SingerType을 사용하지 않아도 우리가 직접 오브젝트 타입을 선언해줄 수 있다.
하지만 이 방법은 매번 변수를 선언할 때 작성해줘야 하는 번거로움이 있다. 그래서 객체 부분을 따로 빼서 SingerType으로 만들어 두면 편리하다. 이것은 타입이 복잡해질 수록 굉장히 유용하게 쓰일 것 같다!

---

interface

interface 키워드는 type 키워드와 유사한 기능이 많다. interface는 type이 하지 못하는 문제점들을 해결하기 위해 생겼다. 하지만 interface가 type의 모든 기능을 포함한다는 얘기는 아니다.

type SingerType = {
  name: string;
  year: number;
};
interface SingerInterface {
  name: string;
  year: number;
}
const taeYeon2: SingerInterface = {
  name: '태연',
  year: 1989,
}

위 코드에서 만든 SingerInterface와 앞서 만든 SingerType은 동일한 의미를 가진다.

type NewStringType = string;
type NewNumberType = number;

interface SingerIF {
  name: NewStringType;
  year: NewNumberType;
}
const taeYeon3: SingerIF = {
  name: '태연',
  year: 1989,
}

이렇게 interface 안에 새로 만든 타입을 넣을 수도 있다.

Optional

객체를 선언하다 보면 있어도 되고, 없어도 되는 프로퍼티를 정의를 하고 싶을 때가 있다. 그럴 땐 해당 프로퍼티 뒤에 ?를 추가해주면 된다.

interface SingerOptional {
  name: string;
  year?: number;
}
const taeYeon4: SingerOptional = {
  name: '태연',
} // O
const taeYeon5: SingerOptional = {
  name: '태연',
  year: 1989,
} // O

year을 선언하지 않더라도 에러가 발생하지 않는다. 그리고 year 프로퍼티를 추가해줘도 에러는 발생하지 않는다. 이 optional은 type 키워드에서도 사용할 수 있다.

type SingerType = {
  name: string;
  year?: number;
};

후기

타입을 선언할 때 사용하는 type과 interface 키워드에 대해 알아보았다. 타입을 선언해서 다른 타입에 할당하는 개념이 변수와 비슷하다고 느꼈다.