TypeScript

TypeScript

by

🌟 TypeScript란?

TypeScript는 Microsoft에서 개발한 오픈소스 프로그래밍 언어입니다.
기존 JavaScript를 기반으로 하되, 정적 타입(static typing) 기능을 추가한 상위 언어입니다.

즉, JavaScript의 단점을 보완하면서 더 안정적이고 규모 있는 애플리케이션을 만들기 위한 도구입니다.

✅ JavaScript + Type = TypeScript

🧠 왜 TypeScript를 쓸까?

JavaScript의 문제점

  • 변수에 어떤 타입이 들어가는지 알 수 없음
  • 오타, 타입 오류가 런타임(runtime)에야 발견됨
  • 대규모 프로젝트에서는 버그 추적이 어려움

TypeScript의 해결책

  • 타입을 명시함으로써 컴파일 단계에서 오류를 사전 검출
  • IDE 자동완성, 리팩토링 지원 강화
  • 팀 협업과 유지보수에 유리

🚀 TypeScript의 주요 특징

특징설명
🔠 정적 타입 검사변수, 함수의 타입을 명시할 수 있으며 컴파일 시점에 타입 오류 감지
⏱ 빠른 오류 검출실행 전에 버그를 확인할 수 있음 (런타임 에러 감소)
🎯 객체지향 프로그래밍 지원클래스, 인터페이스, 상속 등 지원
🧩 JavaScript 100% 호환JS 문법 그대로 사용 가능, 점진적으로 적용 가능
🛠 도구 친화성VS Code 등 IDE에서 강력한 자동완성, 경고, 리팩토링 지원

🧾 기본 문법 예제

1. 변수 선언과 타입

let name: string = "홍길동";
let age: number = 30;
let isAdmin: boolean = true;

2. 배열과 객체

let numbers: number[] = [1, 2, 3];
let user: { name: string; age: number } = {
  name: "철수",
  age: 25
};

3. 함수에 타입 지정

function add(x: number, y: number): number {
  return x + y;
}

4. 인터페이스

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "영희",
  age: 22
};

5. 클래스

class Animal {
  constructor(public name: string) {}

  speak(): void {
    console.log(`${this.name}이(가) 소리를 냅니다.`);
  }
}

const dog = new Animal("강아지");
dog.speak();

6. 유니온 타입 / 타입 별칭

type Status = "success" | "error" | "loading";

let currentStatus: Status = "success";

📦 설치 및 컴파일

npm install -g typescript      # TypeScript 설치
tsc --init                     # tsconfig.json 생성
tsc index.ts                   # TypeScript → JavaScript 컴파일

🧪 고급 기능 요약

기능예시
제네릭 (Generic)function identity<T>(arg: T): T
타입 추론let name = "hello"; → string 자동 추론
선택적 속성interface User { name: string; age?: number }
readonly읽기 전용 속성 지정
타입 가드if (typeof value === "string") { ... }

⚖️ TypeScript의 장단점

✅ 장점

  • 대규모 프로젝트에 적합
  • 버그 예방에 탁월 (컴파일 단계에서 오류 감지)
  • 코드 자동완성, 리팩토링이 쉬움
  • 인터페이스와 클래스 등 OOP 지원
  • JS와 호환성 높음 (기존 코드 사용 가능)

❌ 단점

  • 러닝 커브 존재 (처음엔 복잡해 보일 수 있음)
  • 설정 및 빌드 환경 추가 필요
  • 간단한 프로젝트에는 과할 수 있음

🏢 TypeScript 사용하는 대표 기업

  • Microsoft (물론!)
  • Google (Angular 공식 언어)
  • Slack
  • Airbnb
  • Uber
  • Shopify

📌 요약 정리

항목내용
언어명TypeScript
기반 언어JavaScript
핵심 기능정적 타입 검사, 클래스, 인터페이스, 제네릭
대표 활용 분야프론트엔드(React, Angular, Vue), Node.js 백엔드
적합한 대상중/대형 프로젝트, 협업, 장기 유지보수 프로젝트

🔧 사용 추천 예시

  • Angular 프로젝트 (공식 언어로 TypeScript 사용)
  • React + TypeScript 조합으로 안전한 UI 개발
  • NestJS 같은 백엔드 프레임워크 (Node.js 기반)
  • 대규모 기업 시스템, 금융/공공 시스템 개발

Leave a Comment