---

# 📌 서론 – “왜 또 다른 언어가 필요할까?”

자바스크립트를 쓰다 보면 ‘이 변수는 뭐가 들어올까?’ 라는 고민을 한 번쯤은 해보셨을 겁니다.

동적 타이핑(dynamically‑typed) 특성 때문에 런타임 오류가 눈에 띄게 늘어나고, 큰 프로젝트에서는 코드 유지보수가 점점 힘들어지죠.

이때 등장하는 것이 바로 TypeScript 입니다.

마이크로소프트가 만든 타입스크립트(TypeScript) 는 자바스크립트에 정적 타입(static typing) 을 추가해, 개발 단계에서 오류를 미리 잡아내고 IDE 자동 완성, 리팩터링 등을 한층 편리하게 만들어 줍니다.

이번 글에서는 “TypeScript가 뭐고, 왜 써야 할까?” 라는 기본 질문에 답하고, 초보자도 바로 적용할 수 있는 실전 팁을 단계별로 소개합니다.

---

# 1️⃣ TypeScript란? – 자바스크립트 위에 얹은 타입 시스템

| 특징 | 설명 |

|------|------|

| 정적 타입 | 변수, 함수 매개변수, 반환값 등에 타입을 명시해 컴파일 단계에서 오류를 검출 |

| ESNext 문법 지원 | 최신 ECMAScript 기능을 그대로 사용하면서도 구형 브라우저용 코드로 변환 가능 |

| 점진적 도입 | 기존 자바스크립트 파일에 // @ts-check 주석만 달아도 일부 타입 검사가 동작 |

| 풍부한 IDE 지원 | VS Code 등 에디터에서 자동 완성, 정의 이동, 리팩터링 등 생산성 향상 기능 제공 |

핵심 SEO 키워드: TypeScript, 자바스크립트, 타입스크립트 입문

# 1-1. 자바스크립트와 TypeScript의 차이

js

// JavaScript (동적 타이핑)

function add(a, b) {

  return a + b;

}
add(1, '2'); // 결과: '12' (예상치 못한 동작)

ts

// TypeScript (정적 타이핑)

function add(a: number, b: number): number {

  return a + b;

}
add(1, '2'); // 컴파일 오류! 문자열은 number와 호환되지 않음

위와 같이 타입을 선언하면, 잘못된 인자를 전달했을 때 컴파일 단계에서 바로 오류를 알려 줍니다.

---

# 2️⃣ TypeScript 환경 설정 – 5분 안에 시작하기

# 2-1. Node.js와 npm 설치

먼저 Node.js와 npm(Node Package Manager)이 필요합니다.

bash

# 최신 LTS 버전 설치 (Mac/Linux)

brew install node

# Windows는 공식 홈페이지에서 설치

# 2-2. 프로젝트 초기화 및 TypeScript 설치

bash

mkdir my-ts-app && cd my-ts-app

npm init -y               # package.json 자동 생성

npm install --save-dev typescript

# 2-3. tsconfig.json 만들기

bash

npx tsc --init

생성된 파일에서 주요 옵션을 간단히 조정합니다.

| 옵션 | 설명 |

|------|------|

| target | 변환할 JavaScript 버전 (예: 'ES6' ) |

| module | 모듈 시스템 ('commonjs' 등) |

| strict | 엄격 모드 활성화 (전체 타입 검사 강화) |

| outDir | 컴파일 결과물 디렉터리 ('./dist' ) |

# 2-4. 첫 번째 TypeScript 파일 작성

src/index.ts 파일을 만들고 다음 코드를 입력합니다.

ts

function greet(name: string): string {

  return `Hello, ${name}!`;

}

console.log(greet('World'));

# 2-5. 컴파일 & 실행

bash

npx tsc          # src/*.ts → dist/*.js 로 변환

node dist/index.js

5분 안에 TypeScript 프로젝트가 완성되었습니다! 이제부터는 타입 체킹과 자동 완성의 혜택을 누릴 수 있습니다.

---

# 3️⃣ 초보자를 위한 핵심 TypeScript 문법

# 3-1. 기본 타입

| 타입 | 예시 |

|------|------|

| string | 'hello' |

| number | 42 |

| boolean | true / false |

| any | 어떤 타입도 허용 (가능하면 지양) |

| unknown | 알 수 없는 타입, 사용 전 검증 필요 |

| void | 반환값이 없을 때 (function foo(): void {}) |

| null / undefined | 명시적 null/undefined |

# 3-2. 인터페이스와 타입 별칭

ts

interface User {

  id: number;

  name: string;

  email?: string;   // 선택적 프로퍼티

}

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

# 3-3. 제네릭(Generics) – 재사용 가능한 함수

ts

function wrap<T>(value: T): { data: T } {

  return { data: value };

}

const num = wrap(10);      // { data: 10 }

const str = wrap('hi');    // { data: 'hi' }

# 3-4. 열거형(Enum)

ts

enum Direction {

  Up,

  Down,

  Left,

  Right,

}
let dir: Direction = Direction.Up;

# 3-5. 타입 가드와 유니온 타입

ts

function printId(id: number | string) {

  if (typeof id === 'string') {

    console.log(`ID: ${id.toUpperCase()}`);

  } else {

    console.log(`ID: ${id.toFixed(0)}`);

  }

}

---

# 4️⃣ 실전 적용 팁 – 기존 JavaScript 프로젝트에 점진적으로 도입하기

1. 파일 확장자만 바꾸기

   • .js → .ts 로 바꾸고, // @ts-check 주석을 추가하면 VS Code가 자동으로 타입 검사를 수행합니다.

2. any 대신 unknown 사용

   • 초기 단계에서는 모든 타입을 any 로 선언하고 싶지만, 추후에 unknown 로 교체하면 타입 검증을 강제할 수 있어 안전합니다.

3. 타입 정의 파일 활용

   • 외부 라이브러리를 사용할 때는 @types/패키지명 을 설치합니다. 예: npm install --save-dev @types/lodash

4. CI 파이프라인에 tsc --noEmit 추가

   • 빌드 전 타입 검사를 강제해, 배포 전 오류를 차단합니다.

5. 점진적 마이그레이션

   • strict 옵션을 처음엔 false 로 두고, 점차 true 로 바꾸면서 오류를 하나씩 해결해 나가면 부담이 적습니다.

---

# 5️⃣ 결론 – 지금 바로 TypeScript를 시작해 보세요!

TypeScript는 “코드가 스스로를 검증한다”는 강력한 장점을 제공하여, 초보자부터 대규모 팀까지 모두에게 안전하고 생산적인 개발 환경을 선사합니다.

• 배우기 쉬운 문법 → 기존 자바스크립트 지식만으로 바로 활용 가능

• IDE와 CI에 최적화 → 오류를 사전에 차단하고 디버깅 시간을 절감

• 점진적 도입 → 기존 프로젝트에 부담 없이 적용 가능

행동 유도 : 지금 바로 npm install -D typescript 로 TypeScript를 설치하고, npx tsc --init 으로 설정 파일을 만들고 첫 번째 *.ts 파일을 작성해 보세요. 5분 안에 안전망을 구축한 개발자가 될 수 있습니다!

궁금한 점이 있으면 댓글로 남겨 주세요. 여러분의 TypeScript 여정을 함께 응원하겠습니다! 🚀