React forwardref and various Props in TypeScript

I have a component like this

interface FooProps{
    children: JSX.Element,
    id?: string,
    error?: boolean,
    width?: number,
    ref?: any
}

const Foo = forwardRef(({
                     children,
                     id,
                     error,
                     ref,
                     width,
                 }: FooProps) => {
    return <ul
        id={id}
        ref={ref}
        style={{width: width, backgroundColor: error ? 'red' . 'green'}}>
        {children}
    </ul>
})

export default Foo;

Now, the compiler complains that forwardRef() only accepts two parameters, props and ref.
How would I tell TypeScript that the shape props is the shape of FooProps? This

type Ref = any
forwardRef(<Ref, FooProps>((props, ref)) => {...})

Does not work.

There are several things that need to be addressed in your code:

• when using forwardRef the ref is not part of the props. It is a second argument to the render function. I know this is unintuitive but that's the way it is currently (there is or was some discussion within the react team to change this)
• I recommend to use React.ReactNode whenever you declare children in component props, to actually match anything that could count as valid return value of any render function, including null or string.
• providing types to forwardRef is done before the parentheses: forwardRef<Type-of-ref, Type-of-Props>(...)

An example:

interface PopupAPI {
  open: () => void;
  close: () => void;
}

interface PopupProps {
  children: React.ReactNode;
  onClose?: () => void;
  title?: string;
}

export const Popup= forwardRef<PopupAPI, PopupProps>(({ onClose, children, title }, ref) => {
  // useImperativeHandle(...);
  // ...
});

and one example nearer to your use case:

interface FooProps {
    children: React.ReactNode;
    id?: string;
    error?: boolean;
    width?: number;
}

export const Foo = forwardRef<HTMLElement, FooProps>(({children, id, error, width}, ref) => (
  <ul id={id} ref={ref}>
    {children}
  </ul>
));