Typescript의 type정리와 사용

타입스크립트의 여러가지 타입

먼저 타입스크립트에서 자주 사용되는 몇 가지 기본 타입을 알아보자.

const size: number = 123;
const isBig: boolean = size >= 100;
const msg: string = isBig ? '크다' : '작다';

const values: number[] = [1, 2, 3];
const values2: Array<number> = [1, 2, 3];
values.push('a'); // type error

const data: [string, number] = [msg, size];
data[0].substr(1);
data[1].substr(1); // type error

위의 코드는 타입스크립트의 기본 타입들을 나열한 것이다.
코드에 어떤 내용이 들어갔는지 한 번 알아보자.

const values: number[] = [1, 2, 3];
const values2: Array<number> = [1, 2, 3];

위의 코드를 보면 배열 타입은 두 가지 방법으로 정의할 수 있다.

values.push('a'); // type error

이 코드는 숫자 배열에 문자열을 입력했기 때문에 타입 에러가 발생한 것이다.

const data: [string, number] = [msg, size];

이 코드는 문자열과 숫자로 구성된 튜플(tuple) 타입을 정의한 것이다.

data[1].substr(1);

이 코드는 두 번째 아이템의 타입은 숫자인데 문자열의 메서드를 호출했기 때문에 타입 에러가 발생한 것이다.

null과 undefined 타입

자바스크립트에서 값으로 존재하는 null과 undefined는 타입스크립트에서 각각 타입으로 존재한다.

let v1: undefined = undefined;
let v2: null = null;
v1 = 123; // type error

let v3: number | undefined = undefined;
v3 = 123;

위 코드를 보면 undefined와 null은 타입스크립트에서 타입으로 사용될 수 있다는 걸 보여주고 있다.
3행의 코드를 보면 undefined 타입에 숫자를 입력하면 타입 에러가 발생한다.
undefined와 null 타입은 다른 타입과 함께 유니온 타입으로 정의할 때 많이 사용된다.

문자열 리터럴과 숫자 리터럴 타입

타입스크립트에서는 문자열 리터럴과 숫자 리터럴을 타입으로 정의할 수 있다.

let v1: 10 | 20 | 30;
v1 = 10;
v1 = 15; // type error

let v2: '경찰관' | '소방관';
v2 = '의사'; // type error

숫자 10, 20, 30은 각각 타입으로 사용된 것을 볼 수 있다. 변수 v1은 오직 숫자 10, 20, 30만 가질 수 있는 타입으로 정의되었고, 변수 v2는 문자열 리터럴 타입으로 정의했다.

any 타입

any 타입은 모든 종류의 값을 허용하는 타입이다.

let value: any;
value = 123;
value = '456';
value = () => {};

any 타입에는 숫자와 문자열뿐만 아니라 함수도 입력될 수 있다. any 타입은 기존 프로젝트의 모든 코드에 타입을 한 번에 정의하는 것은 부담되기 때문에 타입 에러가 나는 부분은 임시적으로 any 타입을 사용해 정의하면 된다. 단, any 타입을 남발하면 타입스크립트를 사용하는 의미가 퇴색되기 때문에 되도록 피하는 것이 좋다!!!🧐

void와 never 타입

아무 값도 반환하지 않고 종료되는 함수의 반환 타입은 void 타입으로 정의할 수 있다.
그리고 항상 예외가 발생해서 비정상적으로 종료되거나 무한 루프 때문에 종료되지 않는 함수의 반환 타입은 never 타입으로 정의할 수 있다.
그렇다면 직접 코드를 눈으로 보고 쳐보면서 익혀보자.

funtion f1(): void {
  console.log('hello');
}

위의 코드는 아무 것도 반환하지 않으므로 void 타입으로 정의했다.

function f2(): never {
  throw new Error('some error');
}

위의 코드는 함수가 항상 비정상적으로 종료되므로 never 타입으로 정의했다.

function f3(): never {
  while (true) {
    // ...
  }
}

위의 코드는 함수가 종료되지 않으므로 never 타입으로 정의했다.

object 타입

object 타입은 자바스크립트에서 일반적으로 사용되는 객체의 타입이다.

let v: object;
v = { name: 'abc' };
console.log(v.prop1); // type error

객체의 속성에 대한 정보가 없기 때문에, 특정 속성 값에 접근하면 타입 에러가 발생한다. 속성 정보를 포함해서 타입을 정의하기 위해서는 인터페이스(interface)를 사용해야 한다.

교차 타입과 유니온 타입

여러 타입의 교집합과 합집합을 각각 교차(intersection) 타입과 유니온(union) 타입으로 표현할 수 있다. 교차 타입은 & 기호로 정의하고, 유니온 타입은 | 기호로 정의한다.

let v1: (1 | 3 | 5) & (3 | 5 | 7);
v1 = 3;
v1 = 1; // type error

변수 v1의 타입은 3 | 5와 같다. 변수 v1에는 3 또는 5가 아닌 값을 할당할 수 없다.

type 키워드로 타입에 별칭 주기

type 키워드를 사용해서 타입에 별칭을 줄 수 있다. 타입 별칭은 타입을 선언할 때 편리하게 사용할 수 있다.

type Width = number | string;
let width: Width;
width = 100;
width = '100px';

number | string 타입에 Width라는 별칭을 부여한다. Width는 일반적인 타입처럼 사용될 수 있다.

다음 포스트에서는 열거형 타입에 대해 알아보겠다. 뿅~~~😜