Element.animation 打字稿 - 反应答案

【问题标题】：Element.animation typescript - ReactElement.animation 打字稿 - 反应
【发布时间】：2022-01-12 18:38:40
【问题描述】：

Element.animation 的 typescript 类型是什么？如果我的代码如下所示：

const ref = useRef<HTMLElement>( null );

useEffect( () => {
    const animation: ANIMTATION_TYPE = ref.current.animate( SOME_ANIMATION );
}, []);

return (
    <div ref={ref}>
        Some Div
    </div>
)

ANIMATION_TYPE 应该是什么？我尝试了 AnimationTimeline，但它不包括 .play 或 .pause 函数。

【问题讨论】：

很确定它只是Animation。但是 TS 具有推理功能，您不必显式键入所有内容。我想知道它是如何编译的，因为您正在访问可能为空的引用上的属性。

标签： reactjs typescript animation

【解决方案1】：

动画将是动画类型。在这里你可以找到你需要的 animate 函数。

https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.animatable.html

【讨论】：

【解决方案2】：

如果您将鼠标悬停在 IDE 中对 animate( 的调用上，它应该会告诉您类型。我明白了：

(method) Animatable.animate(
  keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
  options?: number | KeyframeAnimationOptions | undefined
): Animation

所以该方法的返回类型是Animation。

它有一个play() 方法并且可以像你期望的那样工作。

const animation: Animation = document.getElementById('testing123')!.animate([])
animation.play() // works

Playground

你可能不需要。 TS 知道该方法的返回类型，如果您只想使用该范围内的值，则可以这样做：

const animation = document.getElementById('testing123')!.animate([])
animation.play() // works

Playground

【讨论】：