[TS] 인터페이스 (Interface)

---

01

인터페이스 (Interface)

인터페이스는 타입을 정의할 때 사용하는 문법 중 하나이며, 타입 별칭과 비슷한 기능을 합니다.

하지만 인터페이스는 상속이나 합침 같은 특수한 기능을 제공합니다.

1. 선택적 프로퍼티

인터페이스에서는 ?를 사용하여 선택적 프로퍼티,

즉 해당 프로퍼티가 있어도 되고, 없어도 되는 경우를 정의할 수 있습니다.

interface Person {
  name: string;
  age?: number;  // age는 선택적 프로퍼티
}

const person1: Person = { name: "John" }; // age가 없어도 됨
const person2: Person = { name: "Jane", age: 25 }; // age가 있어도 됨

 

2. 읽기 전용 프로퍼티

readonly 키워드를 사용하면 해당 프로퍼티는 읽기 전용이 됩니다. 즉, 한 번 값이 설정되면 변경할 수 없습니다.

interface Person {
  readonly name: string;
}

const person: Person = { name: "John" };
// person.name = "Jane";  // ❌ 오류: name은 읽기 전용이라 값을 변경할 수 없음

 

3. 메서드 타입 정의

인터페이스에서는 메서드의 타입도 정의할 수 있습니다.

 

✅ 함수 타입 표현식

interface Person {
  name: string;
  sayHi: () => void; // 함수 타입 표현식
}

 

✅ 호출 시그니처

interface Person {
  name: string;
  sayHi(): void;  // 호출 시그니처
}

 

이렇게 두 방식 모두 메서드의 타입을 정의하는 방식인데, 호출 시그니처를 사용하면 메서드 오버로딩이 가능해집니다.

 

 

4. 메서드 오버로딩

인터페이스에서 함수 타입 표현식을 사용하면 오버로딩이 불가능합니다.

그러나 호출 시그니처를 사용하면 오버로딩을 구현할 수 있습니다.

interface Person {
  name: string;
  sayHi(): void;              // 기본 sayHi
  sayHi(a: number): void;     // 매개변수 하나를 받는 sayHi
  sayHi(a: number, b: number): void;  // 매개변수 두 개를 받는 sayHi
}

 

5. 하이브리드 타입

인터페이스는 함수이자 객체인 하이브리드 타입을 정의할 수 있습니다.

interface Func2 {
  (a: number): string;  // 함수
  b: boolean;            // 객체
}

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

---

02

인터페이스 확장하기

1. 인터페이스 확장

인터페이스는 다른 인터페이스를 확장할 수 있습니다. 확장을 하면 중복된 코드를 줄일 수 있습니다.

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

interface Dog extends Animal {
  breed: string;
}

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

 

2. 인터페이스 확장 시 프로퍼티 재정의

확장하면서 기존 프로퍼티의 타입을 재정의할 수 있습니다. 단, 기존 타입보다 좁은 타입으로만 재정의 가능합니다.

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

interface Dog extends Animal {
  name: "doldol"; // "doldol"로 타입을 고정
  breed: string;
}

이와 같은 방식으로 재정의가 가능하지만,

타입이 확장되는 과정에서 재정의된 타입이 더 좁은 타입이어야 한다는 점을 유의해야 합니다.

 

기존 타입보다 더 좁은 타입으로만 재정의할 수 있습니다.

interface Dog extends Animal {
  name: number; // ❌ 오류 발생
}

 

3. 타입 별칭 확장

인터페이스는 타입 별칭으로 정의된 객체도 확장할 수 있습니다.

type Animal = {
  name: string;
  color: string;
};

interface Dog extends Animal {
  breed: string;
}

 

4. 다중 확장

인터페이스는 여러 개의 인터페이스를 동시에 확장할 수도 있습니다.

interface DogCat extends Dog, Cat {}

---

03

인터페이스 선언 합치기

인터페이스는 선언 합침을 지원합니다. 같은 이름의 인터페이스가 여러 번 선언되면, 그 내용이 자동으로 합쳐집니다.

interface Person {
  name: string;
}

interface Person {
  age: number;
}

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

 

하지만, 같은 프로퍼티가 다른 타입으로 정의되면 충돌이 발생하여 오류가 납니다.

interface Person {
  name: string;
}

interface Person {
  name: number; // ❌ 오류 발생
}

---

03

마무리

인터페이스는 타입 정의 시 매우 유용한 도구입니다. 선택적 프로퍼티, 읽기 전용, 메서드 정의, 하이브리드 타입 등 다양한 기능을 제공하며, 확장과 합침을 통해 코드의 재사용성과 유연성을 높일 수 있습니다.

기능	설명	상세 내용
선택적 프로퍼티	프로퍼티를 필수로 지정하지 않음	`age?: number;`처럼 정의하고, 객체에 해당 프로퍼티를 생략할 수 있음
읽기 전용 프로퍼티	한 번 설정된 값을 변경할 수 없음	`readonly` 키워드로 값을 읽기 전용으로 설정할 수 있음
메서드 타입 정의	메서드의 타입을 정의함	함수 타입 표현식 또는 호출 시그니처로 메서드 타입을 정의
메서드 오버로딩	메서드의 여러 버전을 정의할 수 있음	호출 시그니처를 사용하면 메서드 오버로딩이 가능
하이브리드 타입	함수이자 객체인 타입 정의	함수처럼 사용하면서도 속성을 가질 수 있는 타입을 정의 가능
인터페이스 확장	기존 인터페이스를 확장하여 코드 재사용	`extends` 키워드를 사용해 다른 인터페이스를 확장할 수 있음
다중 확장	여러 개의 인터페이스를 동시에 확장할 수 있음	`extends`를 사용해 여러 인터페이스를 동시에 확장 가능
선언 합침	같은 이름의 인터페이스가 여러 번 선언되면 합쳐짐	같은 이름의 인터페이스를 여러 번 선언하면 자동으로 합쳐짐