TypeScript 시작하기 | 설치, 설정, 기본 문법

들어가며

TypeScript란?

TypeScript는 Microsoft가 개발한 JavaScript의 상위 집합(Superset) 언어입니다.

TypeScript = JavaScript + 타입 시스템

타입은 값마다 붙는 명찰과 같습니다. 컴파일 시점(TypeScript를 JavaScript로 바꿀 때)에 “이 값은 문자열인가, 숫자인가”를 명찰로 확인하기 때문에, 잘못된 연산을 미리 걸러 내기 쉽습니다.

주요 특징:

• ✅ 정적 타입: 컴파일(TypeScript를 JavaScript로 바꿀 때) 시 타입 체크
• ✅ 자동완성: IDE 지원 강화
• ✅ 리팩토링: 안전한 코드 변경
• ✅ 최신 문법: ES6+ 지원
• ✅ 호환성: JavaScript로 컴파일

---

1. TypeScript vs JavaScript

비교

특징	JavaScript	TypeScript
타입	동적 타입	정적 타입
컴파일	불필요	필요 (→ JS)
에러 검출	런타임(프로그램이 실제로 실행되는 때)	컴파일 타임(빌드·변환할 때)
IDE 지원	기본	강력
학습 곡선	낮음	중간

예제

JavaScript와 TypeScript의 타입 안정성 차이를 보여주는 예제입니다:

// JavaScript: 동적 타입
function add(a, b) {
    // a, b의 타입이 명시되지 않음
    // 어떤 타입이든 받을 수 있음
    return a + b;
}

console.log(add(10, 20));      // 30 (숫자 덧셈)
console.log(add("10", "20"));  // "1020" (문자열 연결)
// 의도하지 않은 결과!
// 런타임에 에러 없이 실행되지만 논리적 버그

// 타입 체크 없이 실행
console.log(add(10, "20"));    // "1020" (숫자 + 문자열)
console.log(add(null, 10));    // 10 (null은 0으로 변환)
console.log(add(undefined, 10)); // NaN (undefined는 NaN으로)
// 예상치 못한 동작들

// TypeScript: 정적 타입
function add(a: number, b: number): number {
    // a: number - a는 number 타입만 받음
    // b: number - b는 number 타입만 받음
    // : number - 반환 타입도 number
    return a + b;
}

console.log(add(10, 20));      // ✅ 30 (정상)

// 컴파일 타임에 에러 검출
console.log(add("10", "20"));  // ❌ 컴파일 에러!
// 에러 메시지:
// Argument of type 'string' is not assignable to parameter of type 'number'
// 
// 코드 실행 전에 에러 발견 (안전)

// 다른 타입도 모두 에러
// console.log(add(10, "20"));     // ❌ 에러
// console.log(add(null, 10));     // ❌ 에러
// console.log(add(undefined, 10)); // ❌ 에러

TypeScript의 장점:

1. 컴파일 타임 에러 검출: 실행 전에 버그 발견
2. 자동완성: IDE가 타입을 알아서 정확한 제안
3. 리팩토링: 타입 변경 시 모든 사용처 추적
4. 문서화: 타입이 곧 문서 (주석 불필요)

실전 예시:

// API 응답 타입 정의
interface User {
    id: number;
    name: string;
    email: string;
}

function getUser(id: number): User {
    // 반환 타입이 User로 보장됨
    return {
        id: id,
        name: "홍길동",
        email: "[email protected]"
    };
}

const user = getUser(1);
console.log(user.name);  // IDE가 name을 자동완성
// console.log(user.age);  // ❌ 에러: User에 age 없음

---

2. 설치 및 설정

Node.js 설치

TypeScript는 Node.js 환경에서 실행됩니다.

1. Node.js 공식 사이트에서 다운로드
2. 설치 확인:

node --version
npm --version

TypeScript 설치

# 전역 설치
npm install -g typescript

# 버전 확인
tsc --version

프로젝트 초기화

# 프로젝트 폴더 생성
mkdir my-typescript-project
cd my-typescript-project

# package.json 생성
npm init -y

# TypeScript 설치 (로컬)
npm install --save-dev typescript

# tsconfig.json 생성
npx tsc --init

---

3. tsconfig.json 설정

기본 설정

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

주요 옵션 설명

옵션	설명
target	컴파일 대상 JavaScript 버전
module	모듈 시스템 (commonjs, es6)
outDir	컴파일된 파일 출력 폴더
rootDir	소스 파일 폴더
strict	엄격한 타입 체크 활성화
esModuleInterop	CommonJS/ES6 모듈 호환성

---

4. 첫 TypeScript 프로그램

프로젝트 구조

my-typescript-project/
├── src/
│   └── index.ts
├── dist/
├── package.json
└── tsconfig.json

index.ts 작성

// src/index.ts

function greet(name: string): string {
    return `Hello, ${name}!`;
}

const userName: string = "홍길동";
console.log(greet(userName));

// 타입 에러 예제
// console.log(greet(123));  // ❌ 에러: number는 string이 아님

컴파일 및 실행

# TypeScript → JavaScript 컴파일
npx tsc

# 컴파일된 파일 실행
node dist/index.js

출력:

Hello, 홍길동!

---

5. 기본 타입

원시 타입

// 숫자
let age: number = 25;
let price: number = 19.99;

// 문자열
let name: string = "홍길동";
let message: string = `안녕하세요, ${name}님!`;

// 불리언
let isActive: boolean = true;
let isCompleted: boolean = false;

// null과 undefined
let empty: null = null;
let notDefined: undefined = undefined;

배열

// 방법 1: 타입[]
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["홍길동", "김철수", "이영희"];

// 방법 2: Array<타입>
let scores: Array<number> = [90, 85, 95];

// 다차원 배열
let matrix: number[][] = [
    [1, 2, 3],
    [4, 5, 6]
];

튜플

// 튜플: 고정된 길이와 타입의 배열
let person: [string, number] = ["홍길동", 25];

console.log(person[0]);  // 홍길동
console.log(person[1]);  // 25

// person[2] = "서울";  // ❌ 에러: 길이 초과

any와 unknown

// any: 모든 타입 허용 (타입 체크 비활성화)
let anything: any = 10;
anything = "문자열";
anything = true;

// unknown: 타입 안전한 any
let value: unknown = 10;
// console.log(value.toFixed(2));  // ❌ 에러

// 타입 체크 후 사용
if (typeof value === "number") {
    console.log(value.toFixed(2));  // ✅ OK
}

---

6. 함수 타입

기본 함수

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

// 화살표 함수
const subtract = (a: number, b: number): number => {
    return a - b;
};

// 반환값 없음
function log(message: string): void {
    console.log(message);
}

선택적 매개변수

function greet(name: string, greeting?: string): string {
    if (greeting) {
        return `${greeting}, ${name}!`;
    }
    return `Hello, ${name}!`;
}

console.log(greet("홍길동"));           // Hello, 홍길동!
console.log(greet("홍길동", "안녕"));   // 안녕, 홍길동!

기본 매개변수

function createUser(name: string, age: number = 20): object {
    return { name, age };
}

console.log(createUser("홍길동"));        // { name: '홍길동', age: 20 }
console.log(createUser("김철수", 25));    // { name: '김철수', age: 25 }

---

7. 개발 환경 설정

VS Code 확장

1. TypeScript Importer: 자동 import
2. ESLint: 코드 품질
3. Prettier: 코드 포맷팅
4. Path Intellisense: 경로 자동완성

ts-node 설치

컴파일 없이 TypeScript 실행:

npm install --save-dev ts-node

# 실행
npx ts-node src/index.ts

nodemon 설정

파일 변경 시 자동 재실행:

npm install --save-dev nodemon

// package.json
{
  "scripts": {
    "dev": "nodemon --exec ts-node src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

# 개발 모드 실행
npm run dev

---

8. 실전 예제

간단한 계산기

// src/calculator.ts

type Operation = 'add' | 'subtract' | 'multiply' | 'divide';

function calculate(a: number, b: number, op: Operation): number {
    switch (op) {
        case 'add':
            return a + b;
        case 'subtract':
            return a - b;
        case 'multiply':
            return a * b;
        case 'divide':
            if (b === 0) {
                throw new Error("0으로 나눌 수 없습니다");
            }
            return a / b;
        default:
            throw new Error(`알 수 없는 연산: ${op}`);
    }
}

// 사용
console.log(calculate(10, 5, 'add'));       // 15
console.log(calculate(10, 5, 'subtract'));  // 5
console.log(calculate(10, 5, 'multiply'));  // 50
console.log(calculate(10, 5, 'divide'));    // 2

---

정리

핵심 요약

1. TypeScript: JavaScript + 타입
2. 설치: npm install -g typescript
3. 설정: tsconfig.json
4. 컴파일: tsc
5. 기본 타입: number, string, boolean, array, tuple

다음 단계

• TypeScript 고급 타입
• TypeScript 인터페이스
• TypeScript 제네릭

---

다른 언어와 비교

• JavaScript 시작하기 | 웹 개발의 필수 언어 완벽 입문

---

관련 글

• Python 환경 설정 | Windows/Mac에서 Python 설치하고 시작하기
• C++ 개발 환경 완벽 가이드 | OS·하드웨어·도구·설정 추천
• C++ 초보자가 자주 하는 실수 Top 15 | 컴파일 에러부터 런타임 크래시까지
• HTML/CSS 시작하기 | 웹 개발 첫걸음
• Java 시작하기 | JDK 설치부터 Hello World까지