[ TIL ] Day 47(2) - 타입스크립트 심화 문법 & 유효성 검사

🗓️ 수업 일자 : 2025.12.1

✨ 오늘의 수업 평가 :  [ GOOD ]  이 모든걸 이해한 나, 칭찬해 😎🚀

 

주말에 감기에 호되게 당해서, 오늘 화면 끈 상태로 수업을 들었다~

결석처리지만, 나에게 중요한건 "수업을 들었다"는거니까! 👍👍

기침하고 콧물 닦으며 겨우 들었지만, 안 들으면 다음 수업을 따라갈 자신이 없어서

정신줄 붙들고 겨우 수업 들었다 ㅋㅋㅋ 

 

📝  오늘 배운 내용  

- 타입스크립트용 타입 정의 패키지

- 패키지의 타입 커스텀 하기

- [ ts-node + nodemon ] 패키지 사용하기

 

---

 

1. 타입스크립트용 타입 정의 패키지 

@types/"packages" 

 : 기존에 사용하던 node.js 패키지들은 타입이 정의되어 있지 않아 타입스크립트에서 사용 불가능 함

  ⇒ @types/"packages" 로 되어 있는 타입이 정의 된 패키지를 불러와 사용 해야 함

       설치 할 때는 개발 환경에서만 사용하는 패키지 이므로 [npm install --save-dev 패키지명]으로 설치

TypeScript 에서 Express를 그냥 쓰는 경우 타입이 정의 되지 않아 에러가 발생

 

TS 전용 패키지 확인 방법

- npmjs 홈페이지에서 원하는 모듈을 검색하면 @types/"packages" 으로 나오면 클릭하여 들어가기,
  혹은 아래 이미지와 같이 일반 패키지명 옆으로 [ DT ] 마크가 나오는데 마크를 누르면 TS 전용 패키지로 이동함

일반 패키지명 옆으로 [  DT  ] 마크가 나오는데 마크를 누르면  TS 전용 패키지 로 이동함

 

express 사용 예시 

[ 기존 express 사용 구문 ]
import express from 'express'; // 에러 발생

const app = express();

app.get('/', (req, res) =>{ // (req,res)에서 에러 발생
  res.send('Hello, Typescript🪄');
});

app.listen(3000, () => {
  console.log('Server running 3000🚀');
});


[ @types/express 사용 구문]
import express, { Request, Response, NextFunction } from 'express';

const app = express();

// 기존에 사용하던 핸들러의 인자마다 타입을 정의 해야함
const handler = (req: Request, res: Response, next: NextFunction) => {
  res.send('Hello, Typescript🪄');
};

app.get('/', handler);

app.listen(3000, () => {
  console.log('Server running 3000🚀');
});

 

 

 

2. 패키지의 타입 커스텀 하기

*.d.ts 파일 : 타입 정의 파일(Type Definition File), JS로 변환되지 않고 타입 정의한 정보만 담는 파일.

                   기본적으로 @types/패키지 를 다운로드 받으면 관련된 타입 정의 파일이 생성됨. 

                   개발자가 필요에 따라 타입을 추가 할 수 있음 

 

tsconfig.json 파일에서 타입 정의 파일 불러오기 설정

  // 사용자가 커스텀 한 패키지 타입 정의가 먼저 적용되기 위한 옵션
  "typeRoots": [
    "./types", // 사용자가 작성한 패키지 타입이 정의 된 폴더 위치
    "./node_modules/@types" // 패키지에서 제공하는 타입이 정의 된 폴더 위치
  ],

 

예시 : express 패키지에 valid 정의 하기

import express from 'express';
// import 라고 썻지만, 이 파일이 express 패키지를 확장하려는 파일이라는 걸 TS에게 알려 주려는 용도


declare global { // 전역 타입공간(Global Type Space)에 설정을 추가 하겠다는 의미
  namespace Express { // Express가 제공하는 "타입 선언 공간 = namespace"에 접속
    interface Request { 
      // interface Request = 타입스크립트 기능에 따라 동일한 이름을 사용해 interface 하면
      // 기존에 이미 선언되어 있던 Request 안에 타입을 추가 정의 할 수 있음
      
      valid?: boolean;
    }
  }
}

 

1) 네임스페이스 기반 타입 정의

• node_modules/@types/패키지명/index.d.ts 열었을 때 "declare namespace.." 가 맨 윗쪽으로 보임
• 전역 타입 공간에 사용자의 커스텀 타입을 정의(위 예시)하거나, namespace Valid{... } 처럼 직접 타입을 추가하기도 함

// 전역 타입 공간 선언 없이 바로 타입 추가하기 

declare namespace NodeJS {
  interface ProcessEnv {
    MY_CUSTOM_ENV?: string;
  }
}

 

2) 모듈(export) 기반 타입 정의

• node_modules/@types/패키지명/index.d.ts 열었을 때 "export interface ... " 로 시작하는 타입 정의
• 사용자 커스텀 진행 시, 원하는 모듈을 찾아 해당 모듈을 불러오고 interface 덮어쓰기하여 사용 

예시 : types/axios.d.ts
import 'axios'; // 모듈 로딩용(사이드 이펙트 import)

declare module 'axios' { // 원하는 모듈 찾아서
  interface AxiosRequestConfig { // 그 안에 덮어쓰기 할 인터페이스 선언
    retryCount?: number;
  }
}

 

 

 

3. [ ts-node + nodemon ] 패키지 사용하기

ts-node : .ts파일을 실행하려면 TSC(타입스크립트 컴파일러)를 진행하여 .js 파일로 변환한 뒤 실행해야 하는데 
                이러한 변환 과정 없이 바로 TypeScript를 실행 시켜주는 도구

nodemon : 개발 환경에서 파일이 변환되면 재실행 해 주어야 하는데, 알아서 변환 된 부분을 추가 해 주는 패키지 도구

ts-node + nodemon => .ts 파일이 업데이트 되면 변환 과정 없이 알아서 개발 환경에 적용되게 해 주는 TS 개발환경 패키지

 

사용 방법 

1. ts-node 설치하기 : npm i -D ts-node
   nodemon 설치하기 : npm i -D nodemon 
   두 패키지 모두 개발환경에서만 사용하므로 --save-dev 또는 -D 옵션으로 설치
2. package.json 파일에 셋팅하기 
   "scripts": {
       "dev": "nodemon --watch src --exec ts-node src/app.ts"
     },

+ 추가 [ package.json 명령어 해석 ]

 nodemon : 파일이 바뀌면 재실행 해 주는 패키지

 --watch src : src 폴더 안에 있는 파일들을 감시 → src 안에 .ts 파일들이 바뀌면 자동으로 재실행

 --exec ts-node : nodemon이 재실행 될 때 ts-node를 사용

 src/app.ts : 이 프로젝트의 메인 서버 파일을 지정 

 ⇒ nodemon --watch src --exec ts-node src/app.ts
     : src 폴더를 감시하다가 변경 생기면 ts-node를 이용해 app.ts를 즉시 다시 실행해라.

 

---

 

📃 내일은 뭘 배울까 🤔

- RESTful API 설계 및 문서화