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

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

· 14분 읽기 · 수정 초급 튜토리얼
TypeScript 시작하기 | 설치, 설정, 기본 문법

이 글의 핵심

TypeScript 시작하기: 설치, 설정, 기본 문법. TypeScript vs JavaScript·설치 및 설정.

들어가며

TypeScript란?

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

TypeScript = JavaScript + 타입 시스템

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

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

JavaScript에서 TypeScript로의 전환

“런타임 에러는 프로덕션에서 터진다”는 말이 있습니다. JavaScript로 개발하던 시절, 이 말을 뼈저리게 체감했습니다. 테스트는 다 통과했는데 배포 후 사용자가 이상한 데이터를 입력하면 앱이 터지는 거습니다. 특히 팀 프로젝트에서 다른 사람이 작성한 함수의 반환 타입을 잘못 이해해서 버그가 발생하는 일이 잦았습니다. TypeScript를 도입한 후 가장 먼저 느낀 건 안심이었습니다. IDE가 자동완성을 정확히 해주으며, 타입이 맞지 않으면 빨간 줄로 미리 알려줍니다. 리팩토링할 때도 “이 함수를 바꾸면 어디가 깨질까?” 걱정할 필요가 없어졌습니다. 물론 처음엔 타입 정의 작성이 번거로웠지만, 몇 달 후 그 타입 정의 덕분에 버그를 미리 잡는 경험을 하고 나니 돌아갈 수 없었습니다.

1. TypeScript vs JavaScript

비교

특징JavaScriptTypeScript
타입동적 타입정적 타입
컴파일불필요필요 (→ 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: "hong@example.com"
    };
}
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엄격한 타입 체크 활성화
esModuleInteropCommonJS/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

다음 단계

다른 언어와 비교

관련 글

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. TypeScript 시작하기: 설치, 설정, 기본 문법. TypeScript vs JavaScript·설치 및 설정로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다. TypeScript·타입스크립트·설치 중심… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

이 글에서 다루는 키워드 (관련 검색어)

TypeScript, 타입스크립트, 설치, 설정, 입문 등으로 검색하시면 이 글이 도움이 됩니다.