Typescript(타입스크립트) Interfaces 이해하기

타입스크립트는 정적으로 타입이 지정된 자바스크립트의 상위 집합으로, 개발자가 보다 유지 관리가 용이하고 확장 가능한 코드를 작성할 수 있도록 도와준다. 타입스크립트의 주요 기능 중 하나는 객체의 구조를 설명하는 방법을 제공하는 인터페이스를 사용할 수 있다는 점이다.

이 글에서는 타입스크립트 인터페이스의 기본 사항과 이를 사용하여 보다 견고하고 구조화된 코드를 작성하는 방법을 살펴본다.

타입스크립트 인터페이스란?

타입스크립트에서 인터페이스는 객체, 클래스 및 함수의 형태를 설명하는 데 사용된다. 인터페이스는 유형에 대한 속성, 메서드 및 이벤트의 청사진을 정의한다. 인터페이스를 정의하면 해당 유형의 객체에서 예상되는 속성, 메서드 및 이벤트를 지정한다.

예를 들어 이름, 나이, 이메일이 있는 사용자 개체를 만든다고 한다면, 이 사용자 개체에 대한 인터페이스를 다음과 같이 정의할 수 있다.

interface User {
  name: string;
  age: number;
  email: string;
}

타입스크립트 인터페이스 사용

인터페이스를 정의한 후에는 코드에서 이를 사용하여 인터페이스를 준수해야 하는 변수와 객체를 정의할 수 있다. 예를 들어

const user: User = {
  name: "John Doe",
  age: 32,
  email: "[email protected]"
};

인터페이스에 설명되지 않은 속성을 가진 변수를 정의하려고 하면 컴파일 타임 오류가 발생한다.

const user: User = {
  name: "John Doe",
  age: 32
};

error: Type '{ name: string; age: number; }' is not assignable to type 'User'.
  Property 'email' is missing in type '{ name: string; age: number; }'.

타입스크립트 인터페이스의 선택적(Optional) 속성

경우에 따라 인터페이스에서 속성을 선택 사항으로 만들고 싶을 수 있다. 이 경우 속성 정의에서 ?을 사용하면 된다.
예를 들어

interface User {
  name: string;
  age: number;
  email?: string;
}

이 변경으로 이제 email 속성 없이 사용자 객체를 생성할 수 있다.

const user: User = {
  name: "John Doe",
  age: 32
};

타입스크립트 인터페이스 확장하기

타입스크립트에서 인터페이스를 확장할 수도 있다. 이를 통해 기존 인터페이스의 모든 프로퍼티와 메서드를 상속하고 필요한 경우 새 프로퍼티와 메서드를 추가할 수 있는 새로운 인터페이스를 만들 수 있다.

interface User {
  name: string;
  age: number;
  email?: string;
}

interface AdminUser extends User {
  role: string;
}

const admin: AdminUser = {
  name: "Jane Doe",
  age: 28,
  email: "[email protected]",
  role: "admin"
};

이 예제에서 AdminUser 인터페이스는 사용자 인터페이스를 확장하고 역할 속성을 추가한다.

결론

타입스크립트 인터페이스를 이해하고 활용하면 코드의 구조와 유지보수성을 크게 향상시킬 수 있다. 사용자 정의 데이터 유형을 정의하고, 특정 유형과 속성을 적용하고, 코드 재사용과 모듈화를 촉진할 수 있다. 이 문서에 설명된 단계를 따라 자신만의 인터페이스를 만들고 프로젝트에 통합하는 작업을 빠르게 시작할 수 있다. 타입스크립트를 처음 사용하든 숙련된 개발자이든 인터페이스를 워크플로에 통합하면 코드의 전반적인 품질을 크게 향상시킬 수 있다.