TypeScript / 개요

TypeScript

JavaScript에 정적 타이핑과 선택적 타입 annotation이 추가된 언어로, 큰 스케일의 애플리케이션 개발을 위해 설계됨

 

 

특징

• 상위 집합 : JavaScript의 상위 집합으로, 모든 자바스크립트의 코드는 구문적으로 유효한 타입스크립트임
• 크로스 플랫폼 : 자바스크립트가 실행되는 모든 플랫폼에서 타입스크립트가 실행됨
• 객체 지향 언어 : 클래스, 인터페이스, 모듈 같은 객체 지향 프로그래밍 기능 제공
• 정적 타입 검사 : 정적 타이핑을 사용해 annotation(타입 주석)을 통해 수행됨 => 컴파일 시 타입 검사가 가능해 스크립트를 매번 실행하지 않아도 오류 찾기가 쉬움
• 타입 추론 : 변수가 타입 없이 선언되면 그 값에 기반해 타입을 추론하는 기능 제공
• 선택적 정적 타이핑 : 정적 타입이 선택적임

* Type Annotation(타입 주석) : 타입스크립트 문법으로 변수, 함수, 객체 등에 명시적으로 타입을 지정하는 방법 -> 컴파일러가 이를 기반으로 타입 검사 수행

 

 

JS vs TS

특징	JS	TS
타입 시스템	동적 타입 / 변수의 타입이 런타임에 결정됨	정적 타입 / 변수의 타입이 컴파일 시점에 결정됨
타입 안정성	낮음 / 타입 오류가 런타임에 발생할 수 있음	높음 / 타입 오류가 대부분 컴파일 시점에서 발견
컴파일	인터프리터 언어 / 소스 코드가 런타임에 해석됨	컴파일 언어 / TS가 JS로 컴파일돼 실행
학습 곡선	비교적 쉬움	JS보다 어려움 타입 시스템 및 추가 문법 학습 필요
인터페이스와 제네릭	X	지원 O
호환성	모든 브라우저와 환경에서 기본적으로 지원	JS로 컴파일되면 실행 가능

 

타입 시스템

• 데이터의 종류를 구분하는 분류체계
• 데이터가 메모리에 어떻게 정장되고 어떻게 처리되어야 하는지에 대한 규칙을 정의
• 안정성 및 신뢰성 확보가 목적

핵심 개념

개념	설명
타입 안정성	변수나 함수가 예상된 타입대로만 동작하도록 보장 → 예기치 못한 동작 방지
타입 추론	명시적으로 타입을 선언하지 않아도 컴파일러가 자동으로 타입을 유추
정적 타입	컴파일 타임에 타입이 결정됨 → 런타임 오류를 사전에 탐지 가능
제네릭(generics)	다양한 타입에 대해 재사용 가능한 코드 작성 가능 → 유연성 + 타입 안정성 확보

 

작동 원리

1. 파싱 (Parsing)
   • TypeScript 컴파일러(tsc)가 코드를 읽고 추상 구문 트리(AST)를 생성
2. 타입 검사 (Type Checking)
   • AST를 분석하여 모든 변수/함수/표현식의 타입을 추론하거나 확인
   • 타입 오류가 있는지 검사
3. 자바스크립트 코드 생성 (Emit)
   • 타입 검사가 끝난 뒤, 타입 정보(주석)는 제거됨
   • 순수 JavaScript 코드로 트랜스파일됨

 

 

---

 

 

TypeScript 설치

공식 사이트 참고 : https://www.typescriptlang.org/ 

 

# 전역으로 설치
npm install -g typescript@5.3.3
# -----------------
# 개발 의존성으로 설치할 경우
npm i --save-dev typescript

 

설치한 후 확인은 다음과 같이 한다

# 타입스크립트 버전 확인
tsc --version
# command not found~ 메시지의 경우
npx tsc --version

 

그다음에 환경설정 파일인 tsconfig.json을 생성한다. *tsconfig.json : ts 프로젝트 구조, 옵션, 타켓 환경 등을 지정

# TS 컴파일러 설정(tsconfig.json 생성)
tsc --init

# 테스트용 index.ts 파일 생성 (작업하고자 하는 프로젝트 폴더 내에서)
touch index.ts

 

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016", // 출력 JavaScript의 문법 버전 (예: async/await 가능)
    "module": "commonjs", // Node.js 환경에서 사용하는 모듈 시스템
    "esModuleInterop": true, // CommonJS 모듈을 ES6 스타일(import ...)로 사용할 수 있게 함
    "forceConsistentCasingInFileNames": true, // 대소문자 일관성 없으면 오류 (ex: import와 실제 파일명이 다를 때)
    "strict": true, // 엄격한 타입 검사 전체를 켬 (아래 모든 strict 계열 옵션 포함)
    "skipLibCheck": true, // node_modules 안의 .d.ts 파일 타입 검사는 생략 (빌드 속도 향상)
    "outDir": "dist", // 컴파일된 JS 파일이 나올 폴더
    "noUncheckedIndexedAccess": true // 객체의 인덱싱 타입 접근 시 undefined 포함하도록 강제함 (안정성 ↑)
    // "lib": ["ES2022", "DOM"] // 사용 가능한 빌트인 API 타입 정의 (예: Promise, Map 등)
  },
  "include": ["src/**/*"] // 컴파일에 포함할 파일 경로들 (여기선 src 폴더 하위 모두)
}

 

index.ts

function hello(name: string) {
  console.log(`Hello ${name}`);
}

hello('Typescript');

 

이를 이제 자바스크립트로 컴파일해야 한다.

tsc index.ts

 

index.js가 생성됨

 

그리고 이제 컴파일된 js 파일을 실행시키면 된다.

node index.js