기술 학습

TypeScript란?

hawon6691 2026. 2. 5. 14:33
728x90

1. TypeScript란 무엇인가?

자바스크립트는 매우 유연하지만, 실행해보기 전까지는 어디서 에러가 날지 알기 어렵다는 단점이 있습니다. 마이크로소프트가 만든 TypeScript는 자바스크립트의 상위 집합(Superset)으로, 코드를 실행하기 전 컴파일(Compile) 단계에서 오류를 잡아내는 정적 타입 언어입니다.


2. 왜 사용하는가? (장점)

단순히 "자바스크립트도 있는데 왜 굳이?"라는 의문이 들 수 있죠. 핵심 이유는 다음과 같습니다.

  • 버그 예방: 변수나 함수의 형태를 미리 정의하기 때문에, 엉뚱한 데이터를 넣어서 발생하는 런타임 에러를 사전에 차단합니다.
  • 강력한 자동 완성: VS Code 같은 에디터가 코드의 의도를 완벽히 이해합니다. 함수에 어떤 인자가 필요한지 일일이 기억할 필요가 없죠.
  • 유지보수의 용이성: 다른 사람이 짠 코드(혹은 3개월 전의 내가 짠 코드)를 볼 때, 데이터가 어떤 구조인지 명확히 알 수 있어 협업 효율이 극대화됩니다.

3. 어떻게 사용하는가?

① 설치 및 환경 설정

먼저 Node.js가 설치된 상태에서 터미널에 아래 명령어를 입력해 설치합니다.

Bash
 
npm install -g typescript

② 기본 문법 예시

변수나 함수 뒤에 : type을 붙이는 것이 핵심입니다.

TypeScript
 
// 변수에 타입 지정
let name: string = "Gemini";
let age: number = 5;

// 함수의 파라미터와 반환값에 타입 지정
function add(a: number, b: number): number {
  return a + b;
}

// 인터페이스를 이용한 객체 구조 정의
interface User {
  id: number;
  username: string;
}

const user: User = { id: 1, username: "Alice" };

③ 실행 과정 (컴파일)

브라우저는 TypeScript를 직접 이해하지 못합니다. 따라서 .ts 파일을 .js 파일로 변환하는 과정이 필요합니다.

  1. tsc index.ts 명령어를 실행합니다.
  2. 결과물로 나온 index.js 파일을 브라우저나 Node.js에서 실행합니다.

요약 비교

특징 JavaScript TypeScript
타입 결정 실행 시점 (Dynamic) 컴파일 시점 (Static)
에러 발견 실행 중에 발견 코드 작성 중에 발견
복잡성 낮음 (배우기 쉬움) 중간 (설계가 필요함)
확장성 소규모 프로젝트 유리 대규모 프로젝트 필수

 

728x90

'기술 학습' 카테고리의 다른 글

NestJS와 Spring에 연관성  (0) 2026.02.05
NestJS는 왜 TypeScript를 사용할까?  (0) 2026.02.05
req, res, next 란?  (0) 2026.02.04
미들웨어(Middleware)란?  (0) 2026.02.04
Passport란?  (0) 2026.02.04