📘 TypeScript - 인터페이스

interface는 TypeScript에서 객체의 구조를 정의할 때 사용하는 문법입니다. 객체를 더 명확하고 안전하게 사용할 수 있도록 도와주는 중요한 기능 중 하나입니다.

이번 글에서는 인터페이스의 기본 개념부터 클래스와의 연결까지 간단한 예제들과 함께 정리해보겠습니다.

 

 

✅ 왜 인터페이스를 사용할까?

let user: object;

user = {
   name: 'xx',
   age: 30
 };

console.log(user.name); // ❌ 오류 발생

 

object 타입으로 지정하면 해당 객체의 속성에 직접 접근할 수 없습니다. 이럴 때 interface를 사용하면 해결할 수 있습니다.

 

✨ 인터페이스 기본 사용법

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

let user: User = {
  name: 'xx',
  age: 30
};

console.log(user.name); // 'xx'
console.log(user.age);  // 30

// user.gender = 'male'; // ❌ 오류 발생

• interface 이름은 관례적으로 대문자로 시작합니다.
• 인터페이스에 정의되지 않은 속성을 추가하려고 하면 오류가 발생합니다.

 

🟡 옵셔널 프로퍼티 (?)

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

let user: User = {
  name: 'xx',
  age: 30
};

user.gender = 'male'; // 가능

 

?를 붙이면 해당 프로퍼티는 선택적으로 존재할 수 있음을 의미합니다.

 

🔒 읽기 전용 프로퍼티 (readonly)

interface User {
  name: string;
  age: number;
  gender?: string;
  readonly birthYear: number;
}

let user: User = {
  name: 'xx',
  age: 30,
  birthYear: 1990
};

// user.birthYear = 1992; // ❌ 오류 발생

 

readonly 키워드를 사용하면 해당 속성은 초기 설정 이후 변경 불가합니다.

🔢 숫자 인덱스 시그니처

 

interface User {
  name: string;
  age: number;
  gender?: string;
  readonly birthYear: number;
  [grade: number]: string;
}

let user: User = {
  name: 'xx',
  age: 30,
  birthYear: 1990,
  1: 'A',
  2: 'B',
  3: 'C'
};

 

숫자 인덱스를 통해 동적으로 속성을 추가할 수 있게 합니다.

 

🧮 인터페이스로 함수 타입 정의

interface Add {
  (num1: number, num2: number): number;
}

const add: Add = function (x, y) {
  return x + y;
};​

 

함수의 매개변수와 반환값의 타입을 명확히 정의할 수 있습니다.

 

🚗 클래스에 인터페이스 적용 (implements)

interface Car {
  color: string;
  wheels: number;
  start(): void;
}

class Bmw implements Car {
  color;
  wheels = 4;

  constructor(c: string) {
    this.color = c;
  }

  start() {
    console.log('go...');
  }
}

const b = new Bmw('green');
console.log(b);
b.start();

 

implements 키워드로 클래스가 해당 인터페이스를 따르도록 강제할 수 있습니다.

 

🔗 인터페이스 확장 (extends)

interface Benz extends Car {
  door: number;
  stop(): void;
}

class Bmw implements Benz {
  color;
  wheels = 4;
  door = 4;

  constructor(c: string) {
    this.color = c;
  }

  start() {
    console.log('go....');
  }

  stop() {
    console.log('stop');
  }
}

const b = new Bmw('green');
console.log(b);
b.start();
b.stop();

 

extends를 사용하면 인터페이스를 확장하여 재사용할 수 있습니다.

 

🔄 다중 확장

interface Toy {
  name: string;
}

interface ToyCar extends Car, Toy {
  price: number;
}

 

여러 인터페이스를 동시에 상속하여 다양한 속성을 결합할 수 있습니다.