Typescript 공부하기 15일차 (2022.11.01)

어느덧 11월이 되었다.

이제 다음달이면 6개월 과정 코딩교육도 종료가 된다ㅠㅠ

 

 

JS로 코딩 할 때는 진도가 팍팍 나갔는데..

TS로 하니까 코딩 처음하는 사람이 된거 같다ㅠㅠ

 

오늘 고생한거 정리

 

1) (req, res, next) type 선언방법

(
req: Request<{}>,
res: Response,
next: NextFunction
)

여러 방법을 써봤지만 이 방법이 제일 좋았다.

위의 방법을 쓰기 위해서는 

import express, { Request, Response, NextFunction } from "express";

위와 같이 type을 import하는 절차가 필요하다.

 

그리고 내 코드에서 req는 body에 json형태로  정보가 넘어오는데 이 때 그 정보를 받기 위해서는 Request옆에 <{}>를 추가해주어야 오류를 방지할 수 있었다.

 

이 방법이 제일 좋았던 이유는 이렇게 세부적으로 커스텀이 가능했던 방법이기 때문이다~!

이렇게 간단한걸 몰라서 시간을 많이 소비했다ㅠㅠ

이 글을 읽는 분들에게 도움이 되었으면 좋겠다.

 

 

2) json array의 length 확인시 오류

MySQL DB에서 쿼리문으로 뽑은 사용자 정보를 json array로 받아서 for문으로 민감한 정보를 삭제하는 코드에서 문제가 발생했다.

JS에서는 문제가 없었던 코드!

rows.length!!!

 

컴파일링된 JS에서는 문제가 없는지 postman에서는 정상적으로 결과가 나왔지만,

tsc -w에서는 아래와 같은 오류 메시지가 나왔다.

src/routers/userRouter.ts:29:30 - error TS2339: Property 'length' does not exist on type 'RowDataPacket[] | RowDataPacket[][] | OkPacket | OkPacket[] | ResultSetHeader'.
  Property 'length' does not exist on type 'OkPacket'.

29     for (let i = 0; i < rows.length; i++) {

구글링을 아무리 해봐도 만족스러운 답을 얻을 수 없었다ㅠㅠ

 

설마 내가 겉모습만 보고 json array라고 생각했는데 사실 array가 아닌게 아닐까? 하는 의심에 아래 코드를 찍어 봤다.

    console.log("Array.isArray(rows): ", Array.isArray(rows));
    //Array.isArray(rows):  true

누가봐도 array인데.. 그럼 그렇지..

 

너무 검색을 많이 해서 관련 새로운 페이지가 안나올 때쯤 바보 같은 짓을 해봤다. 

const [rows, fields] = await promisePool.query("SELECT * FROM users");
    console.log("rows: ", rows); 
    //길어서 생략
    console.log("Array.isArray(rows): ", Array.isArray(rows)); 
    //Array.isArray(rows):  true
    console.log("typeof rows: ", typeof rows);
    //typeof rows:  object
    const rowsA = JSON.stringify(rows);
    console.log("rowsA: ", rowsA);
    //길어서 생략
    console.log("typeof rowsA: ", typeof rowsA);
    //typeof rowsA:  string
    const rowsB = JSON.parse(rowsA);
    console.log("rowsB: ", rowsB);
    //길어서 생략
    console.log("typeof rowsB: ", typeof rowsB);
    //typeof rowsB:  object
    for (let i = 0; i < rowsB.length; i++) {
      delete rows[i].password;
    }
    //에러 메시지 없음

어? 이게 왜 되지?!

json array를 JSON.stringify를 이용하여 object에서 string으로 바꾸었다가 JSON.parse로 다시 object로 돌려놓은 것뿐인데?!

이게 될 거였으면 처음부터 되야하는거 아닌가?!

 

너무 찝찝해서 납득이 되는 이유나 해결책을 찾으려고 시도했으나.. 실패ㅠㅠ

 

 

TS스터니 맴버들과 공유해서 찾아봤지만 소득은 없었다ㅠㅠ

이건 천천히 알아가야겠다.