[타입스크립트] 인터페이스와 타입

인터페이스와 타입의 특성에 대해 알아보자.

 

1. primitive type rename

인터페이스는 primitive type으로 선언은 불가능하지만, 타입은 가능하다. 인터페이스는 오직 object type을 선언할 때만 사용할 수 있다.

// ❌ 불가능 
interface InterfaceString = string; 
interface InterfaceString extends string; 
 
// ✔ 가능 
type TypeString = string;

 

2. 확장

인터페이스는 동일한 이름을 사용해서 확장이 가능하다. 

// ✔ 가능 
interface Fruit { 
  apple: string 
} 
 
interface Fruit { 
  banana: string 
} 
 
const fruits: Fruit = { 
  apple: '사과', 
  banana: '바나나', 
}

 

 

동일한 이름으로 확장 할 때, 프로퍼티의 타입을 늘려줄 수는 없다.

// ❌ 불가능 
interface Fruit { 
  apple: string 
} 
 
interface Fruit { 
  apple: string | number 
} 
 
 // Error : Subsequent property declarations must have the same type.   
 // Property 'apple' must be of type 'string', but here has type 'string | number'.ts(2717)

 

 

타입은 인터페이스 처럼 동일한 이름을 사용해서 확장할 수 없다.

// ❌ 불가능 
type Fruit = { 
  apple: string 
} 
type Fruit = { 
  banana: string 
} 
  // Error: Duplicate identifier 'Fruit'.

 

대신, & (intersections : 교차) 를 사용해서 확장할 수 있다.

// ✔ 가능 
type Apple = { 
  apple: string 
} 
type Banana = { 
  banana: string 
} 
type Fruit = Apple & Banan & { 
  orange: string 
} 
 
const fruit: Fruit = { 
  apple: '사과', 
  banana: '바나나', 
  orange: '오렌지', 
}

 

3. 확장 - 상속

인터페이스는 extends를 사용해서 상속받을 수 있다.

// ✔ 가능 
interface Apple { 
  apple: string 
} 
interface Banana { 
  banana: string 
} 
interface Fruit extends Apple, Banana { 
  orange: string 
} 
 
const fruit: Fruit = { 
  apple: '사과', 
  banana: '바나나', 
  orange: '오렌지', 
}

특이한 점은, type으로 부터도 상속받을 수 있다.

// ✔ 가능 
type Apple { 
  apple: string 
} 
type Banana = { 
  banana: string 
} 
interface Fruit extends Apple, Banana { 
  orange: string 
} 
 
const fruit: Fruit = { 
  apple: '사과', 
  banana: '바나나', 
  orange: '오렌지', 
}

타입은 인터페이스나 다른 타입을 상속받을 수 없다. 그러나 인터페이스를 intersection(&)으로 사용할 수는 있다.

// ❌ 불가능 
interface Apple { 
  apple: string; 
} 
type sonApple extends Apple {...} 
 
interface Banana { 
  banana: string; 
} 
type sonBanana implements Banana {...} 
 
// ✔ 가능 
interface Apple { 
  apple: string 
} 
type Fruit = Apple & { 
  banana: string 
}

 

인터페이스를 타입으로 변환할 수 있고, 타입을 인터페이스에서 상속받을 수 있다.

// ✔ 가능 
interface Apple { 
  apple: string; 
} 
 
type TypeApple = Apple; 
 
interface Fruit extends TypeApple { 
  banana: string; 
}