[TypeScript] 인터페이스(interface) / Type과의 차이점

 

인터페이스(Interface)

상호간의 정의한 약속 또는 규칙을 의미한다.

미리 내부를 정의해 두는 것

 

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

function printUser(user: User) {
  console.log(user.name, user.age);
}

const user = { name: 'jay', age: 22 };
printUser(user);

 

옵션 속성 (Optional)

일부 속성을 사용하지 않을 경우 ?을 사용하여 옵션 속성을 지정할 수 있다.

 

  interface User {
    name: string;
    age?: number;
  }
  
  function printUser(user: User) {
    console.log(user.name);
  }
  
  const user = { name: 'jay'};
  printUser(user);

 

익명 인터페이스

인터페이스를 미리 선언해놓지 않고 익명으로 작성할 수도 있다.

const person: {
  name: string,
  age?: number
} = {
  name: 'Jay',
  age: 100
}

 

대수 관계

여러 자료형의 값을 가질 수 있게 할 수 있다.

원시타입의 값에서는 &을 사용할 순 없지만 객체에서는 &을 사용할 수 있다.

interface Name {
  name: string;
}

interface Age {
  age: number;
}

let Jay: Name & Age = {
  name: 'Jay',
  age: 100
}

 

읽기 전용 속성

처음 인터페이스를 생성할때 값을 할당하고 이후에는 변경할 수 없는 속성

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

  
  const user:User = { name: 'jay', age: 20};
  user.name = "hey"; // error

 

 

Partial, Required, Pick, Omit

기존의 interface를 재활용하여 사용할 수 있다.

interface User {
  id: number;
  name: string;
  age: number;
  createdAt?: string;
  updatedAt?: string;
}

// 모든 필드가 Optional이 된다.
const partial: Partial<User> = {}

// 모든 필드가 Required가 된다.
const required: Required<User> {
  id: 1,
  name: "Jay",
  age: 100,
  createdAt: '',
  updatedAt: ''
}

// 특정 필드만 골라서 사용할 수 있다.
const pick: Pick<User, 'name' | 'age'> = {
  name: "Jay",
  age: 100
}

// 특정 필드만 빼고 사용할 수 있다.
const omit: Omit<User, 'id' | 'createdAt' | 'updatedAt'> = {
  name: "Jay",
  age: 100,
}

 

확장

인터페이스를 상속받아서 사용할 수 있다.

  interface User {
    id: string;
    pw: string;
  }

  interface loginUser extends User{
    isLogin: boolean;
  }

 

클래스에서의 인터페이스

implements 키워드를 사용하여 class에 인터페이스를 지정할 수 있다.

  interface User {
    name: string;
    greeting(message: string):void;
  }

  class MyUser implements User {
    name: string = 'Jay';
    greeting(message :string): void {
      console.log(message)
    }
  }

  const myUser = new MyUser();
  myUser.greeting('Hello');

 

 

인터페이스(Interface)와 타입(Type)의 차이점?

인터페이스를 살펴보니 type과 같은 기능을 하는 것 같은데

타입과 다른 점은 무엇일까?

 

선언적인 확장 가능

인터페이스는 같은 이름으로 선언시 컴파일 시점에서 확장시켜준다.

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

  const user:User = { name:"Jay", age: 20 };

 

 

객체에만 사용 가능

인터페이스는 객체에서만 사용이 가능하다.

  type Name = string; // OK
  interface Nickname = string; // error

 

computed Value 사용 불가

인터페이스는 type에서 사용할 수 있는 computed Value를 사용할 수 없다.

interface NameInterface {
  [key in names]: string; // error
}

 

 

이 외에 타입 합성의 경우 모든 구성요소에 대한 타입을 체크하기 때문에

무조건 객체 타입을 생성하는 interface에 비해 성능적인 부분에서 좋지 않다고 한다.

 

 

 

 

 

참고:

https://yceffort.kr/2021/03/typescript-interface-vs-type

https://joshua1988.github.io/ts/guide/interfaces.html#%ED%81%B4%EB%9E%98%EC%8A%A4-%ED%83%80%EC%9E%85