인프런 강의 - 한 입 크기로 잘라먹는 타입스크립트 (강의 소개 및 타입스크립트 개론)

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런

 

📌 타입스크립트를 소개합니다

 

✅ 자바스크립트, 충분히 잘 쓰고 있었는데 꼭 타입스크립트가 필요할까?

• 자바스크립트는 세상에서 가장 인기 있는 언어 중 하나 (2022년 Stack Overflow 설문 1위)
• 브라우저에서 간단한 상호작용을 위해 설계되어 문법이 유연하고 간결한 코드 작성에 초점

✅ 그런데 왜 타입스크립트?

• Node.js의 등장으로 자바스크립트가 웹 브라우저 밖에서도 실행 가능해짐
• 이제는 웹 서버, 모바일 앱, 데스크탑 앱 등 복잡하고 대규모한 프로그램 개발에도 사용됨
• 이때 자바스크립트의 지나친 유연함이 오히려 단점이 됨 -> 버그 발생 가능성 증가, 유지보수 어려움

✅ 타입스크립트의 등장

• 자바스크립트의 문법과 장점은 그대로 유지하면서, 정적 타입 시스템을 추가해 안정성을 보완한 언어
• 즉, 더 큰 규모의 개발에 적합한 자바스크립트의 확장 버전

 

📌 자바스크립트의 한계점과 타입스크립트

 

✅ 타입 시스템이란?

• 변수의 타입을 어떻게 결정하고 검사할지에 대한 체계로, 두 가지 방식이 존재
• 정적 타입 시스템: 실행 전에 타입 결정 (예: Java, C)
• 동적 타입 시스템: 실행 중에 타입 결정 (예: JavaScript, Python)

✅ 정적 타입 시스템의 장단점

• 장점: 실행 전에 오류를 사전에 탐지 가능 -> 안정성 높음
• 단점: 모든 변수에 타입을 명시해야 하므로 귀찮고 번거로움

✅ 타입 스크립트의 해결책

• 정적 타입 검사의 안정성과 동적 타입의 유연함을 모두 갖춘 하이브리드 타입 시스템
• 타입을 직접 지정하지 않아도 초기값 기반으로 자동 추론 가능 -> 실수 방지 + 코드 생산성 유지

 

📌 타입스크립트의 동작 원리

 

✅ 타입스크립트의 동작 방식

• 대부분의 언어처럼 타입스크립트도 컴파일 과정을 거침
• 작성한 코드를 AST(추상 문법 트리)로 변환 후, 타입 오류 여부를 검사
• 타입 오류가 없다면 자바스크립트 코드로 변환됨 (바이트코드가 아님)

✅ 타입스크립트의 컴파일 흐름

1. 타입스크립트 코드 -> AST로 변환
2. AST 기반 타입 검사 수행
3. 오류가 없으면 -> 자바스크립트 코드로 컴파일 완료
4. 최종 JS 코드는 Node.js 또는 브라우저에서 실행

✅ 핵심 특징

• 타입스크립트는 컴파일 결과로 JS 코드가 생성됨
• 타입 오류가 있으면 컴파일 실패 -> 실행 불가
• 타입 관련 코드는 실행 시 제거됨 -> 런타임에는 영향 없음

 

📌 Hello TS World!

TypeScript 실습을 시작하기 위해 필요한 환경 구성 요소는 다음과 같다.

1. Node.js 설치
2. Visual Studio Code 설치
3. npm init
 ㄴ Node.js 패키지 초기화
4. npm install @types/node
 ㄴ Node.js 내장 기능에 대한 타입 정의 설치
5. npm install -g typescript
 ㄴ typescript 컴파일러 전역 설치
 ㄴ tsc src/index.ts: .ts 파일을 .js로 컴파일
 ㄴ node src/index.js: 컴파일된 .js 파일 실행
6. npm install -g tsx
 ㄴ .js 파일 생성 없이 .ts 파일을 즉시 실행
 ㄴ 위 5번처럼 2단계(tsc + node)로 나누지 않고, tsx src/index.ts 한 번에 실행 가능

 

console.log("Hello TypeScript")
const a: number = 1;

첫 번째 실습 코드라 그런지 뭔가 굉장히 귀엽다. 위 .ts 파일을 컴파일하면, 생성되는 .js 파일은 아래와 같다.

 

console.log("Hello TypeScript")
const a = 1;

number 같은 타입 정보는 TypeScript 전용 문법이라, 컴파일 시 제거되고 순수한 JavaScript 코드만 남게 된다.

 

📌 타입스크립트 컴파일러 옵션 설정하기

{
  "compilerOptions": {
    "skipLibCheck": true,
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "strict": false,
    "moduleDetection": "force"
  },
  "include": ["src"]
}

 

✅ TypeScript 컴파일러 옵션 요약

• 타입스크립트 코드를 어떻게 자바스크립트로 변환할지 제어하는 설정값
• 검사 강도, 출력 위치, JS 버전 등 세부적인 컴파일 동작 제어 가능
• 설정 파일: tsconfig.json

✅ 주요 컴파일러 옵션

• include: 컴파일할 TypeScript 파일의 위치/범위 지정
• target: 변환할 자바스크립트의 버전 지정
• module: 사용할 모듈 시스템 지정
• outDir: 컴파일된 JS 파일의 출력 폴더 지정
• strict: 엄격한 타입 검사 모드
• moduleDetection: 모든 .ts 파일을 자동으로 모듈로 인식 (변수 충돌 방지)

 

⭐ moduleDetection: "force"

• 타입스크립트의 모든 파일은 기본적으로 전역 스코프로 취급됨
   -> 서로 다른 파일에서 같은 변수명을 사용하면 충돌 발생
• 이를 방지하려면 파일을 로컬 모듈로 인식시켜야 함
   -> 일반적으로는 import 또는 export 키워드를 직접 작성해야 함
• tsconfig.json에 "moduleDetection": "force" 설정
   -> import 또는 export 키워드를 직접 작성하지 않아도 컴파일된 JS 파일에 모듈 관련 코드가 자동 삽입됨

 

⬇️ 다음 내용은 아래 글을 참고

인프런 강의 - 한 입 크기로 잘라먹는 타입스크립트 (타입스크립트 기본)