기술/TypeScript

Interface vs Type 타입을 지정하는 또 다른 방법

빔네모 2023. 12. 21. 02:32

 

1. Interface란?

인터페이스는 객체, 클래스, 함수 타입을 지정하는 또 다른 방법 중 하나이다. 

//객체 타입을 지정하는 여러가지 방법

let person: { name: string; age: number } = { name: 'John', age: 30 };

type TPerson = { name: string; age: number };
let person: TPerson = { name: 'John', age: 30 };

interface IPerson {
  name: string;
  age: number;
}
let person: IPerson = { name: 'John', age: 30 };

 

보통 인터페이스는  I 를 붙여 명명한다.

interface I인터페이스_이름 {
  속성?: 타입;
}

 

2. 타입과 인터페이스의 차이

type Team = "red" | "blue" | "yellow"
//타입이 특정값을 갖도록 제한할 수 있음

//인터페이스 : 오직 한 가지의 용도. 오브젝트의 모양을 정해줌
interface Player {
	nickname: string,
	team:Team //Team이 red,blue,yellow만 가능
}

인터페이스와 타입은 거의 유사하게 동작하는 것처럼 보이지만  몇가지 차이점이 있다.

type은 다시 열어 새 속성을 추가할 수 없는 반면 인터페이스는 확장 가능하다.

 

interface User {
	name:string
}

interface Player extends User { //굳이 언급 안해도 상속 가능
	//name:string
}

 

타입도 확장과 비슷하게 &(intersection) 을 사용하여 구현할 수 있는데 타입의 속성이 중복일때 차이가 있다. 

interface IAnimal { 
  name :string 
} 
interface IDog extends IAnimal { 
  legs :number //확장
}

type TAnimal = { 
  name :string 
} 
type TDog = TAnimal & { legs: number } //속성 합치기 

//인터페이스도 & 사용 가능
interface IStudent {
  name :string,
}
interface ISubject {
  age :number
}

let classtime :IStudent & ISubject = { name : 'kim', age : 90 }

인터페이스의 경우 중복 선언하면 타입을 합쳐준다.(상속한것과 동일하게 동작)

//인터페이스 중복 선언
interface IUser {
	firstName: string;
}
interface IUser {
	lastName: string;
}
const nemo:IUser {
	firstName: "nemo"
	lastName: "bim";
} //알아서 합쳐줌. 타입으로는 불가능

//중복선언시 에러
type TAnimal = { 
  name :string 
} 
type TAnimal = { 
  legs :number 
}

//속성이 중복되는건 에러
interface IAnimal { 
  name :string 
} 
interface IBug extends IAnimal { 
  name :number 
}

//&로 합치는데 속성값이 다른 경우
interface IAnimal { 
  name :string 
} 
interface Ibug { 
  name :number
} 

let 변수 :IAnimal & Ibug = { name : '거미' } //never
//key가 같고 타입이 다른 경우에는 never, 둘다 같은 경우에는 합쳐줌, 오류 없음!