How to modify built-in types in TypeScript

Question

I am stuck in a scenario where I want to modify a global type. Trying to change the signature of the Element.prototype.animate (want to make it optional) function.

Tried something like this

declare global {
  interface Element {
    animate?: Animatable['animate'];
  }
}

However, it causes the following TS error:

Interface 'Element' incorrectly extends interface 'Animatable'.  
  Types of property 'animate' are incompatible.
    Type '((keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined) => Animation) | undefined' is not assignable to type '(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined) => Animation'.
      Type 'undefined' is not assignable to type '(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined) => Animation'.

How can this be solved without turning off any kind of TS checks?

Answer 1

Will this work for you...

type OptionalAnimate = Omit<Element, "animate"> & {
    animate?: Animatable['animate'];
}