타입스크립트의 타입 (1)

원시타입(Primitive Type)

하나의 값만 저장하는 타입

• number : 숫자 타입
• string : 문자열 타입
• boolean : 논리 타입
• null : null 타입
• undefined : undefined 타입

리터럴 타입

값 하나가 곧 타입인 타입

 

리터럴은 값이라는 뜻으로 타입스크립트에서는 한 가지 값이 그 값의 타입으로 사용될 수 있다.

예시)

let numA: 10 = 10;

let strA: "hello" = "hello";

let boolA: true = true;

타입 표기 방식

타입스크립트에서 타입을 표기하는 가장 기본적인 방법으로 type annotation 방식이 있다.

위에 리터럴 타입의 예시처럼 변수 옆에 표기하는 방식으로 type annotation 방식이라고 부른다.

배열 타입

배열 타입을 표기하는 방식으로는 두 가지가 존재한다.

// 평범한 type annotation 방식
let numArr: number[] = [1, 2, 3];

let strArr: string[] = ["hello", "im", "patrick"];

// 제네릭 타입을 활용한 type annotation 방식
let boolArr: Array<boolean> = [true, false, true];

 

<> 안에 타입을 지정하는 방식을 제네릭 타입이라고 부른다.

다차원 배열과 다양한 요소들이 존재하는 경우

// 배열에 들어가는 요소들의 타입이 다양할 경우
let multiArr: (number | string)[] = [1, "hello"];

// 다차원 배열의 타입을 정의하는 방법
let doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5],
];

튜플

타입스크립트에서 튜플이란 길이와 타입이 고정된 배열이다.

예시를 보면 이해가 쉽다.

let tup1: [number, number] = [1, 2];

let tup2: [number, string, boolean] = [1, "2", true];

객체

타입스크립트에서 객체는 object라고 부른다. 따라서, 기본적인 객체에 대해 다음과 같이 타입 정의를 할 수 있다.

// object
let user: object = {
  id: 1,
  name: "patrick"
}

 

하지만 위와 같이 타입 정의를 한 후 객체의 요소에 접근하면 에러가 발생한다. 아래 사진을 보자.

객체 정의 에러

따라서, 객체 타입을 정의할 때는 다음과 같이 리터럴 타입으로 정의해주는 것이 좋다.

오류 없는 객체 정의

이렇게 객체에 object만 명시하는 것이 아니라 객체의 내부 구조를 확인하며 타입을 정의하는 시스템을 "구조적 타입 시스템"이라고 부른다.
Java나 C같이 이름에 명시되는 명목적 타입 시스템과 TypeScript가 가지고 있는 구조적 타입 시스템 또한 큰 차이로 볼 수 있다.

선택적(optional) property

객체에서 property에 다른 값을 추가할 때 위 사진처럼 타입을 정의하면 이런 에러가 발생한다.

property 에러

 

이처럼 객체 property 중 확실하지 않은 것이 있을 때는 선택적 property를 설정해줘야 한다.

선택적 property

읽기 전용 객체 속성

객체 property 중 값을 변경하면 안 되는 경우가 있을 수 있다. 이런 경우에는 읽기 전용 속성을 지정해준다.

읽기 전용 속성

참고자료

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런