TypeScript - 인터페이스: 초보자를 위한 친절한 가이드

안녕하세요, 미래의 코딩 슈퍼스타! 오늘 우리는 TypeScript의 인터페이스라는 아름다운 세상으로 뛰어들어 볼 거예요. 걱정 마세요, 이전에 코딩한 적이 없어도 괜찮아요 - 이 흥미로운 여정에서 당신의 신뢰할 수 있는 안내자로서 함께할게요. 그럼 좋아하는 음료를 한 잔 챙겨서 시작해 보세요!

인터페이스는 무엇인가요?

들어가기 전에 인터페이스가 무엇인지 이해해 보겠습니다. 인터페이스는 계약서나 설계도를 상상해 보세요. 인터페이스는 객체의 구조를 정의하여, 그 객체가 어떤 프로퍼티와 메서드를 가져야 하는지 알려줍니다. 맛있는 케이크를 만들기 위해 필요한 모든 재료를 나열한 레시피와 같은东西입니다!

인터페이스 선언

인터페이스 선언의 기본을 시작해 보겠습니다. 간단한 예제를 보겠습니다:

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

이 예제에서 우리는 Person이라는 인터페이스를 생성했습니다. 이 인터페이스는 Person 유형의 객체가 반드시 두 가지 프로퍼티를 가져야 한다고 말합니다: name(문자열)과 age(숫자).

이제 이 인터페이스를 사용해 보겠습니다:

let john: Person = {
name: "John Doe",
age: 30
};

console.log(john.name); // 출력: John Doe

이제 우리는 john이라는 객체를 Person 인터페이스를 따르도록 생성했습니다. TypeScript는 john이 name과 age 프로퍼티를 모두 가지고 있으며, 올바른 유형을 가지고 있는지 확인합니다.

선택 사항 프로퍼티

때로는 일부 프로퍼티를 선택 사항으로 만들고 싶을 수 있습니다. 이를 위해 ? 기호를 사용할 수 있습니다:

interface Car {
make: string;
model: string;
year?: number;
}

let myCar: Car = {
make: "Toyota",
model: "Corolla"
};

// 이것도 유효합니다
let yourCar: Car = {
make: "Honda",
model: "Civic",
year: 2022
};

이 예제에서 year은 선택 사항입니다. 포함시키거나 제외할 수 있습니다 - 둘 다 유효합니다!

연합 유형과 인터페이스

때로는 프로퍼티가 여러 유형을 받아들이는 경우가 있습니다. 이럴 때 연합 유형이 유용하게 사용됩니다. 예제를 보겠습니다:

interface Pet {
name: string;
age: number | string;
}

let myDog: Pet = {
name: "Buddy",
age: 5
};

let myCat: Pet = {
name: "Whiskers",
age: "3 years"
};

이 경우 age는 숫자이거나 문자열일 수 있습니다. 이는 우리에게 더 많은 유연성을 제공합니다.

인터페이스와 배열

인터페이스는 배열을 설명할 수도 있습니다. 이렇게 합니다:

interface StringArray {
[index: number]: string;
}

let myArray: StringArray = ["Apple", "Banana", "Cherry"];
console.log(myArray[1]); // 출력: Banana

이 인터페이스는 어디서든 인덱스(숫자)에 접근할 때 문자열을 얻을 것이라고 말합니다.

우리는 인터페이스를 사용하여 더 복잡한 배열 구조를 설명할 수도 있습니다:

interface Inventory {
[index: number]: {
name: string;
quantity: number;
};
}

let shopInventory: Inventory = [
{ name: "T-shirt", quantity: 20 },
{ name: "Jeans", quantity: 15 }
];

console.log(shopInventory[0].name); // 출력: T-shirt

이 Inventory 인터페이스는 각 요소가 name과 quantity 프로퍼티를 가진 객체인 배열을 설명합니다.

인터페이스와 상속

실제 생활과 마찬가지로, 인터페이스는 다른 인터페이스에서 상속할 수 있습니다. 이는 기존 인터페이스를 기반으로 더 구체적인 인터페이스를 만들 때 유용합니다. 예제를 보겠습니다:

interface Animal {
name: string;
}

interface Dog extends Animal {
breed: string;
}

let myPuppy: Dog = {
name: "Max",
breed: "Labrador"
};

console.log(`${myPuppy.name} is a ${myPuppy.breed}`);
// 출력: Max is a Labrador

이 경우 Dog 인터페이스는 Animal 인터페이스를 상속하고 자신의 breed 프로퍼티를 추가합니다.

이미 여러 인터페이스를 상속할 수도 있습니다:

interface Swimmer {
swim(): void;
}

interface Flyer {
fly(): void;
}

interface Duck extends Animal, Swimmer, Flyer {
quack(): void;
}

let myDuck: Duck = {
name: "Donald",
swim: () => console.log("Swimming..."),
fly: () => console.log("Flying..."),
quack: () => console.log("Quack!")
};

myDuck.quack(); // 출력: Quack!

이 예제에서 우리의 Duck 인터페이스는 Animal, Swimmer, Flyer를 상속하고 자신의 quack 메서드를 추가합니다.

결론

축하합니다! 지금 TypeScript 인터페이스의 세계로 첫 걸음을 뗐습니다. 기억하세요, 인터페이스는 친절한 지킴이로서 객체가 올바른 구조를 가지도록 도와줍니다. 깨끗하고 이해하기 쉬우며 유지보수하기 쉬운 코드를 작성하는 데 매우 유용합니다.

이제 우리가 다루었던 방법들을 간단히 요약해 보겠습니다:

방법	설명
인터페이스 선언	객체의 구조 정의
선택 사항 프로퍼티	일부 프로퍼티를 선택 사항으로 만들기
연합 유형	프로퍼티가 여러 유형을 받아들이게 하기
배열 인터페이스	배열의 구조 설명
인터페이스 상속	기존 인터페이스를 기반으로 더 구체적인 인터페이스 만들기

계속 연습하면 곧 인터페이스를 마스터할 수 있을 것입니다! 기억하세요, 모든 전문가는 초보자였습니다. 그러므로 실험하고 실수를 두려워 말아요 - 그게 우리가 배우고 성장하는 방법입니다. 즐겁게 코딩하세요!

Credits: Image by storyset