본문 바로가기
Language/TypeScript

[TypeScript] 객체타입 - object, array, tupple

by 썸머워즈 2022. 6. 1.
반응형

타입 스크립트에서 사용하는 타입 중에 object, array, tupple 객체 타입에 대해 알아보자.


Object

object타입은 javascript에서라면 정말 흔하게 자주 사용하던 타입이나, typescript에서 사용하려면 조금 까다롭다.

그 이유는 객체 안에 사용되는 모든 값들의 타입을 정해줘야 하기 때문이다.

 

object를 사용하는 몇몇 방법에 대해 알아보자.

 

▷ 일반 객체 타입 정의

let obj: object;
obj = { name: "mine", age: 3 };
obj = { obj: {}, arr: [], boal: true };

그냥 javascript처럼 사용하고자 한다면 object 타입을 그대로 명시해 줘도 좋으나 이럴 경우 typescript를 사용하는 이유가 없기 때문에 이런 식으로 사용하지는 않는다.

 

▷ 값 별 타입 지정

let obj: {
  name: string;
  age: number;
} = {
  name: "it-record",
  age: 3,
};

obj.lang = 'typescript';
// error : '{ name: string; age: number; }' 형식에 'lang' 속성이 없습니다.

기본적으론 object는 이처럼 타입을 지정해주면서 지정된 값들만 넣을 수 있게 만들어야 한다.

그렇지만 아무래도 타입이 길어지다 보면 가독성 역시 많이 떨어지기 때문에, 보통 타입을 따로 두는 Type Alias나 Interface, index signature 등을 사용해서 사용하고는 한다.

 

물론 위 방법이 잘못된 건 아니니까 사용방법은 알아두면 좋다.

 

▷ 기타 사용 방법

// Type Alias 사용
type myType = {
  name: string;
  age: number;
};
let obj: myType = {
  name: "it-record",
  age: 3,
};

// Type Alias + Index Signature + Union Type
type mineType = {
  [key: string]: string | number;
};
let obj2: mineType = {
  name: "mine",
  age: 2,
};
obj2.record = "it-blog";

나중에 알게 되겠지만 간단하게 설명하자면 type alias의 경우 저렇게 type을 사용하여 따로 만들어 사용하는 걸 말하고, index signature는 [key: string] 같이 어떤 key값이 들어올지 모르겠으나 전부 싸잡아서 string 타입으로 지정하는 방식을 말한다.

그리고 union type은 string | number처럼 여러 타입을 같이 선언하는 거를 의미한다.

 

일단 간단하게 설명을 하긴 했는데, Type Alias, Index Signature, Union Type은 각각 자세히 알아둘 필요가 있으니 나중에라도 찾아서 확인하면 좋다.

그리고 여기서는 일단 기본적인 것만 배우고 차차 타입 스크립트에 대해 배워가면서 좀 더 수월하게 다루게 되면 여러 가지 방법으로 사용이 가능하다.

 

Array

array 배열 역시 object와 마찬가지로 상당히 많이 사용되었는데, 이 역시 javascript처럼 자유롭지는 못하다.

 

▷ 일반 배열 타입 정의

const fruits: string[] = ["apple", "lemon", "orange"];
const numbers: Array<number> = [1, 2, 3];

이런 식으로 두 가지 방법이 존재하는데, 첫 번째 방식을 많이 사용한다. (readonly와 같은 속성들과 같이 사용하기에는 첫 번째 방식이 사용하기 좋다.)

 

물론 역시 타입이 지정되어 있기 때문에 지정된 타입 외의 데이터는 삽입할 수 없다.

 

▷ 다중 타입 정의

const nums: (string | number)[] = [1, '1'];

object와 마찬가지로 배열 역시 다중 타입으로 사용 가능하다.

 

Tuple

Tuple은 배열은 배열인데, array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 알고서 타입을 지정하고 싶을 때 사용하는 타입이다.

 

▷ 일반 Tuple 타입 정의

let animal: [string, number];
animal = ["cat", 2];

// error : '[string, number, number]' 형식은 '[string, number]' 형식에 할당할 수 없습니다.
animal = ["cat", 2, 3];

 

이처럼 tuple로 지정된 타입의 순서와 개수에 맞춰서만 값을 넣을 수 있다.

 

특수한 상황이 아니고서야 사용을 권장하지는 않는다.


참고: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

 

Documentation - Everyday Types

The language primitives.

www.typescriptlang.org

참고: https://www.typescriptlang.org/docs/handbook/2/objects.html

 

Documentation - Object Types

How TypeScript describes the shapes of JavaScript objects.

www.typescriptlang.org

반응형


댓글

TOP