[ 타입스크립트(TypeScript) ] Incorrect (variable) is specified more than once, so this usage will be overwritten 에러 해결하기

📍 Incorrect (variable) is specified more than once, so this usage will be overwritten 에러 해결하기

typescript로 작업하다 다음과 같은 오류를 마주했다.

 

 

오류가 발생한 원인은 getListHref를 props로 내려준 위치가 잘못되었기 때문인데, 바로 {...props} 앞에 선언했기 때문이다. 하단의 AS-IS코드를 살펴보면 {...props} 앞에 getListHref를 선언했는데, 이것은 의미가 없다. 왜냐하면 ...props로 내려오는 getListHref을 최종적으로 적용하기 때문에 처음에 선언한 getListHref를 항상 override하기 때문이다.이럴 때는 TO-BE 코드처럼 내가 적용하고 싶은 getListHref를 {...props} 뒤에 선언해주면 오류를 해결할 수 있다.

// AS-IS
export function createHeader({ width }: { width: SemanticWIDTHS }) {
  return function Header(props: ComponentProps<typeof HeaderBase>) {
    const getListHref = (queries: string) => `?${queries}`

    return <HeaderBase getListHref={getListHref} {...props} />  // 'getListHref' is specified more than once, so this usage will be overwritten.
  }
}

// TO-BE
export function createHeader({ width }: { width: SemanticWIDTHS }) {
  return function Header(props: ComponentProps<typeof HeaderBase>) {
    const getListHref = (queries: string) => `?${queries}`

    return <HeaderBase {...props} getListHref={getListHref} />
  }
}

728x90

잘 이해가 되지 않는다면 다음 코드를 보자. Bad에 선언한 otherInfo.age는 적용되지 않는다. 왜냐하면 ...myInfo의 property가 최종적으로 덮어씌우기 때문이다. 그래서, age를 포함한 name과 address 모두 ...myInfo로 설정이 된다. 반대로 Good은 어떨까? age와 name 모두 otherInfo에서 선언한 값이 적용된다. 왜냐하면 ...myInfo가 제일 먼저 선언되었기 때문에 결과적으로 마지막에 선언한 age와 name이 적용된다.

const myInfo = {
  age: 28,
  name: 'ted',
  address: 'Hwaseong',
}

// Bad
const otherInfo = {
  age: 25, // This spread always overwrites this property.
  ...myInfo,
}

👉🏾 otherInfo :>>  { age: 28, name: 'ted', address: 'Hwaseong' } 

// Good
const otherInfo = {
  ...myInfo,
  age: 25,
  name: 'jenny',
}

👉🏾 otherInfo :>>  { age: 25, name: 'jenny', address: 'Hwaseong' }

 

Reference

1. microsoft / Typescript #38525
2. MDN - Spread_syntax