TypeScript Type과 Interface차이, 뭘 써야하나?

TypeScript는 JavaScript에 정적 타입 시스템을 도입함으로써, 개발자들이 더욱 안정적이며 유지보수가 용이한 코드를 작성할 수 있도록 지원하는 프로그래밍 언어입니다.

개발 과정에서 발생할 수 있는 많은 오류를 컴파일 시점에 미리 발견하고 수정할 수 있게 해줍니다.

TypeScript에서는 특히 type과 interface라는 두 가지 주요 구문을 통해 데이터의 구조를 명시적으로 정의할 수 있습니다.

 

 

Type과 Interface의 기본

Interface

• 객체의 구조를 정의하는데 주로 사용됩니다.
• 확장성이 뛰어나며, 같은 이름의 interface를 여러 번 선언하면 자동으로 병합됩니다.

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

interface User {
  isAdmin: boolean;
}

// User interface는 name, age, isAdmin 속성을 모두 가집니다.

 

interface Animal {
  name: string;
}

interface Bear extends Animal {
  honey: boolean;
}

const bear: Bear = { name: "Winnie", honey: true };

 

확장성 있는 객체 타입 정의:

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

// 확장하여 새로운 인터페이스 생성
interface Admin extends User {
  permissions: string[];
}

const admin: Admin = {
  name: "John Doe",
  age: 30,
  permissions: ["create", "edit", "delete"]
};

 

선언 병합을 사용한 확장:

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

// 같은 이름의 인터페이스로 추가 속성 선언
interface Employee {
  department: string;
}

// Employee는 이제 name, age, department 속성을 모두 가짐
const employee: Employee = {
  name: "Jane Doe",
  age: 28,
  department: "HR"
};

 

 

Type

• 기본 타입, 유니온, 인터섹션, 튜플 등 다양한 타입의 조합을 생성할 때 사용됩니다.
• interface에 비해 유연하지만, 확장할 수는 없습니다.

type Animal = {
  species: string;
}

type Bear = Animal & { 
  honey: boolean; 
};

// Bear 타입은 species와 honey 속성을 가집니다.

 

type Action = "create" | "update" | "delete";
type Result = [boolean, Action];

 

유니온과 인터섹션 타입:

// 유니온 타입
type Status = "active" | "inactive" | "pending";

// 인터섹션 타입
type Person = {
  name: string;
  age: number;
};

type EmployeeDetails = {
  department: string;
  role: string;
};

type Employee = Person & EmployeeDetails;

const employee: Employee = {
  name: "Jane Doe",
  age: 28,
  department: "HR",
  role: "Manager"
};

 

기본 타입의 별칭:

type StringOrNumber = string | number;

let id: StringOrNumber = "10"; // 문자열 사용 가능
id = 10; // 숫자도 사용 가능

 

 

사용 시나리오 및 선택 기준

객체 지향적 설계

객체의 구조를 확장하면서 개발해야 하는 경우, interface의 확장성이 큰 장점이 됩니다.

객체 지향 프로그래밍 패턴을 적극적으로 사용한다면 interface를 우선적으로 고려해야 합니다.

 

복잡한 타입 모델링

type은 유니온이나 튜플, 그리고 기본 타입의 별칭을 사용하여 복잡한 타입을 쉽게 정의할 수 있습니다.

이러한 경우 type의 유연성이 더 유용할 수 있습니다.

 

성능 고려사항

일반적으로 type과 interface 사이에 성능 차이는 거의 없습니다.

하지만 매우 큰 규모의 프로젝트에서는 interface가 약간 더 나은 성능을 보일 수 있습니다.

이는 TypeScript 컴파일러가 interface를 최적화하는 방식 때문입니다.

 

Interface의 성능 이점

TypeScript 공식 팀은 객체의 구조를 정의할 때 interface 사용을 권장합니다.

이는 interface가 컴파일 시점에 더 효율적으로 처리될 수 있기 때문입니다.

interface는 컴파일러에 의해 최적화되어 있으며, 특히 객체의 타입 검사와 관련하여 type보다 더 빠르게 작동할 수 있습니다.

우리 팀의 결정: Type 사용

Visual Studio Code(VSCode)에서는 Command 키를 누르고 마우스를 인터페이스 위에 올렸을 때 미리보기가 가능하지만, IntelliJ IDEA에서는 그렇지 않아 인터페이스 정의를 직접 확인하기 위해 이동해야 합니다.

이러한 불편함은, 실제 작업 흐름에서 작지만 눈에 띄는 차이를 만들어냅니다.

또한, 우리 팀은 다양한 IDE를 사용하고 있어, 이러한 차이점이 더욱 부각되었습니다.

Type Alias는 IDE에서 미리보기를 더 잘 지원하는 경향이 있으며, 원치 않는 선언 병합을 방지하는 등의 장점을 가지고 있습니다.

반면, Interface는 확장성과 선언 병합을 통한 유연한 확장이 가능하지만, 이는 의도치 않은 오류를 발생시킬 수 있습니다. 

이러한 논의를 바탕으로, 우리 팀은 Type Alias를 사용하기로 결정했습니다.

이 결정은 다음과 같은 이유에서 비롯되었습니다:

1. 함수의 타입을 나타내는 데 더 직관적입니다.
2. IDE에서 미리보기를 더 잘 지원합니다.
3. 원치 않는 선언 병합을 방지합니다.

이 결정에는 다양한 자료와 경험담이 기여했으며, 특히 우아한형제들 기술 블로그의 글을 참고했습니다.