ts(2345) Argument of type '{ hex: string; }' is not assignable to parameter of type 'Point'. Type '{ hex: string; }' is missing the following properties from type 'Point': x, yts(2345)

이와 같은 에러도 타입스크립트를 처음 접했을때 충분히 만날수 있는 에러이다.

아니 실무에서도 복잡한 타입을 다룰때는 만날수도 있다.

 

타입스크립트의 공식문서에 있는 예제를 가져와보겠다.

// @errors: 2345
interface Point {
  x: number;
  y: number;
}

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
// ---cut---
const point = { x: 12, y: 26 };
printPoint(point); // prunts "12, 26"

const point3 = { x: 12, y: 26, z: 89 };
printPoint(point3); // prints "12, 26"

const rect = { x: 33, y: 3, width: 30, height: 80 };
printPoint(rect); // prints "33, 3"

const color = { hex: "#187ABF" };

printPoint(color);

printPoint함수는 Point타입의 인자를 하나 받는다.

Point타입은 number타입인 x와 y가 포함된 객체 인터페이스이다.

 

point의 경우 printPoint함수에서 받는 인자의 타입과 완벽하게 일치한다.

따라서 출력값 또한 정상적으로 출력된다.

 

point3와 rect의 경우 인자의 타입과 조금 다른 형태이지만 Point인터페이스에서 필요한 x와 y는 가지고 있기때문에 정상적으로 값을 출력하는 것을 볼 수 있다.

 

하지만 color의 경우 Point와 전혀 다를 구조를 가지고 있기때문에 타입스크립트는 타입이 맞지않아 에러를 발생시킨다.