TypeScript란 무엇인가요?

JavaScript에 타입 시스템을 추가한 프로그래밍 언어입니다.

TypeScript를 왜 사용하나요?

타입 안정성, 자동완성, 리팩토링 지원으로 개발 생산성이 향상됩니다.

JavaScript 코드를 TypeScript로 변환할 수 있나요?

네, .js 파일을 .ts로 바꾸고 점진적으로 타입을 추가할 수 있습니다.

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

2026년 3월 29일 · 14분 읽기 · 수정 2026년 4월 7일 초급 튜토리얼

이 글의 핵심

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

비교

특징	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의 장점:

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

// 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 환경에서 실행됩니다.

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

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 확장

TypeScript Importer: 자동 import
ESLint: 코드 품질
Prettier: 코드 포맷팅
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

정리

핵심 요약

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

다음 단계

다른 언어와 비교

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

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

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「TypeScript 시작하기 | 설치, 설정, 기본 문법」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「TypeScript 시작하기 | 설치, 설정, 기본 문법」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

자주 묻는 질문 (FAQ)

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

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

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

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

Q. 더 깊이 공부하려면?

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

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

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

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

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

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.