TypeScript - object Type 1

lbr·2022년 7월 15일

object

TypeScript에서의 object는 실제 obejct의 의미하고는 조금 다르게 쓰입니다.

// create by object literal
const person1 = {name: 'Mark', age: 39};

// person1 is not "object" type.
// person1 is "{name: string, age: number}" type.


// create by Object.create
const person2 = Object.create({name: 'Mark', age: 39});

object literal type 이라고 부릅니다.

object type 이란

Object타입은 "primitive type 이 아닌 것" 을 나타내고 싶을 때 사용하는 타입입니다.

예시

object를 생성하는 방법 2가지를 통해서 object 타입의 사용예를 알아봅니다.

// create by object literal
const person1 = {name: 'Mark', age: 39};

// person1 is not "object" type.
// person1 is "{name: string, age: number}" type.


// create by Object.create
const person2 = Object.create({name: 'Mark', age: 39});

create by object literal
create by Object.create

JavaScript에서 객체를 생성할 수 있는 방법은 크게 3가지가 있습니다.
1. 리터럴 표기(literal notation)를 이용한 방법
2. 생성자 함수(constructor function)를 이용한 방법
3. Object.create() 메소드를 이용한 방법

create by object literal

let obj: object = {}; // 보통은 이런식으로 object를 만들지 않습니다.

obj = {name: 'Mark'}; // object

obj = [{name: 'Mark'}]; // Array // Array도 object의 일종이니까...

obj = 39; // Error

obj = 'Mark'; // Error

obj = true; // Error

obj = 100n; // Error // bigint 타입

obj = Symbol(); // Error

obj = null; // Error

obj = undefined; // Error

위처럼 primitive type를 넣을 수 없게 할 때 object타입을 쓰는 것입니다.

create by Object.create

declare function create(o: object | null): void;

create({ prop: 0 });

create(null);

create(42); // Error

create("string"); // Error

create(false); // Error

create(undefined); // Error

// Object.create
Object.create(0); // Error

Array

배열안에 있는 요소들은 전부 같은 타입이여야 합니다.

예시

let list: number[] = [1, 2, 3]; // 첫번째 방법

let list: Array<number> = [1, 2, 3]; // 두번째 방법

첫번째 방법을 선호합니다.
두번째 방법은 JSX TSX에서 충돌이 날 수도 있다하여 사용을 자제하라고 합니다.

let list1: number[] = [1, 2, 3, "4"]; // Error

number[] 타입에 string타입 4를 넣으면 에러가 발생합니다.

let list1: (number | string)[] = [1, 2, 3, "4"]; // Error 없음

number타입과 string을 둘 다 허용하려면 위처럼 union타입으로 작성하면 됩니다.

Tuple타입의 필요성

위 예시 union 배열의 각 요소들은 전부 number이거나 string 입니다.
첫번째 요소인 1도 number이거나string이고, 두번째 요소도 number이거나string이고, 네번째 요소도 number이거나string입니다.

위처럼 배열에서 값을 꺼낼 때 어떤 타입이 나올지 예상할 수 없을 때도 있지만, 정확히 어떤 값이 나올지 예상할 수 있을 때도 있습니다.
[39, "Mark"];
위처럼 앞은 항상 숫자이고, 뒤는 항상 문자로 정해진 구조도 있을 수 있습니다.
이런 경우에도 : (number | string)[] 으로 표현한다면, 첫번째 자리는 항상 숫자이고, 두번째 자리는 항상 문자라는 것을 우리는 알고 있음에도 불구하고, 실제와는 다르게 설계된 타입을 만날 수 있습니다.

이런 경우에 대한 처리를 TypeScript에서 해주고자 Array와 별개의 타입인 Tuple타입을 하나 더 만들었습니다.

참고

아래처럼 JavaScript 에서는 어느정도 타입을 유추합니다.

하지만 명확하게 하기 위해 TypeScript에서는 타입을 지정해줍니다.

Tuple

tuple은 JavaScript에서는 지원하지 않는 데이터 타입이지만, TypeScript에서는 배열 타입을 보다 특수한 형태로 사용할 수 있는 tuple 타입을 지원합니다. tuple에 명시적으로 지정된 형식에 따라 아이템 순서를 설정해야 되고, 추가되는 아이템 또한 tuple에 명시된 타입만 사용 가능합니다.

let x: [string, number];

x = ["hello", 39]; // 순서, 타입, 길이가 맞아야 합니다.

// x = [10, 'Mark']; // Error

순서, 타입, 길이가 모두 맞아야 합니다.

지정한 배열 길이를 넘어선 index에 값을 할당하면 Error가 발생합니다.

length가 잘못됐다는 것 만으로도 Error가 발생합니다.

const person: [string, number] = ["Mark", 39];

const [first, second] = person; // 구조 분해 할당(비구조화 할당)

tuple 이라 first변수와 second변수에 정확한 Type이 부여됩니다.(first: string, second: number)
Array 이였다면 first와 second 전부 똑같이 union타입이 부여됐을겁니다.(first: string | number, second: string | number)