🔷
EPISODE 01
tsc · tsconfig · 기본 타입
TypeScript 기초
JavaScript의 타입 오류를 컴파일 시점에 잡아주는 TypeScript의 가치, tsc 컴파일러, tsconfig.json 설정, 그리고 기본 타입(string/number/boolean/any/unknown/배열/튜플)을 익힙니다.
TypeScripttsctsconfig
소요 시간
⏱ 30~45분
난이도
📊 중급
선수 조건
🎯 db-06
결과물
tsconfig가 설정된 첫 .ts 파일 컴파일 및 실행
이 강의에서 배우는 것
- 1TS가 해결하는 JS의 3가지 한계를 안다
- 2tsc로 .ts → .js 컴파일을 수행한다
- 3tsconfig.json 의 주요 옵션(target/strict/outDir)을 안다
- 4기본 타입과 any vs unknown 의 차이를 구분한다
1. TypeScript가 필요한 이유
JS의 한계 — 타입 오류는 런타임에만 발견
javascript
function add(a, b) { return a + b; }
add('10', 20); // '1020' — 의도와 다른 결과, 오류도 아님!
const user = { name: '홍길동', age: 30 };
console.log(user.email.toUpperCase()); // 런타임 오류!TypeScript로 해결
typescript
function add(a: number, b: number): number {
return a + b;
}
add('10', 20); // 컴파일 오류: 'string'은 'number'에 할당 불가
const user = { name: '홍길동', age: 30 };
console.log(user.email); // 컴파일 오류: 'email' 없음2. 설치 & 컴파일
bash
npm install -g typescript # 전역
tsc --version
npm install --save-dev typescript # 프로젝트 로컬
npx tsc --version
tsc hello.ts # .ts → .js 컴파일
node hello.js
tsc --watch hello.ts # 감시 모드
tsc # tsconfig.json 있으면 그냥3. tsconfig.json
bash
tsc --init # tsconfig.json 자동 생성json
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}4. TS Playground
https://www.typescriptlang.org/play — 브라우저에서 바로 TypeScript 실험 가능. 설치 없이 코드와 컴파일 결과 확인.
5. 기본 타입
typescript
let name: string = '홍길동';
let age: number = 30;
let isActive: boolean = true;
// any: 타입 검사 건너뜀 (사용 자제)
let anything: any = '문자열';
anything = 42;
// unknown: any보다 안전 — 사용 전 타입 확인 필요
let input: unknown = '입력값';
if (typeof input === 'string') {
input.toUpperCase();
}
// 배열
let numbers: number[] = [1, 2, 3];
let mixed: (string | number)[] = ['a', 1, 'b', 2];
// 튜플 — 길이/타입 고정
let point: [number, number] = [10, 20];
let entry: [string, number] = ['나이', 25];
// null / undefined
let nullable: string | null = null;
let optional: number | undefined = undefined;