[TypeScript] 기본 타입(Basic Types) 완벽 정리

DevBadger·2026년 2월 3일

typescript web 타입스크립트

TypeScript

목록 보기

3/5

타입스크립트를 배우는 가장 첫 번째 단계는 변수에 "타입의 이름표"를 붙이는 것입니다. 자바스크립트의 유연함에 타입스크립트의 단단함을 더해주는 핵심 기본 타입들을 예제와 함께 알아보겠습니다.

변수 이미지
출처: 한 입 크기로 잘라먹는 타입스크립트(TypeScript)

1. 변수 선언과 타입 어노테이션(Annotation)

타입스크립트에서는 변수명 뒤에 콜론(:)을 붙여 타입을 명시합니다. 이를 타입 어노테이션이라고 부릅니다.

// 기본 변수 선언
const userId: string = "user123";      // 문자열
let messageCount: number = 0;          // 숫자
const isLoading: boolean = true;       // 불리언

2. 원시 타입 (Primitive Types)

하나의 값만 저장하는 가장 기본적인 타입들입니다.

숫자, 문자열, 불리언

let num: number = 123;      // 정수, 실수, Infinity, NaN 모두 number!
let str: string = "hello";  // 백틱(`)을 이용한 템플릿 리터럴도 가능
let bool: boolean = true;   // true 또는 false

null과 undefined

기본적으로 null과 undefined는 각각 자기 자신의 타입만 가질 수 있습니다.

let nullVal: null = null;
let undeVal: undefined = undefined;

// [꿀팁] 설정을 통해 엄격한 검사를 끌 수도 있지만, 
// 실무에서는 strictNullChecks: true를 유지하는 것이 안전합니다.

리터럴 타입 (Literal Types)

특정 "값" 자체를 타입으로 지정할 수 있습니다. 해당 값 외에는 넣을 수 없게 엄격히 제한합니다.

let exactNum: 10 = 10;
// exactNum = 12; // ‼️ 에러 발생! 10만 넣을 수 있습니다.

3. 배열(Array)과 튜플(Tuple)

데이터 묶음을 다룰 때 사용하는 타입들입니다.

배열

let numArr: number[] = [1, 2, 3];
let strArr: Array<string> = ["a", "b", "c"]; // 제네릭 방식

// 여러 타입이 섞인 배열 (유니온 타입 활용)
let multiArr: (string | number)[] = [1, "hello"];

// 다차원 배열
let doubleArr: number[][] = [[1, 2], [3, 4]];

왜 Array이 제네릭인가요? 제네릭(Generic)은 타입을 마치 파라미터처럼 넘겨주는 방식을 말합니다. Array라는 틀은 이미 만들어져 있고, 그 안에 어떤 타입의 알맹이를 담을지 '<>' 사이에 써주는 것이죠. "배열(Array)인데, 알맹이는 문자열(string)로 채울 거야!"라고 선언하는 방식이라 제네릭 방식이라고 부릅니다.

튜플

길이와 타입 순서가 고정된 배열입니다. 자바스크립트에는 없는 타입스크립트만의 특징입니다.

let user: [string, number] = ["홍길동", 1];
// user = [1, "홍길동"]; // ‼️ 에러! 순서가 맞지 않습니다.

// [주의] 튜플은 컴파일 후 일반 배열이 되므로 push, pop은 허용되지만, 
// 초기 정의된 구조를 강제하여 실수를 방지하는 데 매우 효과적입니다.

4. 실무 데이터 구조화: Interface & Optional

실제 개발에서는 객체 형태의 데이터를 많이 다룹니다. interface를 통해 구조를 정의합니다.

interface UserSettings {
  theme: "light" | "dark";    // 리터럴과 유니온(|)의 조합
  notificationsEnabled?: boolean; // ?는 '없어도 됨'을 의미 (Optional)
}

const settings: UserSettings = {
  theme: "dark" // notificationsEnabled는 생략 가능
};