TS error when passing myDecorator function as decorate prop to React Slate

Question

I am getting the following TS error:

(property) decorate?: ((entry: NodeEntry<Node>) => BaseRange[]) | undefined
Type '([node, path]: [node: any, path: any]) => { anchor: { path: any; offset: string | number; }; focus: { path: any; offset: string; }; decoration: string; }[]' is not assignable to type '(entry: NodeEntry<Node>) => BaseRange[]'.
  Type '{ anchor: { path: any; offset: string | number; }; focus: { path: any; offset: string; }; decoration: string; }[]' is not assignable to type 'BaseRange[]'.
    Type '{ anchor: { path: any; offset: string | number; }; focus: { path: any; offset: string; }; decoration: string; }' is not assignable to type 'BaseRange'.
      The types of 'anchor.offset' are incompatible between these types.
        Type 'string | number' is not assignable to type 'number'.
          Type 'string' is not assignable to type 'number'.ts(2322)
editable.d.ts(34, 5): The expected type comes from property 'decorate' which is declared here on type 'IntrinsicAttributes & { decorate?: ((entry: NodeEntry<Node>) => BaseRange[]) | undefined; onDOMBeforeInput?: ((event: InputEvent) => void) | undefined; ... 8 more ...; as?: ElementType<...> | undefined; } & TextareaHTMLAttributes<...> & MUIStyledCommonProps<...> & { ...; }'

This is happening on the decorate prop of my Editable component:

 <Editable
   decorate={myDecorator}

Here is a link to a codesandbox where the error is recreated on line 271:

https://codesandbox.io/s/react-typescript-forked-mwe14t?file=/src/App.tsx

Answer 1

index value is either string | number and offset accepts onlynumber which is why it is complaining. I needed to cast the index to number (Number(index) or +index) and then use it

const numberedIdx = Number(index);

const offsetVal = numberedIdx + urlLength;

return {
  anchor: {
    path,
    offset: numberedIdx,
  },
  focus: {
    path,
    offset: offsetVal,
  },
  decoration: "link",
};