원시 타입 (Primitive Types)
// string
let name: string = "철수";
let greeting: string = `안녕, ${name}!`;
// number (정수, 실수 구분 없음)
let age: number = 25;
let price: number = 9.99;
// boolean
let isActive: boolean = true;
let isLoggedIn: boolean = false;
// null과 undefined
let empty: null = null;
let notSet: undefined = undefined;
타입 추론 (Type Inference)
직접 타입을 명시하지 않아도 TypeScript가 추론합니다.
let name = "철수"; // TypeScript: string으로 추론
let age = 25; // TypeScript: number로 추론
let active = true; // TypeScript: boolean으로 추론
name = 30; // ❌ 오류: number를 string에 할당 불가
값이 명확하면 타입 생략이 가능하지만, 함수 매개변수는 명시하는 것이 좋습니다.
배열 (Array)
// 방법 1: 타입[]
let fruits: string[] = ["사과", "바나나", "체리"];
// 방법 2: Array<타입>
let scores: Array<number> = [85, 92, 78];
// 여러 타입 (유니온)
let mixed: (string | number)[] = ["철수", 25, "영희", 30];
// 읽기 전용
const ROI_HEADERS: readonly string[] = ["이름", "나이", "점수"];
// ROI_HEADERS.push("추가"); // ❌ 오류
튜플 (Tuple)
고정된 길이와 타입을 가진 배열입니다.
// [타입, 타입, ...]
let person: [string, number] = ["철수", 25];
// 분해 할당
const [personName, personAge] = person;
// 레이블이 있는 튜플 (TypeScript 4.0+)
type Point = [x: number, y: number];
const point: Point = [10, 20];
// CSV 파싱 결과처럼 사용
type Row = [id: number, name: string, score: number];
const rows: Row[] = [
[1, "철수", 85],
[2, "영희", 92],
];
열거형 (Enum)
관련된 상수를 그룹화합니다.
// 숫자 열거형 (기본값 0부터)
enum Direction {
Up, // 0
Down, // 1
Left, // 2
Right, // 3
}
let dir: Direction = Direction.Up;
// 문자열 열거형 (권장)
enum Status {
Active = "ACTIVE",
Inactive = "INACTIVE",
Pending = "PENDING",
}
function getLabel(status: Status): string {
switch (status) {
case Status.Active: return "활성";
case Status.Inactive: return "비활성";
case Status.Pending: return "대기";
}
}
any, unknown, never
// any: 타입 검사 비활성화 (사용 자제)
let anything: any = "문자열";
anything = 42; // 허용
anything.method(); // 허용 (런타임 오류 가능)
// unknown: 안전한 any (사용 전 타입 확인 필수)
let value: unknown = "문자열";
// value.toUpperCase(); // ❌ 오류
if (typeof value === "string") {
value.toUpperCase(); // ✅ 타입 좁히기 후 사용
}
// never: 절대 발생하지 않는 값
function throwError(message: string): never {
throw new Error(message);
}
// 완전한 타입 처리 검증에 활용
function handleStatus(status: "active" | "inactive") {
if (status === "active") return "활성";
if (status === "inactive") return "비활성";
const _: never = status; // 모든 케이스 처리됨을 증명
}
void: 반환값 없음
function logMessage(message: string): void {
console.log(message);
// return undefined; // 가능하지만 불필요
}
타입 단언 (Type Assertion)
TypeScript보다 개발자가 타입을 더 잘 알 때 사용합니다.
const input = document.getElementById("username") as HTMLInputElement;
console.log(input.value);
// 또는 (JSX에서는 as 방식 사용)
const input2 = <HTMLInputElement>document.getElementById("username");
정리
| 타입 | 예시 | 설명 |
|---|---|---|
string | "hello" | 문자열 |
number | 42, 3.14 | 숫자 |
boolean | true, false | 불리언 |
string[] | ["a", "b"] | 배열 |
[string, number] | ["철수", 25] | 튜플 |
enum | Direction.Up | 열거형 |
any | 무엇이든 | 타입 검사 비활성 |
unknown | 안전한 any | 사용 전 검사 필요 |
never | - | 절대 발생 안 함 |
void | - | 반환값 없음 |
다음 편에서는 인터페이스와 타입 별칭 — 복잡한 객체 구조를 정의하는 방법을 배웁니다.