IT 개발자 블로그 - Java, Spring Boot, React 등

안녕하세요! 타입스크립트 시리즈 두 번째 시간입니다. 오늘은 타입스크립트의 기본 타입들에 대해 자세히 알아보겠습니다. 타입스크립트의 강력함은 바로 이 다양한 타입 시스템에서 비롯됩니다.

기본적인 타입들

1. 원시 타입(Primitive Types)

타입스크립트는 자바스크립트의 원시 타입을 모두 지원합니다:

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

// 문자열
let color: string = "blue";
let greeting: string = `Hello, my name is ${color}`;

// 불리언
let isDone: boolean = false;

// null과 undefined
let n: null = null;
let u: undefined = undefined;

2. 배열(Arrays)

배열 타입은 두 가지 방법으로 표현할 수 있습니다:

// 방법 1: 타입 뒤에 []
let list1: number[] = [1, 2, 3];

// 방법 2: 제네릭 배열 타입
let list2: Array<number> = [1, 2, 3];

3. 튜플(Tuple)

튜플 타입은 고정된 요소 수와 타입을 가진 배열을 표현합니다:

// 튜플 선언
let x: [string, number];

// 올바른 초기화
x = ["hello", 10]; // OK

// 잘못된 초기화
// x = [10, "hello"]; // Error: Type 'number' is not assignable to type 'string'

4. 열거형(Enum)

열거형은 숫자 값 집합에 더 친숙한 이름을 부여하는 방법입니다:

enum Color {
  Red,    // 0
  Green,  // 1
  Blue,   // 2
}

let c: Color = Color.Green;
console.log(c); // 출력: 1

// 시작 값을 변경할 수 있습니다
enum Direction {
  Up = 1,
  Down,   // 2
  Left,   // 3
  Right,  // 4
}

// 모든 값을 수동으로 설정할 수도 있습니다
enum StatusCode {
  OK = 200,
  BadRequest = 400,
  Unauthorized = 401,
  NotFound = 404,
}

5. Any 타입

어떤 타입이든 할당할 수 있는 any 타입은 점진적인 타입 도입이나 기존 자바스크립트 코드와의 호환성을 위해 사용됩니다:

let notSure: any = 4;
notSure = "문자열로 변경 가능";
notSure = false; // 불리언으로도 변경 가능

// 배열에도 사용 가능
let mixedList: any[] = [1, true, "free"];
mixedList[0] = { a: 1 }; // 객체도 할당 가능

6. Void 타입

반환 값이 없는 함수의 반환 타입으로 사용됩니다:

function logMessage(message: string): void {
  console.log(message);
  // 반환 값 없음
}

// 변수에도 사용 가능하지만, undefined나 null만 할당 가능
let unusable: void = undefined;

7. Never 타입

절대 발생하지 않는 값의 타입을 나타냅니다:

// 함수가 예외를 던지거나 무한 루프에 빠질 때
function error(message: string): never {
  throw new Error(message);
}

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

8. 객체(Object) 타입

원시 타입이 아닌 모든 타입을 나타냅니다:

let obj: object = { key: "value" };
// obj = 42; // Error: Type '42' is not assignable to type 'object'

// 더 구체적인 객체 타입을 지정할 수도 있습니다
let person: { name: string; age: number } = {
  name: "Alice",
  age: 25,
};

타입 어설션(Type Assertions)

컴파일러에게 "내가 더 잘 알고 있으니 이 값을 특정 타입으로 처리해"라고 말하는 방법입니다:

// 방법 1: 'angle-bracket' 문법
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

// 방법 2: 'as' 문법 (JSX와 함께 사용할 때는 이 방법만 허용됨)
let someValue2: any = "this is a string";
let strLength2: number = (someValue2 as string).length;

타입 추론(Type Inference)

타입스크립트는 명시적인 타입 표기가 없어도 타입을 추론합니다:

// x는 명시적으로 타입을 지정하지 않았지만, number로 추론됨
let x = 3;

// 다른 타입 할당 시 오류 발생
// x = "문자열"; // Error: Type 'string' is not assignable to type 'number'

유니언 타입(Union Types)

여러 타입 중 하나일 수 있음을 나타냅니다:

// number 또는 string 타입이 될 수 있음
let id: number | string;
id = 101; // OK
id = "202"; // OK
// id = true; // Error: Type 'boolean' is not assignable to type 'number | string'

타입 가드(Type Guards)

유니언 타입을 사용할 때 특정 타입에만 존재하는 속성이나 메서드를 사용하려면 타입 가드가 필요합니다:

function printId(id: number | string) {
  if (typeof id === "string") {
    // 여기서 id는 string 타입
    console.log(id.toUpperCase());
  } else {
    // 여기서 id는 number 타입
    console.log(id);
  }
}

타입 별칭(Type Aliases)

타입에 새 이름을 부여하는 방법입니다:

type Point = {
  x: number;
  y: number;
};

function printCoord(pt: Point) {
  console.log(`x 좌표: ${pt.x}, y 좌표: ${pt.y}`);
}

printCoord({ x: 100, y: 100 });

마치며

이번 포스팅에서는 타입스크립트의 기본 타입들에 대해 알아보았습니다. 이러한 타입들을 잘 활용하면 더 안전하고 가독성 있는 코드를 작성할 수 있습니다. 다음 포스팅에서는 인터페이스(Interface)에 대해 자세히 알아보겠습니다.

타입스크립트의 기본 타입을 완벽하게 이해하는 것은 타입스크립트 마스터의 첫 단계입니다. 많은 연습을 통해 타입 시스템의 장점을 최대한 활용해 보세요!