TypeScript란?

**TypeScript(TS)**는 Microsoft에서 개발한 오픈소스 프로그래밍 언어로, JavaScript의 상위 집합(Superset)입니다. 즉, TypeScript는 JavaScript의 모든 기능을 포함하면서 추가적인 기능을 제공합니다.

✅ TypeScript의 핵심 특징

1. 정적 타입(Type System) 지원
   • JavaScript는 동적 타입 언어이지만, TypeScript는 정적 타입을 제공하여 컴파일 타임에 오류를 잡을 수 있습니다.
   • 예시:

     let message: string = "Hello, TypeScript!";
     message = 123; // ❌ 오류 발생 (number는 string에 할당할 수 없음)

2. ECMAScript 최신 문법 지원
   • TypeScript는 최신 JavaScript(ES6, ES7 등)의 문법을 지원하며, 브라우저 호환성을 위해 기존 ES5 코드로 변환할 수 있습니다.
3. 객체지향 프로그래밍(OOP) 지원
   • 클래스, 인터페이스, 상속, 추상 클래스 등의 OOP 개념을 제공하여 코드 재사용성과 유지보수성을 향상시킵니다.
   • 예시:

     class Person {
         name: string;
         constructor(name: string) {
             this.name = name;
         }
         greet() {
             console.log(`Hello, my name is ${this.name}`);
         }
     }

4. 인터페이스(Interface) 지원
   • JavaScript에는 없는 인터페이스 기능을 제공하여 코드의 명확성을 높입니다.
   • 예시:

     interface User {
         id: number;
         name: string;
     }
     function getUser(user: User) {
         console.log(`User ID: ${user.id}, Name: ${user.name}`);
     }

5. 타입 추론(Type Inference) 기능
   • TypeScript는 타입을 자동으로 추론할 수 있어 코드 작성 시 명시적인 타입 선언을 줄일 수 있습니다.
   • 예시:

     let num = 10; // TypeScript가 num을 number로 추론함
     num = "hello"; // ❌ 오류 발생

6. 제네릭(Generic) 지원
   • 코드의 재사용성을 높이기 위해 제네릭을 제공합니다.
   • 예시:

     function identity<T>(arg: T): T {
         return arg;
     }
     console.log(identity<string>("TypeScript"));
     console.log(identity<number>(100));

7. 컴파일 과정 필요
   • TypeScript 코드는 브라우저에서 직접 실행되지 않으며, **tsc(TypeScript Compiler)**를 사용하여 JavaScript로 변환해야 합니다.
   • 컴파일 명령어:

     tsc filename.ts
     

---

TypeScript vs JavaScript 차이점

비교 항목	TypeScript	JavaScript
타입 시스템	정적 타입(컴파일 시 오류 확인)	동적 타입(실행 중 오류 발생 가능)
OOP 지원	클래스, 인터페이스, 제네릭 지원	ES6 이후 클래스 지원 (인터페이스 없음)
코드 안정성	강력한 타입 검사로 안정성 높음	타입 오류 가능성이 높음
브라우저 실행	직접 실행 불가 (컴파일 필요)	브라우저에서 바로 실행 가능
개발 생산성	코드 자동 완성 및 문서화 지원	유연하지만 오류 가능성 높음

---

TypeScript 사용 예시

📌 1. 기본 변수 타입 선언

let isDone: boolean = false;
let count: number = 42;
let name: string = "TypeScript";
let list: number[] = [1, 2, 3];

📌 2. 함수에서의 타입 선언

function add(a: number, b: number): number {
    return a + b;
}
console.log(add(5, 10)); // 15

📌 3. 인터페이스 사용 예시

interface Car {
    brand: string;
    year: number;
}
const myCar: Car = { brand: "Tesla", year: 2023 };
console.log(myCar.brand); // Tesla

📌 4. 클래스 사용 예시

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    makeSound() {
        console.log(`${this.name} makes a sound.`);
    }
}
const dog = new Animal("Dog");
dog.makeSound(); // Dog makes a sound.

📌 5. 제네릭 사용 예시

function identity<T>(arg: T): T {
    return arg;
}
console.log(identity<number>(100)); // 100
console.log(identity<string>("Hello")); // Hello

---

TypeScript를 배워야 하는 이유

✅ 코드 품질 향상: 정적 타입 검사로 버그를 사전에 방지
✅ 유지보수 용이: 인터페이스와 타입 정의로 협업에 유리
✅ 개발 생산성 향상: 자동 완성, 타입 체크 등의 기능 제공
✅ 최신 JavaScript 지원: ES6+ 문법을 활용 가능
✅ 대규모 프로젝트에 적합: 기업에서 TypeScript를 선호하는 이유

---

TypeScript 설치 및 실행 방법

1. TypeScript 설치

   npm install -g typescript
   

2. 버전 확인

   tsc --version
   

3. TypeScript 파일 컴파일

   tsc filename.ts
   

   -> filename.js 파일로 변환됨

---

마무리

TypeScript는 JavaScript를 더 안전하고 유지보수하기 쉽게 만든 언어로, 대규모 프로젝트에서 특히 유용합니다. React, Angular, Vue 등의 프론트엔드 프레임워크에서도 널리 사용되며, 백엔드(Node.js)에서도 TypeScript를 활용하는 사례가 많아지고 있습니다.

🚀 JavaScript를 사용하고 있다면 TypeScript로 업그레이드하는 것을 추천합니다!