2024년 2월 25일 작성

TypeScript Type Declaration - 변수/함수의 Type 선언하기

TypeScript에서는 변수나 함수의 type을 선언하여, code의 가독성, 예측성, 안정성을 향상시킬 수 있습니다.

Type Declaration

  • 사전에 type을 선언(type declaration)하여 변수나 함수의 type을 명시하는 작업은 code의 가독성, 예측성, 안정성을 향상시킵니다.
  • type 선언은 강력한 type check를 가능하게 하여, ‘문법 오류’나 ‘type과 일치하지 않는 값의 할당’ 등의 기본적인 오류를 runtime 전에 검출합니다.
    • compile 시점에 type과 문법을 검사합니다.
  • VisualStudioCode와 같은 도구를 사용하면, code 작성 시점에 오류를 검출할 수 있어서 개발 효율이 대폭 향상됩니다.

Type을 선언하는 방법

변수 Type 선언

  • TypeScript는 변수명 뒤에 type을 명시하는 것으로 type을 선언할 수 있습니다.
let foo: string = 'hello';
  • 선언한 type에 맞지 않는 값을 할당하면 compile 시점에 오류가 발생합니다.
let bar: number = true;    // error TS2322: Type 'true' is not assignable to type 'number'.

함수 Type 선언

  • 함수의 매개 변수와 반환 값에 대한 type을 선언할 수 있습니다.
  • 일반 변수와 마찬가지로 선언된 type에 일치하지 않는 값이 주어지면 오류가 발생합니다.
// 함수 선언식
function multiply1(x: number, y: number): number {
    return x * y;
}

// 함수 표현식
const multiply2 = (x: number, y: number): number => x * y;

console.log(multiply1(10, 2));
console.log(multiply2(10, 3));

console.log(multiply1(true, 1));    // error TS2345: Argument of type 'true' is not assignable to parameter of type 'number'.

다양한 Type에 대한 선언 예시

/* boolean */
let isDone: boolean = false;

/* null */
let n: null = null;

/* undefined */
let u: undefined = undefined;

/* number */
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

/* string */
let color: string = "blue";
color = 'red';
let myName: string = `Lee`;    // ES6 template 문자열
let greeting: string = `Hello, my name is ${ myName }.`;    // ES6 template 대입문

/* object */
const obj: object = {};

/* array */
let list1: any[] = [1, 'two', true];
let list2: number[] = [1, 2, 3];
let list3: Array<number> = [1, 2, 3];    // generic 배열 type

/* tuple */
let tuple: [string, number];
tuple = ['hello', 10];    // OK
tuple = [10, 'hello'];    // Error
tuple = ['hello', 10, 'world', 100];    // Error
tuple.push(true);    // Error

/* enum */
enum Color1 {Red, Green, Blue};
let c1: Color1 = Color1.Green;
console.log(c1);    // 1

enum Color2 {Red = 1, Green, Blue};
let c2: Color2 = Color2.Green;
console.log(c2);    // 2

enum Color3 {Red = 1, Green = 2, Blue = 4};
let c3: Color3 = Color3.Blue;
console.log(c3);    // 4

/* any */
let notSure: any = 4;
notSure = 'maybe a string instead';
notSure = false;    // okay, definitely a boolean

/* void */
function warnUser(): void {
    console.log("This is my warning message");
}

/* never */
function infiniteLoop(): never {
    while (true) {}
}

function error(message: string): never {
    throw new Error(message);
}
  • 객체(Object)도 type으로 선언할 수 있으며, 이 경우에 type은 대문자로 시작합니다.
const today: Date = new Date();    // Date type

const elem: HTMLElement = document.getElementById('myId');    // HTMLElement type

class Person { }
const person: Person = new Person();    // Person type

Reference

목차