[TypeScript] Interface: 타입을 구조적으로 정의하기!📘

📘 TypeScript의 Interface 톺아보기!

TypeScript에서 interface는 객체의 구조를 정의하는 데 사용됩니다. 함수, 클래스, 객체 등 다양한 타입을 안전하고 명확하게 작성할 수 있도록 도와주는 중요한 도구죠. 이 글에서는 interface에 대해 깊이 있게 다루어 볼게요. 🛠️

---

🔍 Interface란 무엇인가요?

Interface는 객체의 타입을 선언할 때 사용하는 TypeScript의 키워드입니다. 객체가 가져야 할 속성과 속성의 타입을 지정할 수 있어요.

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

const person: Person = {
  name: "John",
  age: 30,
};

 

위 예제에서 Person은 name과 age 속성을 가진 객체 타입을 정의하는 interface입니다. person 객체는 Person 타입을 따르며, 지정된 속성 및 타입에 맞춰 작성되어야 합니다.

---

🛠️ Interface 기본 문법

1. 필수 속성과 선택적 속성

• 필수 속성: 반드시 포함해야 하는 속성입니다.
• 선택적 속성: **?**를 사용해 선택적으로 포함할 수 있습니다.

interface Car {
  make: string; // 필수 속성
  model: string; // 필수 속성
  year?: number; // 선택적 속성
}

const myCar: Car = {
  make: "Tesla",
  model: "Model 3",
};

const oldCar: Car = {
  make: "Toyota",
  model: "Corolla",
  year: 2005,
};

 

2. 읽기 전용(Readonly) 속성

속성을 읽기 전용으로 설정하면 수정할 수 없습니다. 키워드 readonly를 사용합니다.

interface Book {
  readonly title: string;
  readonly author: string;
}

const book: Book = {
  title: "1984",
  author: "George Orwell",
};

// book.title = "Animal Farm"; // 오류 발생: 읽기 전용 속성은 수정할 수 없습니다.

 

3. 인덱스 시그니처(Index Signature)

동적으로 키와 값을 가지는 객체를 정의할 때 사용합니다.

interface StringDictionary {
  [key: string]: string; // 키는 문자열, 값도 문자열
}

const translations: StringDictionary = {
  hello: "안녕하세요",
  world: "세계",
};

console.log(translations["hello"]); // "안녕하세요"

 

4. 함수 타입(Function Types)

interface를 사용하여 함수의 타입도 정의할 수 있습니다.

interface Add {
  (a: number, b: number): number; // 입력과 반환값 타입 정의
}

const add: Add = (a, b) => a + b;

console.log(add(5, 3)); // 8

 

5. 확장(Extends)

interface는 다른 interface를 확장(Extend)하여 기존 속성을 재사용할 수 있습니다.

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const myDog: Dog = {
  name: "Buddy",
  breed: "Golden Retriever",
};

 

6. 혼합 타입(Hybrid Types)

interface는 객체와 함수가 혼합된 타입도 정의할 수 있습니다.

interface Counter {
  (start: number): string;
  increment(): void;
  reset(): void;
}

function getCounter(): Counter {
  const counter = ((start: number) => `Counter started at ${start}`) as Counter;
  counter.increment = () => console.log("Incremented!");
  counter.reset = () => console.log("Reset!");
  return counter;
}

const counter = getCounter();

console.log(counter(10)); // "Counter started at 10"
counter.increment(); // "Incremented!"
counter.reset(); // "Reset!"

 

7. 클래스와 함께 사용하기

interface는 클래스에서 구현해야 할 구조를 강제할 수 있습니다.

interface Shape {
  area(): number;
}

class Rectangle implements Shape {
  constructor(private width: number, private height: number) {}
  area(): number {
    return this.width * this.height;
  }
}

const rect = new Rectangle(5, 10);

console.log(rect.area()); // 50

---

🛑 Interface와 Type의 차이

Interface

• 객체의 구조를 정의하는 데 최적화됨
• 확장(extends) 가능
• 컴파일 타임에만 존재, 자바스크립트로 컴파일되면 사라짐

Type

• 유니온(|) 및 인터섹션(&) 같은 더 복잡한 타입 정의 가능
• 기본 타입(예: string, number)도 alias로 정의 가능
• 인터페이스와 달리 재선언 불가능

---

🌟 실무에서 자주 쓰이는 Interface 패턴

1. API 응답 타입 정의

interface ApiResponse<T> {
  data: T;
  success: boolean;
  message: string;
}

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

const response: ApiResponse<User> = {
  data: { id: 1, name: "Alice" },
  success: true,
  message: "User fetched successfully",
};

 

2. 컴포넌트 Props 정의

React 컴포넌트에서 props 타입을 정의할 때 interface를 자주 사용합니다.

interface ButtonProps {
  label: string;
  onClick: () => void;
}

function Button({ label, onClick }: ButtonProps) {
  return <button onClick={onClick}>{label}</button>;
}

---

🔥 Interface로 코드를 더 타입 안전하게!

TypeScript의 interface는 객체, 함수, 클래스 등 다양한 구조를 명확하게 정의하여 타입 안정성을 높여줍니다. 개발자 간 협업 시 코드의 의도를 명확히 전달할 수 있고, 컴파일 단계에서 많은 오류를 잡아줄 수 있어요.

 

🌷전설의 개발자가 되어봅시당! 🌷