Express + TypeScript를 사용하는데 타입에 관해서 무슨 타입을 줘야하고 왜 타입이 지정되지 않고 어떻게 해야하는지 찾아보다가 좋은 기사글을 발견하여 한글로 글을 작성해봅니다.
Express 함수 타입
표준 Express 함수는 req(uest), res(ponse), next (function) 세 가지 매개변수가 있으며 가장 기본적인 형태는 다음과 같습니다.
TypeScript는 바로 "3가지 매개변수에 모두 암묵적으로 any 유형을 가진다"는 에러가 발생합니다. TypeScript는 실제 타입을 알 수 있는 방법이 없기 때문에 바로 "3가지 매개변수에 모두 암시적으로 any 유형을 가진다"는 에러가 발생합니다.
(any는 변수 유형을 알 수 없거나 정의되지 않은 경우 할당되는 일반적인 타입)
tsconfig.json 파일의 기본 "noImplicitAny" 설정을 변경하면 이 특정 오류가 발생하지 않게 될 수 있습니다. 이는 타입 관련 오류를 식별하기 위해 TypeScript를 사용하는 목적을 무너뜨리기 때문에 권장되지 않습니다. 대신에 타입 정의 RequestHandler를 사용하여 전체함수에 타입을 적용할 수 있습니다.
이것이 Express 함수에 타입을 정의하는 가장 효율적인 방법입니다.
하지만 함수에 error 매개변수를 사용하여 기본 오류 처리 경로를 생성하는 일반적인 경우에는 어떻게 될까요?
아래에서 볼 수 있듯이 함수에 err 매개변수를 추가하면 RequestHandler 타입 정의가 추가 매개변수를 허용하지 않기 때문에 TypeScript는 다른 오류를 나타냅니다.
이러한 경우 RequestHandler 타입을 사용하는 대신 개별적으로 req, res, next 타입을 사용하고 error에 type을 정의합니다. 오류 타입 정의는 필요에 따라 달라지고 예를 들면 아래 처럼 생성할 수 있습니다. 이것이 next()를 통해 전송되는 오류 형식이 될 경우입니다.
또한 아래 Error 처리 함수에서 처럼 global Error 타입을 사용할 수도 있습니다.
Request params 작업
id params를 받는 요청에 expressFunction이 실행된다고 가정하겠습니다.
이렇게 하면 "/:id"에 대한 요청이 들어올 때마다 콜백함수가 트리거됩니다. 이 예시에서 :id는 임의의 문자열로 인식됩니다.
expressFunction에서 req.params.id를 나타내는 id 변수를 생성하였습니다.
TypeScript는 암시적으로 req.params의 변수를 문자열로 추론합니다.
req.params 자체에 타입을 할당하지 않았기 때문에 Typescript는 매개변수 객체에 있는 어떤 값이라도 참조할 수 있게 하고 string으로 타입을 지정합니다. 심지어 값이 존재하지 않더라도 가능합니다!
이것은 명백하게 차선책입니다. 다행히도 {} 구문을 사용하여 RequestHandler에 타입 정의를 추가해줌으로써 쉽게 request 매개변수 객체에 타입을 타입을 지정할 수 있습니다.
이 타입 할당을 통해 제공될 것으로 예상되는 값만 허용됩니다. 이제 req.params.userId를 발견하면 오류가 발생합니다. req.params 객체는 id 값만 포함하는 것으로 정의되었기 때문입니다.
Request body 작업
API routes는 종종 사용자가 생성한 데이터를 전달 받습니다. 일반적으로 이 데이터는 request body에 있습니다. req.params 내의 값과 비슷하게, TypeScript는 req.body 값에 암시적으로 any 타입을 할당합니다. (req.params 값에 문자열 타입이 할당되는 것과 대조됨) 이건 request body 안에 strings, numbers, booleans 다양한 값들이 포함될 수 있기 때문입니다.
다음은 일반적인 request body의 일부일 수 있는 다양한 타입의 데이터가 포함된 JSON 개체입니다.
Typescript가 암시적으로 any 타입을 할당할 때 주의해야 합니다. request body 타입을 강력하게 지정하지 않는 경우 Typescript는 변수에 any 타입을 할당하고 어떤 상황에서든 해당 변수를 사용하도록 허용할 것입니다.
따라서 request body의 타입을 정의하는 것이 중요합니다. 위에 정의된 JSON을 예로 들어 저희가 사용할 수 있는 몇 가지 방법을 살펴보겠습니다. Request body에는 세 개의 키가 있는 객체가 포함되어 있고 이 값은 문자열, 부울 및 숫자입니다.
방법 1: Type Casting
Type Casting은 변수를 하나의 타입에서 다른 타입으로 강제 변환하는 방법입니다. 이 방법을 사용할 대 TypeScript 오류를 방지하기 위해 문법이 정확한지 확인해야 합니다. 
각 request body값에 이 메서드를 사용할 경우 코드는 다음과 같습니다.
위 코드는 이 접근 방식의 문제점도 보여줍니다. Request body 자체에 타입을 지정하지 않았기 때문에 잘못된 타입을 할당하거나 변수를 정의하고 존재하지 않는 값에 타입을 할당하는 가능성이 존재합니다.
방법 2: Type the Request Body
Request body 전체에 타입을 지정하기 위해 인터페이스를 생성하고 적용해보겠습니다.
이 방법을 사용하면 다음과 같은 몇 가지 장점이 존재합니다.
- Request body에 타입을 지정하면 이제 존재하지 않는 변수 nope가 "'RequestBody' 유형에 'nope' 속성이 존재하지 않습니다."라는 텍스트와 함께 TypeScript 오류를 제대로 발생시킵니다.
- 인터페이스에 정의된 값만 포함하는 새 변수 user를 만들 수 있습니다. 이는 점 표기법을 통해 쉽게 접근할 수 있고 올바르게 타입이 정의되었습니다.
- VSCode와 같은 코드 편집기는 user 내부에 존재하는 변수에 대해서 자동완성 기능을 제공합니다.
