타입스크립트

TypeScript 입문 가이드 (JS 개발자를 위한)

이 문서는 JavaScript는 알고 있지만 TypeScript는 처음인 사람을 위한 입문 가이드다. 자바스크립트와 비교하면서 핵심 개념을 이해하기 쉽게 설명한다.

---

목차

1. TypeScript란?
2. 왜 써야 할까?
3. 설치와 시작하기
4. 기본 타입과 문법
5. 함수에서의 타입 지정
6. 객체 타입과 인터페이스
7. 클래스와 접근 제어자
8. 제네릭(Generics)
9. 열거형(Enum)
10. 유틸리티 타입
11. 모듈 시스템과 tsconfig.json
12. 실무에서 자주 쓰는 툴과 설정
13. TypeScript를 잘 쓰는 팁
14. 마무리 요약

---

1. TypeScript란?

TypeScript는 JavaScript에 타입 시스템을 추가한 언어다.

• JavaScript로 작성한 모든 코드는 TypeScript에서도 유효하다.
• 즉, .js 파일을 .ts로 바꾸고 조금씩 타입을 붙여나가면 된다.
• 작성한 TypeScript 코드는 컴파일(변환)되어 JavaScript로 실행된다.

💡 쉽게 말해, “미리 버그를 잡는 JavaScript”다.

---

2. 왜 써야 할까?

JavaScript는 유연하지만, 그만큼 오류를 런타임에서야 발견하는 경우가 많다.

예를 들어:

function greet(name) {
  return 'Hello ' + name.toUpperCase();
}

greet(123); // ❌ 실행하면 에러 발생: name.toUpperCase is not a function

TypeScript에서는 이렇게 된다:

function greet(name: string) {
  return 'Hello ' + name.toUpperCase();
}

greet(123); // ⚠️ 컴파일 단계에서 에러 발생

📘 즉, TypeScript는 “코드를 실행하기 전에” 문제를 찾아준다.

---

3. 설치와 시작하기

프로젝트에 설치하기

npm init -y
npm install --save-dev typescript
npx tsc --init  # tsconfig.json 생성

파일 만들어보기

index.ts 파일을 만들고 아래 코드를 작성한다.

let message: string = 'Hello TypeScript!';
console.log(message);

컴파일하기:

npx tsc index.ts  # index.js로 변환됨
node index.js

---

4. 기본 타입과 문법

TypeScript의 핵심은 변수나 매개변수에 타입을 붙이는 것이다.

let count: number = 10;
let name: string = '서인';
let isActive: boolean = true;

let arr: number[] = [1, 2, 3]; // 숫자 배열
let tuple: [string, number] = ['age', 30]; // 튜플 (고정된 형태)

🔍 JS에서는 변수에 어떤 값이든 들어갈 수 있지만, TS에서는 “이 변수에는 어떤 타입만 들어올 수 있다”를 명시한다.

특별한 타입들

let anything: any = '뭐든지 가능'; // 타입 검사 안 함 (가능하면 피하기)
let unknownValue: unknown = 10; // 타입은 알 수 없지만 안전하게 처리 가능
let nothing: never; // 절대 실행되지 않는 함수의 리턴 타입 등

---

5. 함수에서의 타입 지정

function add(a: number, b: number): number {
  return a + b;
}

function sayHi(name?: string) { // ?는 선택적 매개변수
  console.log(`Hi ${name ?? 'Guest'}`);
}

const multiply: (x: number, y: number) => number = (x, y) => x * y;

🧠 함수 타입을 지정하면 IDE가 자동완성을 제공해 준다.

---

6. 객체 타입과 인터페이스

TypeScript는 객체의 형태를 명확하게 정의할 수 있다.

interface User {
  id: number;
  name: string;
  email?: string; // 선택적 속성
}

const user: User = {
  id: 1,
  name: '서인'
};

type 키워드로도 비슷하게 정의할 수 있다.

type ID = string | number;

인터페이스는 “객체 구조”를, 타입 별칭은 “타입 조합”을 정의할 때 주로 쓴다.

---

7. 클래스와 접근 제어자

class Person {
  constructor(public name: string, private age: number) {}

  greet() {
    return `Hi, I'm ${this.name}`;
  }
}

const p = new Person('서인', 25);
console.log(p.greet());

public, private, protected 같은 접근 제어자를 통해 클래스 내부 정보를 보호할 수 있다.

---

8. 제네릭 (Generics)

제네릭은 타입을 함수처럼 전달할 수 있게 하는 문법이다.

function identity<T>(value: T): T {
  return value;
}

let num = identity<number>(10);
let str = identity<string>('hello');

한마디로, “타입이 바뀌는 상황에서도 재사용 가능한 코드”를 만들 때 쓴다.

---

9. 열거형 (Enum)

열거형은 관련된 상수값들을 하나의 이름 아래 묶어 관리할 때 사용한다.

enum Direction {
  Up,    // 0
  Down,  // 1
  Left,  // 2
  Right  // 3
}

let move: Direction = Direction.Up;
console.log(move); // 0

// 값 지정도 가능
enum Status {
  Success = 200,
  NotFound = 404,
  ServerError = 500
}

function handleResponse(status: Status) {
  if (status === Status.Success) {
    console.log('✅ 요청 성공');
  }
}

handleResponse(Status.Success);

💡 문자열 열거형도 가능하다.

enum Role {
  Admin = 'ADMIN',
  User = 'USER',
  Guest = 'GUEST'
}

function getRole(role: Role) {
  console.log(`권한: ${role}`);
}

getRole(Role.Admin);

🔸 Enum은 상수 값을 그룹화할 때 직관적이지만, 단순한 상수라면 const 객체를 쓰는 방법도 좋다.

---

10. 유틸리티 타입

자주 쓰이는 내장 타입 조작 도구들이다.

interface User { id: number; name: string; age?: number }

// 일부 속성만 선택
const userPreview: Pick<User, 'id' | 'name'> = { id: 1, name: '서인' };

// 모두 선택적 속성으로 만들기
type PartialUser = Partial<User>;

---

11. 모듈 시스템과 tsconfig.json

모듈

// utils.ts
export function sum(a: number, b: number) {
  return a + b;
}

// app.ts
import { sum } from './utils';
console.log(sum(2, 3));

tsconfig.json 주요 설정

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

⚙️ strict: true를 켜면 타입 검사 정확도가 훨씬 올라간다.

---

12. 실무에서 자주 쓰는 툴

• ts-node: TypeScript를 바로 실행
• eslint + prettier: 코드 스타일 검사 및 자동 정리
• vite / webpack: 번들링 툴
• jest / vitest: 테스트 환경

---

13. TypeScript를 잘 쓰는 팁

• any 대신 unknown을 사용하자.
• 객체 구조를 정확히 모델링하기.
• 타입은 “문서”이자 “안전장치”다.
• JavaScript 코드에서 점진적으로 도입해도 괜찮다.

“한 번에 다 바꾸지 말고, 조금씩 타입을 붙여보는 것”이 핵심이다.

---

14. 마무리 요약

개념	JavaScript	TypeScript
변수 선언	자유로움	타입 명시 가능
에러 검출	런타임	컴파일 타임
IDE 지원	제한적	자동완성, 타입 추론 강력
학습 난이도	낮음	초반은 약간 높음

🎯 정리하자면: TypeScript는 “코드를 더 안전하고, 예측 가능하게 만들어주는 JavaScript의 확장판”이다.

---

더 깊이 배우고 싶다면 타입 좁히기(Narrowing), 조건부 타입, 제네릭 심화, const enum 등의 주제를 이어서 공부해보자.