[10주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 43

TypeScript 개요

1. TypeScript란?

TypeScript는 JavaScript에 타입(Type) 시스템을 추가한 프로그래밍 언어이다.

마이크로소프트(Microsoft)가 개발했으며, JavaScript의 상위 집합(Superset)이다.
즉 JavaScript 코드는 그대로 TypeScript에서도 실행 가능하다.

TypeScript는 코드 작성 시 변수, 함수, 객체 등에 데이터 타입을 명시할 수 있도록 하여 코드 안정성과 가독성을 높이는 것이 목적이다.

작성된 TypeScript 코드는 컴파일 과정을 거쳐 JavaScript로 변환된 후 실행된다.

---

2. TypeScript 등장 배경

JavaScript는 동적 타입 언어(Dynamic Typing)이기 때문에 다음과 같은 문제가 발생할 수 있다.

예시

 

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

add(10, "20");

 

결과

"1020"

 

이처럼 의도하지 않은 결과가 발생할 수 있다.

프로젝트 규모가 커질수록

• 타입 오류 발견이 어려움
• 코드 유지보수 어려움
• 협업 시 코드 이해도 낮음

이러한 문제를 해결하기 위해 TypeScript가 등장했다.

---

3. TypeScript 특징

1) 정적 타입 지원

코드를 실행하기 전에 타입 오류를 미리 확인할 수 있다.

 

let age: number = 20;
age = "hello"; // 오류 발생

 

이렇게 컴파일 단계에서 오류를 확인할 수 있어 버그를 줄일 수 있다.

---

2) JavaScript 완전 호환

TypeScript는 JavaScript의 상위 집합이기 때문에 기존 JavaScript 코드를 그대로 사용할 수 있다.

 

console.log("hello");

 

---

3) 객체지향 프로그래밍 지원

TypeScript는 클래스 기반 객체지향 프로그래밍을 지원한다.

예시

 

class User {
name: string;

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

 

---

4) 대규모 프로젝트에 적합

TypeScript는

• 타입 시스템
• 인터페이스
• 모듈 구조

덕분에 대규모 프로젝트에서 코드 관리가 용이하다.

그래서 많이 사용되는 곳

• Angular
• NestJS
• React
• Node.js 서버

---

4. TypeScript 동작 방식

TypeScript는 직접 실행되지 않고 JavaScript로 변환된 후 실행된다.

개발 흐름

TypeScript 코드 작성
↓
TypeScript 컴파일러 (tsc)
↓
JavaScript 코드 생성
↓
브라우저 또는 Node.js 실행

 

예시

TypeScript

 

let message: string = "Hello TypeScript";

 

컴파일 후 JavaScript

 

var message = "Hello TypeScript";

 

---

5. 주요 타입 종류

1. number

숫자 타입

 

let age: number = 25;

 

---

2. string

문자열 타입

 

let name: string = "정현";

 

---

3. boolean

참 / 거짓

 

let isLogin: boolean = true;

 

---

4. array

배열

 

let numbers: number[] = [1,2,3];

 

또는

 

let numbers: Array<number> = [1,2,3];

 

---

5. any

어떤 타입이든 가능

 

let data: any = "hello";
data = 100;

 

하지만 가능하면 사용을 지양하는 것이 좋다.

---

6. TypeScript 장점

1. 버그 감소

타입 검사를 통해 컴파일 단계에서 오류 발견

---

2. 코드 가독성 향상

타입이 명확하기 때문에 코드 이해가 쉬움

---

3. 유지보수 용이

대규모 프로젝트에서 코드 관리가 쉬움

---

4. 개발 생산성 증가

IDE에서

• 자동완성
• 타입 추론
• 오류 표시

등을 지원한다.

---

7. TypeScript 단점

1. 학습 필요

타입 시스템을 이해해야 한다.

---

2. 초기 설정 필요

• tsconfig
• 컴파일 과정

---

3. 빌드 과정 추가

TypeScript → JavaScript 변환 과정 필요

---

8. TypeScript 사용 분야

현재 TypeScript는 다양한 분야에서 사용된다.

프론트엔드

• React
• Angular
• Vue

---

백엔드

• Node.js
• Express
• NestJS

---

기타

• Electron
• React Native

---

9. TypeScript 예시 코드

 

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

console.log(add(10, 20));

 

설명

• a: number → 매개변수 타입
• : number → 반환 타입

---

정리

TypeScript는 JavaScript에 타입 시스템을 추가한 언어로, 코드 안정성과 유지보수성을 높이기 위해 사용된다.

특히 대규모 웹 애플리케이션 개발에서 매우 많이 사용되며, JavaScript와 완전히 호환되기 때문에 기존 JavaScript 프로젝트에도 쉽게 적용할 수 있다.