# 개발자를 위한 안전망, TypeScript 입문 가이드 – 초보자를 위한 친절한 설명

---

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

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

동적 타이핑(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 여정**을 함께 응원하겠습니다! 🚀