Frontend/TypeScript

[TypeScript] 0. 타입스크립트 개요

ayeongjin 2025. 1. 21. 01:04

타입스크립트 = 자바스크립트의 확장판

자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련 기능들을 추가한 언어

// JavaScriptlet a = 1;
let b = 2;

console.log(a + b);

// TypeScriptlet a:number = 1;
let b:number = 2;

console.log(a + b);

 

JavaScript

  • 유연한 문법
  • 버그 발생 가능성 높음
  • 자유로움

 

TypeScript

  • Node.js의 등장 이후 탄생
    • 자바스크립트 구동기(런타임)
    • 어디서든 자바스크립트 구동 가능 (웹서버, 모바일 앱, 데스크탑 앱)
  • 엄격한 문법
  • 버그 발생 가능성 낮음
  • 안정적임

타입 시스템

 

정적 타입 시스템

  • 코드 실행 이전 모든 변수의 타입을 고정적으로 결정함
  • 모든 변수에 일일히 타입을 지정해주어야함
  • 타이핑 양 증가, 유연하지 못함
  • 엄격하고 고정적인 시스템
  • ex. C, Java

 

동적 타입 시스템

  • 코드를 실행하고 나서 그때 그때 마다 유동적으로 변수의 타입을 결정함
  • 코드의 타입 오류릉 미리 검사할 수 없음
  • 예기치 못한 오류가 발생할 수 있음
  • 자유롭고 유연한 시스템
  • ex. Pythone, JavaScript

 

타입스크립트의 타입 시스템 = 점진적 타입 시스템 (Gradual Type System)

  • 실행 전 검사를 통한 타입 안전성 확보
  • 자동으로 변수의 타입을 추론함
  • 모든 변수에 타입을 일일이 지정할 필요 없음

타입스크립트의 동작 원리

  1. AST(추상 문법 트리), 타입 검사 과정을 거침 1-1. 검사 성공하면 자바스크립트 코드로 변환 1-2. 검사 실패하면 컴파일 종료
  2. AST 변환
  3. 바이트코드로 변환
  4. 실행

타입스크립트 초기 설정

 

1) Node.js 패키지 초기화

  • 터미널을 열고 다음 명령어를 입력해 Node.js 패키지를 초기화
  • 패키지 정보는 모두 디폴트(기본)로 설정합니다
npm init

 

2) @types/node 설치하기

  • Node.js 내장 기능들의 타입 정보를 담고있는 @types/node 라는 패키지를 설치
npm i @types/node
  • @types/node 라이브러리는 Node.js가 제공하는 기본 기능(내장 함수, 클래스 등)에 대한 타입 정보를 가지고 있음
  • 만약 이 라이브러리를 설치하지 않으면 Node.js가 제공하는 console 등의 기본 기능(내장 함수 등)들의 타입이 선언되지 않아서 타입스크립트의 컴파일 과정에서 타입 검사가 실패하여 오류가 발생할 수 있습니다.
  • 이 패키지를 꼭 설치해야 하는 이유
    • 타입스크립트는 코드를 실행하기 전에 타입을 올바르게 사용했는지 검사하는 ‘타입 검사’ 과정을 거친다.
    • 이 검사 과정에서 타입이 선언되지 않은 코드를 만나게 되면 타입스크립트는 타입이 올바르게 사용 되지 않았다고 생각해 오류를 발생 시킴
    • 따라서 Node.js의 기본 기능들을 위한 타입을 별도로 선언하기 위해 @types/node 패키지를 설치

 

3) 타입스크립트 컴파일러 설치

  • 타입스크립트 컴파일러(TSC)는 npm의 TypeScript 패키지에 동봉되어 있다.
  • 터미널에 다음 명령어를 입력해 TypeScript 패키지를 설치 (window / mac)
npm i -g typescript
sudo npm i -g typescript
  • 자바스크립트를 실행하기 위해 Node.js를 설치하는 것 처럼 타입스크립트를 컴파일 하기 위해서는 타입스크립트 패키지를 설치
  • -g 옵션을 이용해 전역으로 설치합니다. 이렇게 전역으로 패키지를 설치하면 마치 pc에 설치된 프로그램처럼(Node.js 처럼) 터미널에 패키지 이름을 호출해 사용할 수 있다.
  • 참고로 macOS일 경우 sudo(관리자 권한) 옵션을 사용하므로 PC 패스워드 입력

설치 완료

> tsc -v
2Version 4.9.5
 

4) 타입스크립트 실행하기

타입스크립트 파일 만들기

// src/index.ts

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

tsc로 컴파일하고 실행하기

  • 컴파일러를 이용해 이 타입스크립트 코드를 컴파일
  • tsc 파일명 : 특정 파일을 컴파일 하도록 타입스크립트 컴파일러에게 지시하는 명령dj
tsc src/index.ts
  • 컴파일이 완료되면 자바스크립트 파일 src/index.js 이 생성
// src/index.js

console.log("Hello TypeScript");
var a = 1;
  • 이렇게 컴파일 된 자바스크립트 코드는 node를 이용해 실행
> node src/index.js
Hello Typescript
 

5) TSX(TypeScript Execute)로 실행하기

  • 앞서 타입스크립트 코드를 실행하기 위해 tsc를 이용해 타입스크립트 코드를 자바스크립트로 변환한 다음 변환된 자바스크립트 코드를 Node.js로 실행시켰습니다.
  • 정리하면 tsc 그리고 node 2번의 명령어를 사용해 타입스크립트 코드를 실행
  • 이번에는 명령어 한번으로 타입스크립트 코드를 바로 실행시켜주는 도구 tsx(TypeScript Execute) 사용
  • tsx : 단 한번의 명령어로 타입스크립트 코드를 실행시켜주는 도구
    • 타입스크립트를 설치할 때와 동일하게 npm에 -g 옵션을 붙여 글로벌로 설치합니다. (Window / Mac)
npm i -g tsx
sudo npm i -g tsx
  • 설치 확인 (정상적으로 설치 되었다면 아래와 같이 버전 코드가 출력됩니다. 참고로 이때 현재 설치된 Node.js의 버전도 함께 출력)
> tsx -v
tsx v4.6.2
node v20.9.0

 

  • 설치 확인까지 마쳤다면 이제 tsx를 이용해 타입스크립트 파일을 실행
  • 앞서 tsc를 이용했을 때와 비교해 tsc 명령어를 tsx로 교체한 것 과 같다
> tsx src/index.ts
Hello TypeScript
  • 그 결과 자바스크립트 파일을 생성하지 않고 한번에 타입스크립트 파일을 실행
  • 이렇듯 tsx를 이용하면 보다 쉽게 한번의 명령어로 타입스크립트를 실행할 수 있다.
  • 언제 tsc를 사용하고 tsx를 사용하는지에 대해서는 이후에 더 자세히 다룹니다. 지금은 두가지 방법으로 타입스크립트를 실행할 수 있으며 두 방법에 어떤 차이가 있는지만 알고 있으면 됩니다.
[참고 1]
강의 중 사용하는 ts-node는 Node 20 버전 이상에서는 더 이상 동작하지 않는다
→ ts-node 대신 tsx 사용

컴파일러 옵션 설정

타입스크립트의 컴파일은 우리가 작성한 코드에 타입 오류가 없는지 검사하고 오류가 없다면 자바스크립트 코드로 변환

 

1) 컴파일러 옵션 자동생성

> tsc --init

 

2) 컴파일러 옵션 직접생성

// tsconfig.json 파일 생성

{
  "compilerOptions": {
    "target": "ESNext", // 컴파일하여 생성되는 자바스크립트의 버전
    "module": "ESNext", // 변환된 자바스크립트의 모듈 옵션 설정
    "outDir": "dist", // 컴파일한 자바스크립트 파일들이 생성될 폴더 분리
    "strict": true, // true: 엄격한 코드 검사 (ex. 매개변수의 타입 지정)
    "moduleDetection": "force" // 컴파일시에 export{}; 같은 모듈 시스템 키워드 추가
  },
  "ts-node": {
    "esm": true // ts-node 가 esm모듈 시스템으로 동작 (기본은 commonjs)
  },
  "include": ["src"]  // 컴파일할 파일의 경로
}
  • include : tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려주는 옵션
  • target : 컴파일 결과 생성되는 자바스크립트 코드의 버전을 설정하는 target 옵션
  • module : 변환되는 자바스크립트 코드의 모듈 시스템을 설정
  • outDir : 컴파일 결과 생성할 자바스크립트 코드의 위치를 결정
  • strict : 타입스크립트 컴파일러의 타입 검사 엄격함 수준을 정함
  • moduelDetection : 각 파일에 모듈 시스템 키워드(export, import)를 최소 하나 이상 사용해 해당 파일을 전역 모듈이 아닌 로컬(독립) 모듈로 취급되도록 만들어야 하는데 이를 자동화
  • ts-node (tsx 사용할 경우에는 패스 가능) : moduleDetection 옵션을 활성화 하고 타입스크립트 파일에서 모듈 시스템을 사용하게 되면 ts-node로 실행시 오류가 발생하는데 이를 막아줌

 

[참고 2]
@types 버전이 20버전 이상으로 업데이트되면서 특정 라이브러리에서 타입 검사 오류 발생
→ tsconfig.json에 compilerOption 내부에 skibLibCheck 옵션을 추가
{
  "compilerOptions": {
    "skipLibCheck": true,
    // ...
  },
	// ...
}