TypeScript 입문: 타입 기초부터 인터페이스, 제네릭까지

"TypeScript 꼭 배워야 하나요?" 이제는 선택이 아니라 필수에 가깝습니다. TypeScript는 자바스크립트에 정적 타입을 더해, 코드를 실행하기 전에 에러를 잡아줍니다. undefined is not a function 같은 런타임 에러를 IDE에서 미리 빨간 줄로 알려주는 것이죠. 처음엔 타입을 적는 게 번거로워 보이지만, 협업과 리팩터링에서 진가를 발휘합니다.

기본 타입과 타입 추론

변수에 : 타입을 붙여 명시하지만, 대부분 TypeScript가 자동으로 추론해줍니다.

let age: number = 25;
let name: string = '민수';
let isAdmin: boolean = false;
let scores: number[] = [90, 85, 100];

// 함수: 매개변수와 반환 타입 명시
function add(a: number, b: number): number {
  return a + b;
}

// 타입 추론: 굳이 안 적어도 number로 추론됨
let total = add(1, 2); // total은 number

팁: 모든 곳에 타입을 적을 필요는 없습니다. 함수의 매개변수·반환값처럼 경계가 되는 부분만 명시하고 나머지는 추론에 맡기는 게 깔끔합니다.

인터페이스와 타입 별칭

객체의 구조를 정의할 때 interface 또는 type을 씁니다.

interface User {
  id: number;
  name: string;
  email?: string; // ? = 선택적 속성
  readonly role: string; // 읽기 전용
}

const user: User = { id: 1, name: '지은', role: 'admin' };
// user.role = 'user'; // 에러! readonly

구분	interface	type
주 용도	객체 구조 정의	모든 타입 별칭
확장	extends	& (교차 타입)
선언 병합	가능	불가능
유니온	불가능	가능 (A | B)

유니온 타입과 제네릭

유니온 타입(|)은 여러 타입 중 하나를 허용합니다. 제네릭은 타입을 매개변수처럼 받아 재사용성을 높입니다.

// 유니온: 문자열 또는 숫자
function printId(id: string | number) {
  console.log(`ID: ${id}`);
}

// 제네릭: 어떤 타입이든 받아 그대로 반환
function wrap<T>(value: T): T[] {
  return [value];
}

const nums = wrap(10);      // number[]
const strs = wrap('hello'); // string[]

// 실무 예: API 응답 래퍼
interface ApiResponse<T> {
  data: T;
  status: number;
}

마무리 체크리스트

• 기본 타입(number, string, boolean, 배열)부터 확실히
• 타입은 **경계(함수 시그니처, API)**에 집중하고 나머지는 추론 활용
• 객체 구조는 interface, 유니온·복잡한 조합은 type
• 여러 타입 허용은 유니온(|), 재사용 가능한 타입은 제네릭(<T>)
• any는 최후의 수단 — 가능하면 unknown이나 정확한 타입을 쓰기

작은 프로젝트라도 TypeScript로 시작하면, 코드가 곧 문서가 되고 버그는 절반으로 줄어듭니다.