[매일메일] 타입스크립트의 타입과 인터페이스 차이? (FE.250123)

• 타입스크립트(TypeScript)란?
  • 자바스크립트의 슈퍼셋(자바스크립트의 모든 기능을 포함하면서, 추가 기능을 제공한다.) 이다.
  • 정적 타입을 제공함. (변수나 함수의 타입을 코드가 실행되기 전 컴파일 단계에서 미리 확인할 수 있음.)
  • 코드의 안정성과 가독성을 높여줌.
  • 정적 타입을 정의하기 위해 타입과 인터페이스를 사용하고, 데이터 구조와 타입을 명시함.
• 타입(Type)이란?
  • 복잡한 타입 정의 및 조항을 표현하는 데 용이함.
  • type으로 선언한 경우, 동일한 이름을 중복 선언하면 에러가 발생함.
  • 튜플 같은 복잡한 타입 표현이 가능하고, 복잡한 타입 조합을 위해 인터섹션(&)과 유니온(|) 연산자 지원.

  • type BasicInfo = {
      name: string;
      age: number;
    };
    
    type ContactInfo = {
      email: string;
      phone: string;
    };
    
    // 인터섹션 타입 (&)을 사용해 두 타입을 결합하여 하나의 타입으로 생성
    type PersonInfo = BasicInfo & ContactInfo;
    
    const person2: PersonInfo = {
      name: "John",
      age: 30,
      email: "john@example.com",
      phone: "123-456-7890",
    };

  • 타입 별칭(Type Alias) 정의에 사용함
    • 기본 타입(Primitive Type), 복합 타입(Complex Type), 유니언 타입(Union Type), 함수 타입(Function Type) 등 어떤 타입이든 이름 붙일 수 있음
    • 복잡한 타입을 이름으로 표현해서 코드의 가독성을 올림.
    • 여러 곳에서 동일한 타입을 반복적으로 사용해야할 때 별칭으로 간편하게 재사용 가능.
    • 아래 예시를 보면 무슨 말인지 감이 온다. 코드 짤 때 내가 하고 있던 게 타입 별칭이구나 싶을 것.

    • // 기본 타입에 별칭 붙이기
      type ID = string; // string 타입에 'ID'라는 별칭을 부여
      type Age = number;
      
      const userId: ID = "user_123";
      const userAge: Age = 25;
      
      //객체 타입에 별칭 붙이기
      type User = {
        name: string;
        age: number;
        isAdmin: boolean;
      };
      const admin: User = {
        name: "Alice",
        age: 30,
        isAdmin: true,
      };
      
      //유니언 타입에 별칭 붙이기
      type Status = "active" | "inactive" | "banned";
      let userStatus: Status = "active";
      // userStatus = "deleted"; // ❌ 오류: 'deleted'는 Status 타입에 포함되지 않음
      
      //배열 타입에 별칭 붙이기
      type StringArray = string[];
      const colors: StringArray = ["red", "green", "blue"];
      
      //함수 타입에 별칭 붙이기
      type AddFunction = (a: number, b: number) => number;
      const add: AddFunction = (x, y) => x + y;
      
      //교차 타입에 별칭 붙이기
      type BasicInfo = {
        name: string;
        age: number;
      };
      type ContactInfo = {
        email: string;
        phone: string;
      };
      type User = BasicInfo & ContactInfo; // 교차 타입
      const user: User = {
        name: "Bob",
        age: 25,
        email: "bob@example.com",
        phone: "123-456-7890",
      };

• 인터페이스(Interface)란?
  • 객체 형태를 확장하는 데 용이함. (튜플, 인터섹션, 유니온 등 사용)
  • interface를 여러 번 선언할 수 있고, 자동적으로 하나의 interface로 병합됨. (선언 병합, declaration merging)
  • extends 키워드를 사용해서 속성을 상속받을 수 있음.
  • 객체의 구조를 정의하거나, 클래스와 상호작용이 필요한 경우 사용함.
  •  
  • interface Person { age: number; name: string; isBirthday: boolean; } interface Person { address: string; } const person1: Person = { age: 1, name: "abcd", isBirthday: false, address: "1010", };

  • interface BasicUser {
      name: string;
      age: number;
    }
    
    interface AdminUser extends BasicUser {
      isAdmin: boolean;
    }

---

출처

[1] 매일메일. 250123. 타입스크립트에서 타입과 인터페이스의 차이점 이해하기. 58번. https://maeil-mail.kr

[2] F-lab. https://f-lab.kr/insight/typescript-type-vs-interface-20240801?gad_source=1&gad_source=1&gclid=Cj0KCQiAs5i8BhDmARIsAGE4xHwNInBLKRs3N4UC8MmWPHxUB6qvBo9LhNWqlFQJ0zHBGlwgZL5j6tkaAm5oEALw_wcB

[3] gpt에게 typescript, type, interface, type alias에 대해 묻다.