TypeScript 컴파일 타임과 런타임에서의 URL 파라미터 처리

TypeScript는 정적 타입을 제공하여 컴파일 타임에 코드의 타입을 확인할 수 있도록 도와줍니다. 하지만 런타임에서는 JavaScript로 변환된 코드가 실행되기 때문에 타입 검사가 적용되지 않습니다. 이를 이해하기 위해 컴파일 타임과 런타임의 차이를 살펴보고, URL 파라미터를 처리하는 방법을 알아보겠습니다.

컴파일 타임과 런타임의 차이

컴파일 타임

• 컴파일 타임은 TypeScript 코드가 JavaScript 코드로 변환되는 단계입니다. 이 과정에서 TypeScript 컴파일러는 타입 검사를 수행하여 타입 오류가 있는지 확인합니다. 타입 오류가 없다면 TypeScript 코드는 JavaScript로 변환됩니다.

• 예를 들어, 다음과 같은 TypeScript 코드를 작성했다고 가정해보겠습니다:

import { FastifyRequest, FastifyReply } from 'fastify';

const handler = async (req: FastifyRequest<{ Params: { id: number }; Body: any }>, reply: FastifyReply) => {
  const id = req.params.id;
  console.log(typeof id); // 컴파일 타임에 TypeScript는 id를 number로 인식합니다.
};

• 컴파일 타임에 id는 number 타입으로 인식되기 때문에 타입 오류가 발생하지 않습니다.

런타임

• 런타임은 애플리케이션이 실제로 실행되는 단계입니다. 이 단계에서는 JavaScript 코드가 실행되며, 모든 URL 파라미터는 문자열로 전달됩니다. 이는 JavaScript의 기본 동작입니다.

• 다음은 런타임에서 URL 파라미터가 문자열로 전달되는 예시입니다:

const fastify = require('fastify')();

fastify.get('/example/:id', async (request, reply) => {
  const id = request.params.id;
  console.log(typeof id); // 런타임에서는 id가 항상 string 타입입니다.
  const numericId = Number(id);
  console.log(typeof numericId); // number
});

fastify.listen(3000, err => {
  if (err) throw err;
  console.log('Server listening on http://localhost:3000');
});

• 런타임에 URL 파라미터 id는 문자열로 전달되므로, 이를 숫자로 변환해야 합니다.

정리

• 컴파일 타임: TypeScript 컴파일러가 코드를 JavaScript로 변환하는 단계로, 이 과정에서 타입 검사가 수행됩니다. 이 단계에서는 URL 파라미터가 전달되지 않기 때문에 id가 문자열로 전달되는 동작은 발생하지 않습니다.

• 런타임: 애플리케이션이 실제로 실행되는 단계로, 모든 URL 파라미터가 문자열로 전달됩니다. 따라서 런타임에서는 URL 파라미터를 명시적으로 숫자로 변환해야 합니다.

TypeScript의 타입 시스템은 컴파일 타임에만 적용되므로, 런타임에서 타입 안전성을 보장하기 위해 명시적인 타입 변환이 필요합니다. 특히 URL 파라미터와 같은 경우에는 명시적으로 숫자로 변환하는 것이 중요합니다.

이렇게 컴파일 타임과 런타임의 차이를 이해하고, 적절한 타입 변환을 통해 TypeScript와 JavaScript를 활용하여 안전하고 효율적인 코드를 작성할 수 있습니다.