JavaScript에서 TypeScript로 넘어올 때 제일 낯선 게 바로 타입이에요. “let x = 1; 이러면 되는데 왜 let x: number = 1; 이래야 해?” 이런 생각 들죠. 근데 타입 한번 제대로 배워두면 버그가 확 줄어들어요. 오늘은 TypeScript의 기본 타입들을 하나씩 알아볼게요.

기본 타입 3종 세트

number (숫자)

정수, 소수, 16진수, 2진수 전부 number예요.

let age: number = 25;
let price: number = 9.99;
let hexValue: number = 0xf00d;
let binaryValue: number = 0b1010;

console.log(age);          // 25
console.log(price);        // 9.99
console.log(hexValue);     // 61453
console.log(binaryValue);  // 10

실행 결과:

숫자가 아닌 걸 넣으면 에러 나요:

let count: number = "10";  // 에러!

실행 결과:

string (문자열)

작은따옴표, 큰따옴표, 백틱 전부 가능해요.

let name: string = "김철수";
let greeting: string = '안녕하세요';
let message: string = `${name}님, ${greeting}!`;

console.log(message);

실행 결과:

boolean (참/거짓)

true 또는 false만 가능해요.

let isStudent: boolean = true;
let hasLicense: boolean = false;

if (isStudent) {
  console.log("학생입니다");
}

실행 결과:

배열 (Array)

배열은 두 가지 방법으로 타입을 지정할 수 있어요.

방법 1: 타입[]

let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["김철수", "이영희", "박민수"];

numbers.push(6);       // OK
numbers.push("7");     // 에러!

실행 결과:

방법 2: Array<타입>

let scores: Array<number> = [90, 85, 88, 92];
let fruits: Array<string> = ["사과", "바나나", "오렌지"];

둘 다 똑같은데, 저는 number[] 스타일을 더 자주 써요. 타이핑이 짧거든요.

튜플 (Tuple)

튜플은 길이와 타입이 고정된 배열이에요. 배열과 비슷한데 더 엄격합니다.

let user: [string, number, boolean];
user = ["김철수", 25, true];     // OK
user = [25, "김철수", true];     // 에러! 순서가 다름
user = ["김철수", 25];           // 에러! 길이가 다름

실행 결과:

튜플 활용 예제

함수에서 여러 값을 리턴할 때 유용해요:

function getUserInfo(): [string, number] {
  return ["김철수", 25];
}

const [name, age] = getUserInfo();
console.log(`${name}님은 ${age}살입니다`);

실행 결과:

열거형 (Enum)

Enum은 관련된 상수들을 묶어놓은 거예요. 숫자나 문자열에 이름을 붙일 수 있어요.

숫자 Enum

enum Direction {
  Up,      // 0
  Down,    // 1
  Left,    // 2
  Right    // 3
}

let playerDirection: Direction = Direction.Up;
console.log(playerDirection);  // 0

if (playerDirection === Direction.Up) {
  console.log("위로 이동!");
}

실행 결과:

문자열 Enum

enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

let favoriteColor: Color = Color.Blue;
console.log(favoriteColor);  // "BLUE"

실행 결과:

실무에서는 문자열 Enum을 더 많이 써요. 디버깅할 때 값이 뭔지 바로 보이거든요.

any (모든 타입)

any는 타입 체크를 건너뛰는 특수한 타입이에요. 뭐든 허용합니다.

let anything: any = 123;
anything = "문자열";
anything = true;
anything = { name: "철수" };

console.log(anything);

실행 결과:

any 사용 시 주의점

any 쓰면 TypeScript의 장점이 사라져요. 타입 체크를 안 하니까요. 정말 불가피할 때만 쓰세요.

let value: any = "100";
let result = value * 2;  // 에러 안 나지만 런타임에 NaN 나옴

이런 버그가 생길 수 있어요!

unknown (알 수 없는 타입)

unknown은 any보다 안전한 버전이에요. any처럼 뭐든 받지만, 사용하기 전에 타입 체크를 강제해요.

let uncertain: unknown = "문자열";

// 바로 사용하면 에러
// let length = uncertain.length;  // 에러!

// 타입 체크 후 사용
if (typeof uncertain === "string") {
  let length = uncertain.length;
  console.log(length);  // OK
}

실행 결과:

any 대신 unknown을 쓰는 게 더 안전해요!

void (값이 없음)

함수가 아무것도 리턴하지 않을 때 사용해요.

function sayHello(): void {
  console.log("안녕하세요!");
  // return 값이 없음
}

const result = sayHello();
console.log(result);  // undefined

실행 결과:

null과 undefined

JavaScript에는 null과 undefined가 있죠. TypeScript에서도 타입으로 사용할 수 있어요.

let empty: null = null;
let notDefined: undefined = undefined;

// strictNullChecks 옵션이 true면 아래는 에러
let name: string = null;  // 에러!

실행 결과:

null을 허용하려면:

let name: string | null = null;  // OK
name = "김철수";  // OK

|는 “또는”이라는 뜻이에요. “string 또는 null”이라는 의미입니다. 이걸 유니온 타입이라고 해요. 나중에 자세히 배울게요!

타입 추론

TypeScript는 똑똑해서 타입을 명시하지 않아도 알아서 추론해요.

let num = 123;        // number로 추론
let str = "안녕";      // string으로 추론
let bool = true;      // boolean으로 추론

// num = "문자열";    // 에러! 이미 number로 추론됨

그래도 명시적으로 타입을 쓰는 게 코드 가독성에 좋아요. 특히 함수 매개변수나 리턴 타입은 꼭 명시하는 걸 추천합니다.

실전 예제

배운 타입들을 조합해서 간단한 함수 만들어볼게요:

function calculateTotal(
  prices: number[],
  discount: number,
  hasMembership: boolean
): number {
  let total = prices.reduce((sum, price) => sum + price, 0);
  total = total * (1 - discount);

  if (hasMembership) {
    total = total * 0.95;  // 회원 5% 추가 할인
  }

  return total;
}

const prices = [10000, 20000, 15000];
const finalPrice = calculateTotal(prices, 0.1, true);
console.log(`최종 가격: ${finalPrice}원`);

실행 결과:

정리하면

• number, string, boolean: 가장 기본적인 타입
• array: 같은 타입의 데이터 모음
• tuple: 고정된 길이와 타입의 배열
• enum: 관련된 상수들의 집합
• any: 모든 타입 허용 (가급적 사용 자제)
• unknown: any보다 안전한 버전
• void: 리턴값이 없음
• null, undefined: 값이 없음을 나타냄

다음 글에서는 함수와 타입에 대해 알아볼게요. 매개변수 타입, 리턴 타입, 선택적 매개변수, 함수 오버로딩까지 배워봅시다!

---

다음 글 보기

← 블로그 목록으로