Table of contents

5.0. Introduction

자바스크립트에서는 데이터를 그룹화하여 전달하는 기초적인 방법으로 오브젝트를 사용한다. 타입스크립트에서는 이를 object 타입으로 나타낸다.

이전에 살펴본 대로, 오브젝트 타입은 익명이 될 수 있다.

function greet(person: { name: string; age: number }) {
	return 'Hello ' + person.name;
}

또한, 인터페이스나 타입 앨리어스를 사용하여 오브젝트 타입에 이름을 지을 수 도 있다.

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

function greet(person: Person) {
	return 'Hello ' + person.name;
}

type Person = {
	name: string;
	age: number;
};

function greet(person: Person) {
	return 'Hello ' + person.name;
}

이 위의 모든 예제는 name이라는 프로퍼티(반드시 문자열 타입이어야 하는)와 age라는 프로퍼티(반드시 숫자 타입이어야 하는)를 갖는 오브젝트를 인수로 받는 함수에 대한 것이다.

5.1. Property Modifiers

오브젝트 타입 내의 각 프로퍼티에 우리는 몇 가지 사항을 특정할 수 있다. 예를 들어, 프로퍼티가 옵셔널(선택적)인지, 아니면 프로퍼티가 읽기 전용인지 등을 특정할 수 있다.

5.1.1. Optional Properties

오브젝트의 특정 프로퍼티는 오브젝트를 사용할 때, 많은 경우 그 값이 설정되지 않을 수 있다. 그러한 경우, 우리는 프로퍼티 이름 오른쪽에 ? 기호를 표기함으로써, 그 프로퍼티를 옵셔널로 지정할 수 있다.

-optional-prop.ts-

interface PaintOptions {
	shape: Shape;
	xPos?: number;
	yPos?: number;
}

function paintShape(opts: PaintOptions) {
	// ...
}

const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintSHape({ shape, xPos: 100, yPos: 100 });

이 예제에서, xPos와 yPos는 모두 옵셔널로 간주된다. 우리는 이 두 프로퍼티를 선택적으로 제공할 수 있으며, 그 아래의 모든 paintShape 호출은 적법하다.

자바스크립트에서는 프로퍼티의 값이 설정되지 않은 상태에서도 그 프로퍼티에 접근할 수 있다. 다만 그 값은 undefined이며, 이러한 undefined를 적절히 처리해야한다.

-optional-prop.ts-