Typescript를 알아보자

타입스크립트를 알아보자!

프로그래밍 언어 중 하나인 TypeScript(타입스크립트)는 JavaScript의 상위 집합(Superset)으로, JavaScript가 가지고 있는 기능에 더해 타입 시스템과 몇 가지 추가적인 기능을 제공한다. 최근 프론트엔드와 백엔드 개발 모두에서 인기를 끌며 점점 더 많은 개발자들이 타입스크립트를 사용하고 있다. 그렇다면 타입스크립트가 무엇인지, JavaScript와 어떻게 다른지 알아보자.

---

1. 타입스크립트란?

타입스크립트는 Microsoft에서 개발한 오픈소스 프로그래밍 언어로, JavaScript를 확장한 언어다. JavaScript의 모든 기능을 포함하고 있으며, 타입을 명시적으로 정의할 수 있는 기능을 추가로 제공한다.

• 주요 특징
  • 정적 타입 지원 (Static Typing)
  • ES6+ 문법을 지원
  • 코드 완성, 리팩토링, 디버깅에 유리
  • 강력한 도구 지원 (TypeScript Compiler, IDE 통합 등)

---

2. JavaScript와 TypeScript의 차이점

특징 JavaScript TypeScript

타입 시스템	동적 타입(Dynamic Typing)	정적 타입(Static Typing)
런타임 에러	실행 중에 타입 오류 발견	컴파일 단계에서 타입 오류 발견
코드 완성 및 안전성	타입 추론 부족, IDE 도움 제한적	타입 정의로 더 나은 코드 완성 및 오류 방지 가능
컴파일	브라우저에서 바로 실행 가능	TypeScript 코드를 JavaScript로 변환 후 실행
확장성	ES 표준 문법만 지원	인터페이스, 제너릭, 타입 별칭 등 추가 기능 제공

---

3. 타입스크립트의 주요 특징

A. 정적 타입

JavaScript는 동적 타입 언어로, 변수의 타입을 지정하지 않는다. 반면, TypeScript는 변수를 선언할 때 타입을 명시할 수 있다.

• JavaScript

let message = "Hello, World!";
message = 42; // 런타임 에러 발생 가능

• TypeScript

let message: string = "Hello, World!";

 

// message = 42; // 컴파일 단계에서 오류 발생

#### **B. 타입 추론(Type Inference)**
TypeScript는 명시적으로 타입을 지정하지 않아도, 초기화된 값을 기반으로 타입을 추론할 수 있다.

```typescript
let age = 25; // number로 추론
age = "25"; // 오류 발생

C. 인터페이스와 타입

TypeScript는 객체의 구조를 정의할 수 있는 interface와 type을 제공한다. 이를 통해 더 안전하고 명확한 코드를 작성할 수 있다.

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

const user: User = {
  id: 1,
  name: "John Doe",
};

D. 클래스와 모듈

TypeScript는 ES6의 클래스를 확장하여 강력한 객체지향 프로그래밍(OOP)을 지원한다.

class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  greet(): string {
    return `Hello, ${this.name}!`;
  }
}

E. 제너릭(Generic)

제너릭을 사용하면 다양한 타입에서 동작하는 재사용 가능한 컴포넌트를 작성할 수 있다.

function identity<T>(value: T): T {
  return value;
}

console.log(identity<string>("TypeScript"));
console.log(identity<number>(42));

---

4. 타입스크립트를 사용하는 이유

A. 코드의 안정성 향상

타입스크립트는 컴파일 시점에 타입 오류를 잡아내므로, 런타임 에러를 줄이고 코드 안정성을 높일 수 있다.

B. 코드 가독성 및 유지보수성 개선

타입을 명시적으로 선언하면 코드의 의도를 더 명확히 나타낼 수 있다. 특히 대규모 프로젝트에서 협업 시 큰 장점을 제공한다.

C. 강력한 도구 지원

TypeScript는 VS Code와 같은 IDE에서 뛰어난 자동 완성(IntelliSense), 디버깅, 리팩토링 지원을 제공한다.

D. 최신 JavaScript 문법 지원

TypeScript는 최신 ECMAScript 표준을 지원하며, 하위 버전의 JavaScript로 트랜스파일(transpile)하여 더 넓은 브라우저 환경에서 사용할 수 있다.

---

5. 타입스크립트를 어떻게 시작할까?

A. 설치

타입스크립트는 NPM(Node Package Manager)을 통해 설치할 수 있다.

npm install -g typescript

B. 기본 설정

tsconfig.json 파일을 생성하여 컴파일러 옵션을 설정할 수 있다.

tsc --init

C. 간단한 컴파일

.ts 파일을 .js 파일로 변환하려면 tsc 명령어를 사용한다.

tsc app.ts

---

6. 타입스크립트의 한계

• 컴파일 후 JavaScript로 변환: TypeScript는 브라우저에서 바로 실행되지 않으므로, 트랜스파일링(transpiling)이 필요하다.
• 러닝 커브: JavaScript에 익숙한 개발자에게 초기 진입 장벽이 있을 수 있다.
• 런타임 타입 검사 부족: TypeScript는 컴파일 단계에서만 타입을 검사하며, 런타임에서는 JavaScript처럼 동작한다.

---

결론

타입스크립트는 JavaScript의 한계를 보완하고, 더 안전하고 확장 가능한 애플리케이션을 개발할 수 있는 도구다. 특히 대규모 프로젝트나 팀 협업에서 효율성과 생산성을 크게 향상시킬 수 있다. 다음 포스팅에서는 타입스크립트의 주요 문법과 실제로 사용하는 방법에 대해 더 자세히 알아보자! 🚀