#5. 인터페이스

※ 이 강의는 이정환 강사님의 '한 입 크기로 잘라먹는 타입스크립트'를 수강 후 정리한 글입니다.

 

 

인터페이스

• 타입에 이름을 지어주는 문법
• '타입 별칭'과 유사하며 대체적으로 기능 역시 거의 동일함

 

선택적 프로퍼티 / 읽기 전용 프로퍼티

interface Person {
 name: string;
 age?: number;
 readonly hobby: string;
}

const person:Person = {
 name: "이정환",
 // age: 27,
 hobby: "개발"
}

person.hobby = "뜨개질" // 에러! 수정 불가능

 

 

메서드 타입 정의 

interface Person {
  readonly name : string;
  age?: number;
  
  // 메서드 정의
  sayHi : () => void; 
}

 

 

메서드 오버로딩

• '함수 표현식'으로 정의된 메서드는 오버로딩 불가능
• 호출 시그니처는 가능! 

//잘못된 코드
interface Person {
	readonly name: string;
    age?:number;
    sayHi: () => void;
    
    // 오버로딩
    sayHi: (a:number, b:number) => void // 에러!
}

//옳은 코드
interface Person{
	readonly name: string;
    age?:number;
    sayHi() : void // 호출 시그니처로 메서드 정의
    
    //오버로딩
    sayHi(a:number): void;
    sayHi(a:number, b:number) : void;
}

 

 

하이브리드 타입 정의

interface Func2 {
  (a: number): string;
  b: boolean;
}

const func: Func2 = (a) => "hello";
func.b = true;

 

 

※ 주의할 점

• 타입 별칭과 달리, Union이나 Intersection 타입을 정의할 수 없음.
• 위 타입 정의가 필요할 경우, 타입 별칭과 함께 사용하거나 타입 주석에서 직접 사용해야 함.

type Type1 = number | string; // 가능
type Type2 = number & string; // 가능

// 에러
interface Person = {
  name: string;
  age: number;
} | number 


// 올바른 사용법
const person:Person & string = {
  name: "이정환",
  age: 27
}

 

 

인터페이스 확장

• 하나의 인터페이스를 다른 인터페이스들이 상속받아 중복된 프로퍼티를 작성하지 않도록 도와주는 문법
• 'interface B extends A' 형태로 사용

interface Animal {
  name: string;
  color: string;
}

interface Dog extends Animal {
  breed: string;
}

interface Cat extends Animal {
  isScratch: boolean;
}

interface Chicken extends Animal {
  isFly: boolean;
}


const dog: Dog = {
  name: "돌돌이",
  color: "brown",
  breed: "진도"
}

 

• 확장과 동시에 프로퍼티 타입을 재정의 하는 것도 가능함.
  • 주의점: 원본타입이 재정의 타입의 슈퍼타입이어야 한다!

interface Animal {
  name: string;
  color: string;
}

interface Dog extends Animal {
  name: "doldol"; // 타입 재정의
  breed: string;
}

interface Cat extends Animal {
  name: number; // 에러!
  isScratch: true;
}

 

 

타입 별칭 확장 / 다중 확장

// 타입 별칭(객체) 확장
type Animal = {
  name: string;
  color: string;
};

interface Dog extends Animal {
  breed: string;
}

//------------------------------------------
// 다중 확장
interface DogCat extends Dog, Cat {}

const dogCat: DogCat = {
  name: "",
  color: "",
  breed: "",
  isScratch: true,
};

 

 

인터페이스 선언 합치기

• 타입 별칭과 달리, 동일 스코프 내에 같은 이름으로 중복 선언이 가능함
• 중복 선언된 인터페이스들은 모두 하나로 합쳐짐.

interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = {
  name: "이정환",
  age: 27,
};

• 주의점: 같은 이름의 인터페이스들이 같은 이름의 프로퍼티는 모두 같은 타입으로 정의되어야 함.
  => 다르게 정의된 경우를 '충돌' 이라고 함. 선언 합침시 충돌은 허용되지 않음.

interface Person {
  name: string;
}

interface Person {
  name: number; // 에러
  age: number;
}

 

 

※ 타입별칭과 인터페이스 비교

• 구분type (타입 별칭)interface (인터페이스)

확장 가능 여부	& (Intersection)으로 확장	extends로 확장 가능
객체만 가능?	유니온(`	`), 튜플, 기본 타입 가능
중복 선언 가능?	불가능 (Duplicate error)	가능 (자동 병합됨)
사용 추천 상황	복잡한 타입 조합, 유니온/튜플 사용 시	주로 객체 모델링 시

• 상황추천

객체의 구조를 정의할 때	interface 🏆
확장이 필요할 때 (extends)	interface
여러 개의 타입을 조합할 때 (&, |)	type
유니온 타입 (`"a" ,"b"`)	type
튜플 ([number, string])	type
기본 타입 (string, number)	type

 

• 결론
  • 객체모델링은 interface
  • 유니온, 튜플, 기본 타입의 조합은 type