TypeScript - 객체: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! 오늘 우리는 TypeScript 객체의 세계로 흥미로운 여정을 떠납니다. 초보자라면 걱정하지 마세요 - 저는 당신의 친절한 안내자가 되겠습니다. 우리는 단계별로 진행하겠습니다. 이 튜토리얼이 끝나면, 당신은 프로처럼 객체를 자신감 있게 다루게 될 것입니다!

객체는 무엇인가요?

TypeScript의 구체적인 내용에 들어가기 전에, 프로그래밍에서 객체가 무엇인지 이야기해보겠습니다. 가방을 가지고 있다고 상상해보세요. 이 가방은 여러 가지 아이템을 담을 수 있으며, 각 아이템은 자신만의 특징을 가지고 있습니다. 프로그래밍에서 객체는 그 가방과 같은东西 - 관련된 정보를 담을 수 있는 컨테이너입니다.

문법: TypeScript에서 객체 생성 방법

기본적인 것부터 시작해보겠습니다. TypeScript에서 우리는 "객체 리터럴 표기법"을 사용하여 객체를 생성할 수 있습니다. 이 용어는 복잡해 보이지만, 사실 매우 간단합니다. 다음은 예제입니다:

let myBackpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};

이 예제에서 myBackpack은 우리의 객체입니다. 이 객체는 세 가지 프로퍼티를 가지고 있습니다: color, capacity, isWaterproof. 각 프로퍼티는 값을 할당받고 있습니다.

타입 어노테이션: TypeScript에게 기대하는 데이터 타입을 알려주기

TypeScript의 멋진 기능 중 하나는 우리가 객체가 포함할 데이터 타입을 정확히 지정할 수 있다는 점입니다. 이를 "타입 어노테이션"이라고 합니다. 가방 예제를 보강해보겠습니다:

let myBackpack: {
color: string;
capacity: number;
isWaterproof: boolean;
} = {
color: "blue",
capacity: 20,
isWaterproof: true
};

여기서 우리는 color는 항상 문자열이어야 하며, capacity는 항상 숫자이어야 하며, isWaterproof는 항상 불리언이어야 한다고 TypeScript에게 알립니다. 이는 오류를 빨리 찾아내고 코드를 더 신뢰할 수 있게 만듭니다.

객체 리터럴 표기법: 더 깊이 알아보기

우리는 이미 객체 리터럴 표기법을 사용해보았지만, 더 자세히 설명해보겠습니다. 문법은 다음과 같은 패턴을 따릅니다:

let objectName = {
property1: value1,
property2: value2,
// ... 그리고 이어서
};

각 프로퍼티는 쉼표로 구분되며, 전체 객체는 중괄호 {}로 둘러싸여 있습니다. 마치 가방에 아이템을 싣는 것처럼, 각 아이템에 이름(프로퍼티)과 설명(값)을 부여합니다.

TypeScript 타입 템플릿: 재사용 가능한 객체 타입

때로는 같은 구조를 가진 여러 개의 객체를 생성하고 싶을 때가 있습니다. 이때 TypeScript 타입 템플릿이 유용합니다. 우리는 한 번에 타입을 정의하고 재사용할 수 있습니다:

type Backpack = {
color: string;
capacity: number;
isWaterproof: boolean;
};

let myBackpack: Backpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};

let friendsBackpack: Backpack = {
color: "red",
capacity: 15,
isWaterproof: false
};

이 Backpack 타입은 블루프린트처럼 작용하여, Backpack 타입의 모든 객체가 올바른 구조를 가지도록 합니다.

객체를 함수 매개변수로 전달: 가방을 돌려보기

객체는 함수에 전달할 수 있어, 복잡한 데이터 구조를 다루게 합니다. 다음은 예제입니다:

function describeBackpack(backpack: Backpack): string {
return `This ${backpack.color} backpack has a capacity of ${backpack.capacity} liters and is ${backpack.isWaterproof ? "waterproof" : "not waterproof"}.`;
}

console.log(describeBackpack(myBackpack));
// 출력: This blue backpack has a capacity of 20 liters and is waterproof.

이 함수에서 우리는 Backpack 객체를 전달하고 그 프로퍼티를 사용하여 설명을 생성합니다.

익명 객체: 이름 없는 가방

때로는 변수에 할당하지 않고 즉시 생성되는 객체가 필요합니다. 이를 익명 객체라고 합니다:

function printBackpackColor(backpack: { color: string }): void {
console.log(`The backpack is ${backpack.color}.`);
}

printBackpackColor({ color: "green" });
// 출력: The backpack is green.

여기서 우리는 함수 호출에서 직접 객체를 생성합니다. 마치 가방을 가지고 있지 않고, 다른 사람에게 가방에 대해 설명하는 것과 같습니다.

덕 타이핑: 덕이 보이면 덕이 되다...

TypeScript는 "덕 타이핑" 개념을 사용합니다. 이 개념은: 덕이 보이고 덕이 꽥꽥 울면, 그것은 아마도 덕일 가능성이 크다는 것입니다. TypeScript에서는 객체의 형태가 중요합니다:

interface Bag {
color: string;
carry(): void;
}

let myBackpack = {
color: "purple",
capacity: 25,
carry: function() { console.log("Carrying the backpack"); }
};

function useBag(bag: Bag) {
console.log(`Using a ${bag.color} bag`);
bag.carry();
}

useBag(myBackpack); // 이는 작동합니다!

myBackpack은 명시적으로 Bag 타입으로 선언되지 않았지만, Bag 타입이 요구하는 모든 프로퍼티와 메서드를 가지고 있기 때문에 TypeScript는 이를 허용합니다.

가방 여정을 마치며

축하합니다! 당신은 지금 첫 번째 TypeScript 객체 가방을 지식으로 채웠습니다. 기억하시라, 객체는 프로그래밍에서 매우 강력한 도구입니다 - 관련된 데이터와 기능을 함께 그룹화할 수 있습니다. 마치 진짜 가방이 등산 장비를 한 곳에 보관하는 것처럼 말입니다.

코딩 여정을 계속하면서, 당신은 어디서든 객체를 찾게 될 것입니다. 그들은 간단한 할 일 목록에서 복잡한 웹 애플리케이션에 이르기까지 다양한 애플리케이션의 기본 블록입니다. 계속 연습하면, 당신은 쉽게 객체를 생성하고 조작할 수 있게 될 것입니다!

이 튜토리얼에서 다룬 방법들의 빠른 참조 표입니다:

방법	설명
객체 리터럴 표기법	{} 문법을 사용하여 객체 생성
타입 어노테이션	객체의 구조를 지정
타입 템플릿	재사용 가능한 객체 타입 정의
함수 매개변수로 객체 전달	객체를 함수에 전달
익명 객체	변수에 할당하지 않고 생성된 객체
덕 타이핑	객체의 형태에 기반한 타입 검사

행복하게 코딩하시고, TypeScript 객체가 항상 버그가 없고 흥미로운 속성으로 가득 차기를 바랍니다!

Credits: Image by storyset