[JS/TS] Trouble Shooting: 컴파일과 런타임 환경

NestJS로 간단한 게시판을 제작하며 CRUD기능을 구현하고 있었다.

연습용 코드였기에 DB연동은 하지 않고, 배열을 임시 DB로 사용하였다.

 

그러던 중 Delete기능의 예외 처리를 하는 과정에서 문제가 발생했다.

 

 

위 사진들처럼 해당하는 id가 있음에도 불구하고, id를 인식하지 못하였다.

 

여기저기 검색도 해보고 코드도 수정해봤지만 결국 해결을 못했고,

GPT에게 물어본 결과 아래 코드처럼 id 파라미터를 강제로 형변환 하는 해결책을 제시해 주었고, 문제는 해결되었다.

Number()를 통한 강제 형변환

 

여기서 궁금증이 생겼다.

board.id 의 타입도 사전에 number로 지정해 주었고, id 파라미터의 타입도 number로 명시적으로 지정해 주었는데 왜 타입이 string으로 바뀌는건지 이해가 가지 않았다.

파라미터의 타입을 명시적으로 지정했음에도 불구하고, string타입으로 출력된다.

 

 

여기저기 찾아보며 도출한 결과는 아래와 같다.

TypeScript 코드는 컴파일환경에서 JavaScript로 변환되고,
파라미터를 전달하는 과정은 런타임 환경에서 이루어진다.

 

따라서 TypeScript 코드에서 명시적으로 타입을 지정해놓았더라도, 파라미터를 입력하는 런타임에서는 자동 형변환이 이루어지지 않는것이다.

 

제대로 된 DB를 사용하기 전 테스트 용도로 만든 임시 배열을 DB로 사용했기 때문에 발생한 해프닝이었지만, (하지만 java에서는 상상도 못할 일일 것이다.)

 

2시간 가까이 이 문제를 해결하기위해 여러 방법을 찾아보는 과정에서 JS/TS에서의 컴파일과 런타임의 차이에 대해 더욱 자세히 알게 될 수 있었고, 앞으로 이런 부분에 대해 더 신경써야겠다는 생각이 들었다.