styled-componentで作ったアニメーションのnameを取得する 🎥

結論

const blink = keyframes`
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1
  }

  100% {
    opacity: 0;
  }
`;

と定義したアニメーション（blink）であれば、

blink.getName();

でアニメーション名を取得できます。

ことの発端

onAnimationEndを使って、アニメーションの終了を検知しようとした際、アニメーション名で該当のアニメーションか確認するために、

export default function IndexPage() {
  function handelAnimationEnd(evt) {
    if (evt.animationName === blink.name) {
      // ここに終了の処理を書く
    }
  }

  return <Page onAnimationEnd={ handelAnimationEnd } />
}

こんな感じのコードを書いたんですが、TypeScriptに、

Property 'name' does not exist on type 'Keyframes'.

というエラーを吐かれました。

あれ？と思い、

console.dir(blink);

と、アニメーションのプロパティを確認すると、

{
  id: "keyframes-hoge"
  inject: ƒ (e,t)
  name: "fuga"
  rules: "0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}"
  toString: ƒ ()
  __proto__: Object
}

という感じで、nameは存在してます。

Property 'name' does not exist on type 'Keyframes'.

が嘘じゃないか！と思いながら、Keyframesの型を確認してみると、

export interface Keyframes {
    getName(): string;
}

となってます。

そうなんです。nameに直接アクセスすんじゃなくて、メソッドを使って取得する設計になってたんですね。
確かにこちらの方が安全です。（書き換えできないので）

ドキュメントやらなんやらをいろいろ調べてたんですが、型定義ファイルを確認するのが一番手っ取り早いということに気付いた今日この頃でした。