본문으로 건너뛰기

Interface와 Class의 차이

질문​

TypeScript에서 Interface와 Class는 어떤 차이가 있나요?

답변 초안​

Interface와 Class 모두 객체의 형태를 정의할 수 있지만 목적이 다릅니다.

Interface는 객체의 구조와 타입을 정의하기 위한 타입 선언이며, 컴파일 후 JavaScript 코드에서 제거됩니다.

반면 Class는 객체를 생성하기 위한 설계도로, 실제 JavaScript 코드로 변환되어 런타임에도 존재합니다.

즉, Interface는 타입 체크를 위한 도구이고, Class는 상태와 동작을 가진 객체를 생성하기 위한 문법입니다.

예시​

Interface​

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

const user: User = {
  name: 'Kim',
  age: 25,
};

Interface는 객체가 어떤 프로퍼티를 가져야 하는지 정의합니다.

Class​

class User {
  constructor(
    public name: string,
    public age: number
  ) {}

  greet() {
    console.log(`안녕하세요 ${this.name}`);
  }
}

const user = new User('Kim', 25);

Class는 객체를 생성할 수 있으며, 메서드와 상태를 함께 관리할 수 있습니다.

주요 차이점​

InterfaceClass
타입 정의 목적객체 생성 목적
컴파일 후 제거됨JavaScript 코드로 남음
인스턴스 생성 불가new 키워드로 생성 가능
속성과 메서드의 형태만 정의속성과 메서드 구현 가능
런타임에 존재하지 않음런타임에 존재함

언제 사용하는가?​

Interface​

interface ApiResponse {
  id: number;
  name: string;
}
  • API 응답 타입 정의
  • 함수 매개변수 타입 정의
  • React Props 타입 정의
  • 객체 구조 명세

Class​

class UserService {
  getUser() {
    // ...
  }
}
  • 객체 생성이 필요한 경우
  • 상태와 동작을 함께 관리하는 경우
  • 상속(extends)이나 다형성을 활용하는 경우

실무 주의점​

  • React 프로젝트에서는 대부분 Interface 또는 Type Alias로 타입을 정의하며 Class 사용 빈도는 높지 않습니다.
  • Interface는 타입 시스템에서만 동작하므로 런타임에는 존재하지 않습니다.
  • instanceof는 Class에는 사용할 수 있지만 Interface에는 사용할 수 없습니다.
class User {}

const user = new User();

console.log(user instanceof User); // true
interface User {
  name: string;
}

user instanceof User; // 불가능

면접 답변​

"Interface는 객체의 구조를 정의하기 위한 타입 선언이며 컴파일 후 제거됩니다. 반면 Class는 객체를 생성하기 위한 설계도로 JavaScript 코드로 변환되어 런타임에도 존재합니다. 따라서 Interface는 타입 체크 목적, Class는 상태와 동작을 가진 객체 생성 목적이라는 차이가 있습니다. 프론트엔드 실무에서는 API 응답이나 Props 타입 정의에는 Interface를 주로 사용하고, 객체 생성이나 상속이 필요한 경우에 Class를 사용합니다."

참고 자료​

  • TypeScript Handbook - Interfaces
  • TypeScript Handbook - Classes