TypeScript error: Types of property 'position' are incompatible.

[kenneho]

Describe the bug & Expected behavior

Consider this sample:

const start = { position: "left", offset: { x: 10, y: 15 } }
return (
  <Xarrow
    start="id1"
    end="id2"
    path="grid"
    showHead={false}
    showTail={false}
    startAnchor={start}
    endAnchor="left"
    tailSize={0}
  />
)

This causes TypeScript to complain:

Type '{ position: string; offset: { x: number; y: number; }; }' is not assignable to type 'anchorType | undefined'.
  Type '{ position: string; offset: { x: number; y: number; }; }' is not assignable to type 'anchorCustomPositionType'.
    Types of property 'position' are incompatible.
      Type 'string' is not assignable to type '"top" | "right" | "bottom" | "left" | "auto" | "middle"'.ts(2322)

Too me this code like quite identical to the samples in the react-xarrows's README file, so either the samples are not valid TypeScript, or more likely I'm doing something wrong but can't spot the error.

[Eliav2]

Position is being inferred as string, just use “as const" so it will become the literal "left". You could also use as const over all the object.

[kenneho]

Thanks, switched to "as const" and now typescript don't complain.