[2026] TypeScript 시작하기 | 설치, 설정, 기본 문법
![[2026] TypeScript 시작하기 | 설치, 설정, 기본 문법](/og/s/typescript-series-01-intro.webp)
이 글의 핵심
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를 활용한 상세한 구현 코드입니다. 함수를 통해 로직을 구현합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
// 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를 활용한 상세한 구현 코드입니다. 함수를 통해 로직을 구현합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
// 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가 타입을 알아서 정확한 제안
- 리팩토링: 타입 변경 시 모든 사용처 추적
- 문서화: 타입이 곧 문서 (주석 불필요) 실전 예시: 다음은 typescript를 활용한 상세한 구현 코드입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며, 함수를 통해 로직을 구현합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
// 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 환경에서 실행됩니다.
- Node.js 공식 사이트에서 다운로드
- 설치 확인:
node --version
npm --versionTypeScript 설치
아래 코드는 bash를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
# 전역 설치
npm install -g typescript
# 버전 확인
tsc --version프로젝트 초기화
아래 코드는 bash를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
# 프로젝트 폴더 생성
mkdir my-typescript-project
cd my-typescript-project
# package.json 생성
npm init -y
# TypeScript 설치 (로컬)
npm install --save-dev typescript
# tsconfig.json 생성
npx tsc --init3. tsconfig.json 설정
기본 설정
다음은 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 프로그램
프로젝트 구조
아래 코드는 code를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
my-typescript-project/
├── src/
│ └── index.ts
├── dist/
├── package.json
└── tsconfig.jsonindex.ts 작성
아래 코드는 typescript를 사용한 구현 예제입니다. 함수를 통해 로직을 구현합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
// src/index.ts
function greet(name: string): string {
return `Hello, ${name}!`;
}
const userName: string = "홍길동";
console.log(greet(userName));
// 타입 에러 예제
// console.log(greet(123)); // ❌ 에러: number는 string이 아님컴파일 및 실행
아래 코드는 bash를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
# TypeScript → JavaScript 컴파일
npx tsc
# 컴파일된 파일 실행
node dist/index.js출력:
Hello, 홍길동!5. 기본 타입
원시 타입
다음은 typescript를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
// 숫자
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;배열
아래 코드는 typescript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
// 방법 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]
];튜플
아래 코드는 typescript를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
// 튜플: 고정된 길이와 타입의 배열
let person: [string, number] = ["홍길동", 25];
console.log(person[0]); // 홍길동
console.log(person[1]); // 25
// person[2] = "서울"; // ❌ 에러: 길이 초과any와 unknown
아래 코드는 typescript를 사용한 구현 예제입니다. 조건문으로 분기 처리를 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
// 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. 함수 타입
기본 함수
아래 코드는 typescript를 사용한 구현 예제입니다. 함수를 통해 로직을 구현합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
// 매개변수와 반환 타입
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);
}선택적 매개변수
아래 코드는 typescript를 사용한 구현 예제입니다. 함수를 통해 로직을 구현합니다, 조건문으로 분기 처리를 수행합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
function greet(name: string, greeting?: string): string {
if (greeting) {
return `${greeting}, ${name}!`;
}
return `Hello, ${name}!`;
}
console.log(greet("홍길동")); // Hello, 홍길동!
console.log(greet("홍길동", "안녕")); // 안녕, 홍길동!기본 매개변수
아래 코드는 typescript를 사용한 구현 예제입니다. 함수를 통해 로직을 구현합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
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.tsnodemon 설정
파일 변경 시 자동 재실행:
npm install --save-dev nodemon아래 코드는 json를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
// package.json
{
"scripts": {
"dev": "nodemon --exec ts-node src/index.ts",
"build": "tsc",
"start": "node dist/index.js"
}
}# 개발 모드 실행
npm run dev8. 실전 예제
간단한 계산기
다음은 typescript를 활용한 상세한 구현 코드입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며, 함수를 통해 로직을 구현합니다, 에러 처리를 통해 안정성을 확보합니다, 조건문으로 분기 처리를 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
// 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