[TS] "Hello TypeScript World!"

---

01

TypeScript 란 

프로그래밍을 하다 보면, 변수에 어떤 타입이 들어가야 하는지 헷갈릴 때가 많지요?

예를 들어, 숫자를 넣어야 하는데 실수로 문자열을 넣으면 에러가 날 수도 있고, 함수가 예상치 못한 값을 반환하면 디버깅하느라 시간 낭비하게 되죠. 이런 문제를 미리 잡아주는 게 바로 타입스크립트(TypeScript)입니다!

1. 타입스크립트는 무엇인가요?

타입스크립트는 마이크로소프트에서 만든 자바스크립트의 상위 확장 언어입니다.

쉽게 말하면, 자바스크립트에 "타입" 개념을 추가해서 코드 작성할 때 더 안전하게 만들 수 있도록 도와주는 언어죠.

 

자바스크립트처럼 동작하지만, 변수나 함수에 타입을 미리 정해두면 잘못된 타입을 사용할 경우 컴파일 시점에서 오류를 잡아줍니다.

그리고 타입스크립트 코드는 바로 실행되지 않고, 먼저 자바스크립트로 변환(컴파일) 한 후 실행해야 합니다.

이 과정에서 타입 검사를 수행하기 때문에, 버그를 줄일 수 있는 거죠!

 

 

2. 자바, 타입스크립트, 자바스크립트 비교

타입스크립트는 점진적 타입 시스템(Gradual Typing System)을 사용합니다.

이는 정적 타입 시스템(Java)과 동적 타입 시스템(JavaScript)의 장점을 결합한 방식으로, 실행 전에 타입을 검사하여 안정성을 높이면서도 유연성을 제공합니다.

타입스크립트에서는 변수에 명시적으로 타입을 지정할 수도 있고, 자동으로 타입을 추론할 수도 있습니다.

 

아래 비교를 보면 세 언어의 차이를 쉽게 이해할 수 있습니다.

---

02

타입스크립트 실행 과정

타입스크립트는 먼저 타입 검사를 수행한 후, 자바스크립트로 변환됩니다. 타입 검사가 성공해야만 코드가 실행될 수 있죠.

 

✅ 프로젝트 초기화

npm init -y  # 프로젝트 초기화

 

✅ 타입스크립트 및 필요한 패키지 설치

npm install typescript @types/node ts-node

 

👉 설치가 끝나면 타입스크립트 버전을 확인해 볼까요?

tsc -v

 

✅타입스크립트 실행하기

이제 .ts 파일을 만들어 실행해봅시다.

tsc index.ts  # index.ts를 컴파일하면 index.js 파일이 생성됨
node index.js  # 실행

---

03

타입스크립트 설정하기

타입스크립트를 프로젝트에서 제대로 사용하려면 컴파일러 옵션을 설정해야 합니다.

tsc --init  # tsconfig.json 생성

 

✅tsconfig.json 파일을 열어보면 다양한 설정이 있습니다.

{
  "compilerOptions": {
    //20버전이상인 최신버전에서 불필요한 타입 정의 파일의 타입 검사를 생략할수있는 옵션
    "skipLibCheck": true,
    
    //최신 자바스크립트 문법 사용(ESNext 는 자바스크립트 최신버전을 의미합니다)
    "target": "ESNext",    
    
    //ES 모듈 시스템 사용
    "module": "ESNext",    
    
    //컴파일 결과로 생성될 자바스크립트파일(컴파일된 파일)이 저장될 폴더 지정
    "outDir": "dist",      
    
    //타입스크립트가 컴파일할때 얼마나 엄격하게 검사할지 정하는 옵션 (true: 엄격하게 검사함)
    //보통 개발자가 상세옵션까지 설정해서 사용한다
    //간혹 JS 를 TS로 바꿨을때 true로하면 코드가 오류가 많이 생길수있어 false로 끄는 경우도 있다
    "strict": true,
    
    //타입스크립트가 각각의 파일을 어떤 모듈로 인식할지 정하는것
    "moduleDetection": "force"
  },
  
    //ts-node는 EX모듈시스템을 이해 못한다 > ts는 기본적으로 common.js를 사용하기 때문에
    //ts-node가 아래의 옵션으로 Esm모듈로 작동한다
    "ts-node": {
		"esm": true
  	},	
  
    //경로중에 src안에 포함된 얘들을 컴파일 해줘 (범위와 위치지정)
    //파일수가 많을때 한번에 컴파일하기 좋다
    "include": ["src"]  // src 폴더 안의 파일만 컴파일
}

 

설정이 변경된 후 바로 적용하려면 타입스크립트 서버를 다시 시작해야 합니다.

Mac: Command + Shift + P → Restart TypeScript Server

Windows: Ctrl + Shift + P → Restart TypeScript Server

 

이제 타입스크립트 설정이 반영된 상태에서 개발을 진행할 수 있습니다!

---

03

타입스크립트 모듈 시스템 이해하기

타입스크립트는 전역 모듈을 기본으로 합니다. 즉, 다른 파일에서 같은 변수명을 사용하면 오류가 날 수도 있습니다.

이 문제를 해결하려면, 각 파일을 독립적인 모듈로 만들어야 합니다.

 

✅해결 방법

1. export {} 또는 import를 파일에 추가하면 해당 파일이 독립적인 모듈로 인식됩니다.
2. tsconfig.json에서 moduleDetection 옵션을 설정할 수 있습니다.

👉 타입스크립트 서버 다시 시작하기

설정을 변경한 후 바로 적용하려면 타입스크립트 서버를 다시 시작해야 합니다.

 

Mac:

Command + Shift + P → Restart TypeScript Server

 

Windows:

Ctrl + Shift + P → Restart TypeScript Server

 

이제 타입스크립트 설정이 반영된 상태로 개발을 진행할 수 있습니다!

---

04

마무리

타입스크립트는 코드를 더 안전하게, 유지보수하기 쉽게 만들어주는 도구입니다.
정적 타입 시스템을 통해 실행 전에 오류를 방지하고, 코드의 안정성을 높일 수 있습니다. 또한 점진적 타입 시스템 덕분에 필요할 때만 타입을 추가하며 유연하게 적용할 수도 있죠.

 

설정을 조정하면 더욱 편리하게 사용할 수 있으며, tsconfig.json을 활용하면 프로젝트에 맞게 최적화할 수 있습니다.

기본적인 개념과 설정 방법을 익혔으니, 이제 직접 코드를 작성하고 실습하면서 더욱 익숙해지는 것이 중요합니다. 😃

 

 

 

이미지출처: 한 입 크기로 잘라먹는 타입스크립트(TypeScript)