← 프로그래밍 언어 가이드 목록으로 돌아가기

🟦 TypeScript 상세 가이드

"자바스크립트라는 자유롭고 변덕스러운 친구에게 튼튼한 안전장치(타입)를 달아주는 스마트한 비서"

---

💡 1. 30년차 선배의 쉬운 설명

웹 세상을 지배하는 JavaScript는 아주 자유로운 친구입니다. 변수에 숫자를 넣었다가 갑자기 문자를 넣어도 "응, 괜찮아!" 하고 받아줍니다. 혼자서 작은 페이지를 만들 때는 편하지만, 여러 명의 개발자가 모여 수만 줄의 코드를 짜게 되면 이 '자유로움'이 언제 터질지 모르는 폭탄(런타임 에러)이 됩니다.

TypeScript는 바로 이 자바스크립트에 "타입(Type)" 이라는 꼬리표를 강제로 붙여서, 코드를 실행하기도 전에 에러를 잡아내는 역할을 합니다.

• 비유하자면: 설계도 없이 대충 짓던 가건물(JavaScript)에 꼼꼼한 안전 기준과 3D 설계도(TypeScript)를 입히는 것과 같습니다.

---

🛠️ 2. 어디에 주로 쓰이나요?

1. 모던 웹 프론트엔드: React, Vue, Next.js 등의 프레임워크와 결합해 화면단 로직을 짤 때 사실상의 표준(De facto standard)으로 쓰입니다.
2. 대규모 백엔드 서비스: NestJS 프레임워크 등을 이용해 튼튼한 서버 API를 구축할 때 널리 쓰입니다.

---

⚖️ 3. 장점과 단점 (선배의 솔직 한마디)

• 장점 (최고의 파트너):
  • 귀신같은 에러 감지: 코드 실행 전에 오타나 타입 실수를 에디터(VS Code 등)가 즉시 빨간 줄로 알려줍니다.
  • 자동 완성: 객체의 속성을 일일이 기억할 필요 없이 마우스만 올려도 무엇을 쓸 수 있는지 가이드가 제공됩니다.
• 단점 (진입 장벽):
  • 공부할 게 많음: 인터페이스(Interface), 제네릭(Generic) 등 타입 관련 규칙을 추가로 공부해야 합니다.
  • 빌드(컴파일) 시간: 브라우저는 타입스크립트를 읽지 못하므로, 결국 자바스크립트로 한 번 변환(컴파일)해주는 과정이 필요합니다.

---

🚀 4. 초보자를 위한 첫걸음 코드

타입스크립트는 변수 뒤에 : type을 붙여서 이 변수가 어떤 데이터만 받을 것인지 지정합니다.

// 1. 타입을 꼼꼼하게 정의합니다.
interface Developer {
  name: string;
  careerYears: number;
  isSenior: boolean;
}

// 2. 정의된 타입에 맞추어 변수를 선언합니다.
const seniorDev: Developer = {
  name: "Kim Antigravity",
  careerYears: 30,
  isSenior: true
};

// 만약 아래와 같이 잘못된 타입의 데이터를 넣으면 코드가 빌드되기도 전에 에러를 표시합니다.
// seniorDev.careerYears = "30년"; // ❌ 에러 발생! (숫자 타입만 들어갈 수 있음)

---

🎯 5. 초보자 추천 공부 방향

1. 자바스크립트의 기초 개념(변수, 함수, 비동기)을 먼저 60% 이상 숙지하세요.
2. 처음부터 모든 타입 규칙을 마스터하려 하지 말고 변수 선언 시 : string, : number를 붙이는 것부터 시작하세요.
3. 점차 인터페이스(interface)를 활용해 가짜 데이터를 규격화하는 연습으로 넓혀가면 빠르게 적응할 수 있습니다.