타입스크립트 교재 · 2편 / 20편

TS 기본 타입 — string·number·boolean·array

7개 기본 타입과 "추론이 알아서" vs "직접 적자" 경계까지.

입문읽는 시간 7분2026-05-16
화면 위에 TypeScript 기본 타입 7개가 색깔로 구분되어 나열된 일러스트

1편에서 const greeting: string = "Hello" 같은 타입 표기를 살짝 봤습니다. 2편은 그 표기에 들어가는 기본 타입 7가지 를 하나씩 정리합니다. 그리고 정말 중요한 질문 — "어디까지 TS 가 알아서 추론하고, 어디서부터 내가 적어야 하나" — 의 경계도 같이 다룹니다.

7개 기본 타입 — 한 표로 정리

타입예시 값언제 쓰나
string"hello", `template`문자열 전부
number42, 3.14, NaN, Infinity정수·소수·특수값까지 한 타입
booleantrue, false참/거짓 두 값만
array[1,2,3] (T[])같은 타입 여러 개 순서대로
tuple[string, number]고정 길이·각 위치 타입 지정
any아무거나TS 검사 끄기 (가급적 피함)
unknown아무거나 (안전)타입 모를 때 — 사용 전 검사 강제

string · number · boolean — 가장 자주 쓰는 셋

const name: string = "준성";
const age: number = 39;
const isAdmin: boolean = true;

// 템플릿 리터럴도 string
const greeting: string = `안녕, ${name}!`;

// number 는 정수·실수 구분 없음
const pi: number = 3.14159;
const big: number = Infinity;
const oops: number = NaN;

JS 의 typeof 결과와 거의 1:1 매칭이지만 한 가지 주의: NaN 도 number 타입 입니다. "숫자가 아니다" 라는 뜻이지만 타입은 숫자. 헷갈리니까 7편(자료형) 에서 다시 깊게 다룹니다.

array vs tuple — 둘이 어떻게 다른가

JS 에는 둘 다 그냥 배열이지만, TS 는 구분합니다.

// array — 같은 타입 여러 개, 길이 자유
const nums: number[] = [1, 2, 3];
const names: Array<string> = ["A", "B"];      // 같은 표현
nums.push(4);                                   // OK
nums.push("five");                              // ❌ string 안 됨

// tuple — 고정 길이, 위치별 타입
const point: [number, number] = [3, 4];         // (x, y) 처럼
const row: [string, number, boolean] = ["a", 1, true];
row[0].toUpperCase();                           // OK (string 메서드)
row[1].toFixed(2);                              // OK (number 메서드)

tuple 의 진가. React 의 useState 가 정확히 tuple 입니다 — [value, setter] 두 원소, 각 위치마다 다른 타입. tuple 이 없으면 둘 다 any 가 돼서 도움이 안 됩니다.

any vs unknown — 둘 다 "뭐든 OK" 인데 왜 둘인가

이 둘의 차이를 이해하면 TS 초보를 벗어납니다.

// any — 타입 검사 OFF
let x: any = "hello";
x.toUpperCase();          // OK
x.foo.bar.baz();          // OK ← 위험: 실제로는 string 인데 통과

// unknown — 타입 검사 ON (사용 전 좁히기 강제)
let y: unknown = "hello";
y.toUpperCase();          // ❌ 'y' is of type 'unknown'

if (typeof y === "string") {
  y.toUpperCase();        // OK ← 좁혔으니 허용
}

외부에서 받은 JSON·API 응답·fetch 결과 등 "무엇인지 모르는" 데이터는 unknown 으로 받고, 그다음 검사로 좁힙니다. any 는 "검사 포기" 라서 TS 의 가치를 죽입니다 — 14편(타입 가드) 에서 unknown 좁히기 패턴을 본격 다룹니다.

타입 추론 — TS 가 알아서 해주는 80%

다음 두 코드는 같습니다.

// 직접 표기
const name: string = "준성";
const ages: number[] = [10, 20, 30];

// 추론에 맡김 (권장)
const name = "준성";          // 추론: string
const ages = [10, 20, 30];     // 추론: number[]

오히려 모든 곳에 타입을 박는 건 노이즈입니다. 그럼 언제 직접 표기하나? 다음 4가지가 실전 가이드입니다.

  1. 함수 매개변수 — 추론 안 되니 항상 표기 (반환은 보통 추론).
  2. 빈 배열·객체 초기화const arr: string[] = [] 안 쓰면 never[] 가 됨.
  3. 여러 타입이 섞일 수 있을 때let value: string | number.
  4. API 응답 등 외부 입력 — unknown 으로 받고 좁히기.

피해야 할 안티패턴. 모든 변수에 : any 를 박는 것. "tsconfig 에서 strict 끄고 점진 도입" 의 첫 단계로는 OK 이지만, 결국 JS 와 다를 게 없어집니다. 10편(tsconfig) 과 18편(strict 옵션) 에서 다시 강조합니다.

3편 — 함수에 타입 붙이기

매개변수·반환·옵션 파라미터·overload — 함수 시그니처를 깔끔하게 만드는 법.

📚 쉽게 배우는 타입스크립트 교재
이전: 1편 설치 · 현재: 2편 (입문) · 다음 → 3편 함수 타입 · 진행: 2/20

© 2026 주나이테크(주) @JUNAITECH