Typescript interface 를 정의할 때, 복잡한 Object 일 경우

사이드 프로젝트를 하다가 useState 를 사용할 때 빨간줄이 나타났다.

...
const [testState, setTestState] = useState(testResponse.testObj);
...
setTestState([...testState, testResult]); // 에러

[{ ... user: { ... }}, ITestResponse]' 형식은 '(prevState: [{ ... user: { ... }}]) => [...]' 형식에 할당할 수 없습니다.

위와 같은 에러였는데, interface 는 response data 형식에 맞춰 잘 정의했다고 생각했고, 실제로 가져올 때의 포맷도 같았다.

그리고 run 시켰을 때 문제는 없었고 잘 작동했다.

빨간줄이 계속 거슬려서 시간이 좀 걸렸다.

이유는 생각보다 간단했다. 내가 잘몰라서 그랬던 거다..

interface 정의를 할 때, 인터넷으로 수강했던 곳에서는 없었던 경우라 고려하지 않았다.

interface 정의에 하위 객체 배열 또는 신규 객체들이 있을 때는 따로 정의한다음 가져다 쓰는 식으로 구현해야 한다.

가장 작은 타입부터 하나씩 전부 선언해 나가면 된다.

export interface ITestResponse {
  ...,
  testObj: [
    {
      ...
    },
  ],
  userId: number
}

기존에는 위의 방식처럼 정의했다면,

export interface ItestObj {
    ...,
}

export interface ITestResponse {
  ...,
  testObj: ItestObj[],
  userId: number
}

위처럼 객체를 따로 정의한 뒤 그 객체로 배열을 interface 안에서 선언해주는 식으로 구현하면 앞서 나타났던 에러가 모두 사라진다.