TypeScriptTypeScript 기초 · 2기초

TypeScript 기본 타입 — 원시 타입부터 배열까지

TypeScript타입stringnumberarrayenum

원시 타입 (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"문자열
number42, 3.14숫자
booleantrue, false불리언
string[]["a", "b"]배열
[string, number]["철수", 25]튜플
enumDirection.Up열거형
any무엇이든타입 검사 비활성
unknown안전한 any사용 전 검사 필요
never-절대 발생 안 함
void-반환값 없음

다음 편에서는 인터페이스와 타입 별칭 — 복잡한 객체 구조를 정의하는 방법을 배웁니다.

궁금한 점이 있으신가요?

협업·의뢰는 아래로, 가벼운 소통은 인스타그램 @bluefox._.hi도 환영이에요.