[TypeScript] 객체 타입을 선언하는 방식과 별칭 객체 타입(Type alias)

[TypeScript] 객체 타입을 선언하는 방식과 별칭 객체 타입(Type alias)

 

 

📌 객체 타입

원시 타입을 제외하고 가장 많이 등장하는 타입. 객체는 프로퍼티를 가지는 자바스크립트 값이다.

객체를 정의하려면 해당 객체의 프로퍼티들과 각 프로퍼티의 타입을 나열하면 된다.

 

const info = {
  name: 'ramin',
  favoriteNumber: 7,
};

info.name; // 타입: string
info['favoriteNumber']; // 타입: number

info 가 가지고 있는 속성 외의 이름으로 접근하려고 하면 '타입 오류'가 발생한다.

 

📌 객체 생성 방법 - 객체 리터럴

객체 리터럴(Object Literal)은 중괄호({})를 사용하여 객체를 생성하는 것을 말한다.

속성값은 모든 타입(type)이 올 수 있으며, 타입스크립트에서 타입 추론을 기반으로 속성값의 타입을 유추한다.

const person = {
  name: 'Marry',
  age: 30,
  gender: 'female',
};

 

객체 리터럴을 이용하여 객체를 생성할 때에는, 코드의 가독성과 유지보수성을 위해 객체의 속성명과 속성값이 명확하게 정해져 있는 것이 좋다.

 

📌 객체 타입 선언 - 명시적 방법

객체 타입은 중괄호({})를 이용하여 선언하며, 객체 내부에 속성(key)과 그 속성의 타입(value)을 선언한다.

객체 리터럴과 유사해 보이지만 필드 값 대신 타입을 사용해 설명한다.

// person 변수가 가지고 있는 객체 타입을 명시적으로 선언
const person: {
  name: string;
  age: number,
  gender: string,
};

// Ok
person = {
  name: 'ramin',
  age: 31,
  gender: 'female',
};

위에서 person 에 명시적으로 타입을 지정해주는 방식이 아닌 아래의 코드 블럭인 person 에 직접 값을 할당해주는 방식만 사용한다면 객체 리터럴 방식이라고 할 수 있다. 즉, 위에서 변수에 직접 객체 타입을 할당해주는 방식을 명시적으로 타입을 지정해주는 방법이라고 할 수 있다.

 

명시적으로 타입을 선언하는 방식은 객체의 속성에 대한 타입을 명확하게 지정할 수 있으며, 다음과 같은 장점이 있다.

• 가독성 ⬆️
• 유지보수 ⬆️
• 버그 사전 방지

즉, 객체 리터럴은 코드를 간결하게 작성하는데 적합하지만, 코드의 가독성과 유지보수를 향상시키기 위해서는 명시적인 방법으로 타입을 선언하는 것이 좋다.

 

📌 별칭 객체 타입(Type alias)

프로젝트를 진행하다보면 동일한 타입을 반복해서 사용하는 경우가 많을 것이다. 이럴 때 사용하는 것이 Type alias 라는 기능이다. 이는 타입스크립트에만 존재하는 코드로 컴파일하면 사라진다.

Type alias 는 이미 존재하는 타입에 다른 이름을 붙여서 사용하기 위한 방법이다. 특정 타입에 대한 별칭(alias)을 지정함으로써 코드의 가독성과 유지보수성을 높일 수 있으며, 코드의 중복을 줄일 수 있다.

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

const ramin: Person = {
  name: 'ramin',
  age: 31,
}

Person 은 name, age 프로퍼티를 가진 객체의 새로운 이름(alias)으로 정의되어 있다. ramin 변수는 Person 타입의 값을 할당할 수 있는 것이다.

 

📌 구조적 타이핑

[TypeScript] 구조적 타이핑으로 타입 호환성 확인하기, 덕 타이핑이란?

타입스크립트의 타입 시스템은 구조적으로 타입화되어있다. 즉, 타입을 충족하는 모든 값을 해당 타입의 값으로 사용할 수 있다.

type Ramin = {
    hobbies: string;
}

const todo = {
    hobbies: string,
    study: string,
}

const today: Ramin = todo;

 

이러한 구조적 타이핑은 특정 상황이나 요구사항에서 유용하게 활용될 수 있다. 특정 상황이라고 한다면 여러 타입이 사용되는 유니온 타입의 경우나, 여러 소스 타입을 결합하는 인터섹션 타입의 경우가 있다.

// Union Types
type Animal = Cat | Dog;

// Intersection Types(타입을 하나로 합침)
type Ramin = {
  hobbies: stirng;
};

type Choi = {
  job: true;
}

type family = Ramin & Choi;

 

하지만 일반적으로 구조적 타이핑 방식보다는 인터페이스 방식을 많이 사용한다.

---

타입스크립트에서 interface 를 많이 사용하는 이유

1. 가독성

2. 확장성 : 선언 병합(Declaration Merging)을 지원하기 때문에 새로운 속성을 추가하거나 수정할 수 있어 확장성이 좋다.

3. 객체지향 프로그래밍 : 클래스 간의 관계와 사용 방식을 명확하게 정의하고 규격화할 수 있다.

4. 코드 자동완성 

 

 

 

---

참고 : 참고 : 러닝 타입스크립트를 읽고, 뤼튼 ai 의 도움을 받아 학습한 내용을 간단하게 정리한 내용입니다.
잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.