TypeScript 입문 총정리 — 설치부터 실전 팁까지 한번에

JavaScript로 개발하다 보면 런타임에서 터지는 타입 에러 때문에 시간을 허비한 경험, 한 번쯤은 있을 겁니다. TypeScript는 이런 문제를 코드 작성 단계에서 미리 잡아주는 언어입니다. 이 글에서는 TypeScript가 뭔지부터 설치, 기본 문법, 실전 팁까지 한 번에 정리합니다.

TypeScript란 무엇인가

TypeScript는 Microsoft가 만든 오픈소스 프로그래밍 언어로, JavaScript에 정적 타입 시스템을 얹은 슈퍼셋입니다. 쉽게 말해 JavaScript 코드에 타입을 명시할 수 있고, 컴파일 시점에 오류를 잡아줍니다. 최종적으로는 순수 JavaScript로 변환되어 실행됩니다.

2012년 첫 공개 이후 꾸준히 성장해 2026년 현재 프론트엔드·백엔드를 가리지 않고 사실상 표준처럼 쓰이고 있습니다. React, Vue, Angular 등 주요 프레임워크 모두 TypeScript를 공식 지원하고 있습니다.

왜 TypeScript를 써야 할까

JavaScript만으로도 충분하다고 느낄 수 있지만, 프로젝트 규모가 커지면 상황이 달라집니다.

• 컴파일 타임 에러 감지 — 런타임에서 터질 버그를 미리 잡아줍니다
• 자동완성과 인텔리센스 — IDE가 타입 정보를 기반으로 정확한 코드 제안을 합니다
• 코드 가독성 향상 — 함수의 입출력 타입만 봐도 어떤 데이터를 다루는지 파악됩니다
• 리팩토링 안전성 — 변수명이나 구조를 바꿀 때 영향받는 곳을 바로 알 수 있습니다
• 팀 협업 효율 — 타입 정의가 곧 문서 역할을 해서 커뮤니케이션 비용이 줄어듭니다

TypeScript 설치 방법

Node.js가 설치되어 있다면 npm 또는 yarn으로 간단하게 설치할 수 있습니다.

# 전역 설치
npm install -g typescript

# 프로젝트 로컬 설치 (권장)
npm install --save-dev typescript

# 설치 확인
tsc --version

전역 설치보다는 프로젝트 단위로 설치하는 것을 추천합니다. 프로젝트마다 TypeScript 버전이 다를 수 있기 때문입니다.

설치 후 npx tsc --init 명령어로 tsconfig.json 파일을 생성하면 기본 설정이 잡힙니다.

TypeScript Playground로 맛보기

설치 없이 바로 TypeScript를 체험해 보고 싶다면 공식 Playground를 활용하세요. 브라우저에서 TypeScript 코드를 작성하면 실시간으로 JavaScript 변환 결과를 보여줍니다.

왼쪽에 TypeScript 코드를 입력하면 오른쪽에 컴파일된 JavaScript가 표시됩니다. 타입 에러가 있으면 빨간 밑줄로 바로 알려주기 때문에 학습할 때 아주 유용합니다.

👉 TypeScript Playground 바로가기

기본 타입 알아보기

TypeScript의 핵심은 타입 선언입니다. 변수, 함수 파라미터, 반환값에 타입을 지정할 수 있습니다.

원시 타입

let username: string = "개발자";
let age: number = 28;
let isActive: boolean = true;

배열과 튜플

let scores: number[] = [90, 85, 77];
let info: [string, number] = ["김철수", 30];  // 튜플

enum

enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE",
  Pending = "PENDING"
}
let current: Status = Status.Active;

any와 unknown

let flexible: any = "문자열";
flexible = 42;  // any는 뭐든 됨 (비추천)

let safer: unknown = "문자열";
// safer.toUpperCase();  // 에러! unknown은 타입 확인 먼저
if (typeof safer === "string") {
  safer.toUpperCase();  // OK
}

any는 타입 체크를 완전히 무시하므로 가급적 피하고, unknown을 쓰는 것이 안전합니다.

일상적으로 쓰는 타입들

유니온 타입

function formatId(id: string | number) {
  if (typeof id === "string") {
    return id.toUpperCase();
  }
  return id.toString();
}

하나의 파라미터가 여러 타입을 받을 수 있을 때 파이프(|)로 연결합니다.

리터럴 타입

type Direction = "up" | "down" | "left" | "right";

function move(dir: Direction) {
  console.log(`이동: ${dir}`);
}
move("up");    // OK
// move("diagonal");  // 에러!

타입 별칭 (Type Alias)

type Point = {
  x: number;
  y: number;
};

const center: Point = { x: 0, y: 0 };

인터페이스와 객체 타입

객체의 형태를 정의할 때는 인터페이스를 사용합니다. 타입 별칭과 비슷하지만 확장(extends)이 가능하다는 차이가 있습니다.

interface User {
  name: string;
  email: string;
  age?: number;  // 선택적 프로퍼티
}

interface Admin extends User {
  role: string;
  permissions: string[];
}

const admin: Admin = {
  name: "관리자",
  email: "admin@example.com",
  role: "super",
  permissions: ["read", "write", "delete"]
};

실무에서는 API 응답 타입이나 컴포넌트 props를 인터페이스로 정의해 두면 협업이 훨씬 수월해집니다.

함수에 타입 적용하기

함수의 매개변수와 반환값에도 타입을 지정할 수 있습니다.

// 기본 함수 타입
function greet(name: string): string {
  return `안녕하세요, ${name}님!`;
}

// 화살표 함수
const add = (a: number, b: number): number => a + b;

// 콜백 함수 타입
function processData(
  data: string[],
  callback: (item: string, index: number) => void
) {
  data.forEach((item, i) => callback(item, i));
}

반환 타입을 명시하면 함수 내부에서 실수로 다른 타입을 반환하는 것을 방지할 수 있습니다.

타입 좁히기 (Narrowing)

유니온 타입을 사용할 때 특정 타입으로 좁혀서 처리하는 기법입니다. TypeScript가 코드 흐름을 분석해서 자동으로 타입을 추론합니다.

function printValue(value: string | number | null) {
  if (value === null) {
    console.log("값 없음");
    return;
  }
  if (typeof value === "string") {
    console.log(value.toUpperCase());  // string으로 추론
  } else {
    console.log(value.toFixed(2));     // number로 추론
  }
}

typeof, instanceof, in 연산자, 그리고 사용자 정의 타입 가드를 통해 타입을 좁힐 수 있습니다.

제네릭 기초

제네릭은 타입을 파라미터처럼 받아서 재사용 가능한 컴포넌트를 만드는 기법입니다.

// 제네릭 함수
function getFirst(arr: T[]): T | undefined {
  return arr[0];
}

const num = getFirst([1, 2, 3]);       // number로 추론
const str = getFirst(["a", "b", "c"]); // string으로 추론

// 제네릭 인터페이스
interface ApiResponse {
  data: T;
  status: number;
  message: string;
}

type UserResponse = ApiResponse;
type ProductList = ApiResponse;

API 응답 래퍼나 유틸리티 함수를 만들 때 제네릭을 활용하면 타입 안전성과 재사용성을 동시에 잡을 수 있습니다.

tsconfig.json 핵심 설정

TypeScript 프로젝트의 컴파일 옵션은 tsconfig.json에서 관리합니다.

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "resolveJsonModule": true,
    "declaration": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

핵심 옵션별 역할을 정리하면 이렇습니다.

• strict: true — 모든 엄격 모드 옵션을 한 번에 활성화합니다. 입문 때부터 켜는 것을 권장합니다
• target — 컴파일 결과물의 JavaScript 버전을 지정합니다
• module — 모듈 시스템(CommonJS, ESNext 등)을 설정합니다
• outDir / rootDir — 소스 코드 위치와 출력 디렉토리를 분리합니다
• sourceMap — 디버깅용 소스맵 파일을 생성합니다

TypeScript 치트시트 활용

공식 사이트에서 제공하는 치트시트를 다운로드해 두면 타입 문법이 헷갈릴 때 빠르게 참고할 수 있습니다. 인터페이스, 타입, 클래스, 제어 흐름 분석 등 주제별로 정리되어 있어서 실무 중에도 유용합니다.

실전에서 자주 쓰는 유틸리티 타입

TypeScript는 내장 유틸리티 타입을 제공해서 기존 타입을 변환하는 작업을 간편하게 해줍니다.

// Partial — 모든 프로퍼티를 선택적으로
type UpdateUser = Partial;

// Pick — 특정 프로퍼티만 선택
type UserName = Pick;

// Omit — 특정 프로퍼티 제외
type UserWithoutEmail = Omit;

// Record — 키-값 쌍 타입
type UserRoles = Record;

// Required — 모든 프로퍼티를 필수로
type StrictUser = Required;

이 유틸리티 타입들은 한 번 익혀두면 코드량을 크게 줄여줍니다.

TypeScript 입문자를 위한 실전 팁

1. strict 모드부터 켜세요 — 나중에 켜면 수정할 곳이 산더미입니다. 처음부터 습관을 들이는 게 낫습니다
2. any는 최후의 수단으로 — 급할 때 any를 쓰면 TypeScript를 쓰는 의미가 사라집니다
3. 타입 추론을 활용하세요 — 모든 곳에 타입을 쓸 필요는 없습니다. const x = 10;이면 TypeScript가 number로 알아서 추론합니다
4. IDE와 함께 쓰세요 — VS Code와 TypeScript 조합은 자동완성, 에러 표시, 리팩토링 지원이 탁월합니다
5. 점진적으로 도입하세요 — 기존 JS 프로젝트에 .ts 확장자를 하나씩 바꿔가면서 적용할 수 있습니다
6. 공식 핸드북을 읽으세요 — 가장 정확하고 잘 정리된 학습 자료입니다

마무리

TypeScript는 JavaScript 개발자가 가장 적은 학습 비용으로 가장 큰 생산성 향상을 얻을 수 있는 선택입니다. 처음에는 타입 선언이 번거롭게 느껴질 수 있지만, 프로젝트가 커질수록 TypeScript가 잡아주는 버그의 양을 체감하게 됩니다.

오늘 소개한 기본 타입, 인터페이스, 함수 타입, 제네릭, tsconfig 설정만 익히면 실무에 바로 투입할 수 있는 수준이 됩니다. Playground에서 직접 코드를 쳐보면서 감을 잡아보세요.

---

✨ 자동화가 필요하신가요?

SNS/유튜브 자동 포스팅, AI 자동화 구축 — 맞춤 상담 가능합니다.

👉 크몽에서 의뢰하기

📱 인스타: @dev_orijin

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.