TypeScript 기초 ✅ 타입 시스템과 JavaScript 차이점

 

 

TypeScript(이하 TS)는 **JavaScript(이하 JS)의 상위 집합(Superset)**입니다.
즉, JS 문법을 그대로 사용하면서 타입 시스템을 추가한 언어입니다.

👉 "JS는 자유롭고, TS는 안전하다" 라고 이해하면 쉽습니다.

---

📌 1. TypeScript를 쓰는 이유

• ✅ 타입 안정성: 런타임 에러를 컴파일 단계에서 방지
• ✅ 코드 가독성 & 유지보수성: 협업에서 타입이 문서 역할
• ✅ IDE 지원 극대화: 자동완성(IntelliSense) 강화
• ✅ 대규모 프로젝트 필수: 규모가 커질수록 버그 줄이고 개발 속도 ↑

---

📌 2. JavaScript vs TypeScript 비교

JS 예시 (타입 자유로움)

 

function add(a, b) {
  return a + b;
}

console.log(add(10, 20));  // 30
console.log(add("10", 20)); // "1020" (예상치 못한 결과)

 

👉 JS에서는 타입 오류를 잡아내지 못함

---

TS 예시 (타입 체크)

 

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(10, 20));  // ✅ 정상
console.log(add("10", 20)); // ❌ 컴파일 에러

 

👉 TS는 string + number에서 에러 발생 → 안전한 코드 보장

---

📌 3. 기본 타입 종류

 

let isDone: boolean = true;
let age: number = 25;
let name: string = "홍길동";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hi", 10]; // 튜플
let anything: any = "자유롭게 가능";
let u: undefined = undefined;
let n: null = null;

---

📌 4. 함수 타입

 

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

---

📌 5. 인터페이스 & 타입

 

interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: "홍길동"
};

---

📌 6. 클래스와 제네릭

 

class Box<T> {
  content: T;
  constructor(value: T) {
    this.content = value;
  }
}

const numberBox = new Box<number>(123);
const stringBox = new Box<string>("hello");

 

👉 제네릭(Generic) 덕분에 유연성과 타입 안정성을 동시에 가질 수 있음

---

📌 7. TS와 JS의 차이 요약

구분	JavaScript	TypeScript
타입 시스템	동적 타입	정적 타입
실행 전 오류 감지	불가능	가능 (컴파일 단계)
IDE 지원	제한적	강력 (자동완성, 리팩토링)
학습 난이도	낮음	상대적으로 높음
적합 환경	소규모, 빠른 프로토타입	대규모, 협업 프로젝트

---

🧠 8. 실무 팁

• 소규모 개인 프로젝트 → JS로 빠르게 시작해도 무방
• 협업 & 장기 프로젝트 → TS 적극 권장
• 기존 JS 프로젝트 → 점진적 마이그레이션 가능 (.js → .ts)
• 타입을 최대한 구체적으로 → any는 가급적 피하기

---

📝 마무리 정리

• TypeScript = JavaScript + 타입 시스템
• 장점: 안전성, 유지보수성, 협업 효율성
• 단점: 학습 비용 & 초기 설정 부담
• 실무에서는 점점 TS가 기본 언어로 자리 잡는 추세