[BUG] Type 'GLTFActions' does not satisfy the constraint 'AnimationClip'.

Problem

Using --types, for example:

npx gltfjsx --types model.gltf

TypeScript error message:

Type 'GLTFActions' does not satisfy the constraint 'AnimationClip'.
  Type 'GLTFActions' is missing the following properties from type 'AnimationClip': name, tracks, blendMode, duration, and 8 more.ts(2344)

From GLTFActions as shown:

  const { actions } = useAnimations<GLTFActions>(animations, group);

Redacted versions list:

$ yarn list --depth=0
yarn list v1.22.5
├─ @react-three/drei@7.2.2
├─ @react-three/fiber@7.0.6
├─ @types/react@17.0.14
├─ react@17.0.2
├─ three-stdlib@2.0.8
├─ three@0.124.0

Cause

I think it was caused by this commit appears to have changed the TypeScript generic interface for useAnimations: https://github.com/pmndrs/drei/commit/fe00d576fa39c7059cbba89d441ec996deb5d251 PR: https://github.com/pmndrs/drei/pull/378 Original bug: https://github.com/pmndrs/drei/issues/377

Solution

What worked for me:

- type GLTFActions = Record<ActionName, THREE.AnimationAction>
+ interface GLTFAction extends THREE.AnimationClip {
+  name: ActionName;
+ }

Move GLTFResult below GLTFAction / GLTFActions declaration and apply change:

type GLTFResult = GLTF & {
  nodes: {
// ...
  }
  materials: {
// ...
  }
+  animations: GLTFAction[];
}

  const { nodes, materials, animations } = useGLTF('MODEL_NAME.glb') as GLTFResult
-  const { actions } = useAnimations<GLTFActions>(animations, group);
+  const { actions } = useAnimations(animations, group);

actions['SOME_ACTION'].play();

✅ actions has index signature with ActionName keys instead of `string

✅ useAnimations does not need to explicitly pass the type GLTFActions because GLTFResult already has type narrowed interface for animations, which extends THREE.AnimationClip.

---

Please let me know if you think this is an acceptable work around and then I can try to make a Pull Request to contribute to GLTFJSX. Thank you for this awesome tool!

[shaase]

Hey @Glavin001, I’m new to this, but using this in a Typescript react app. I saw the same warnings you saw, and your fixes worked perfectly for me. Let me know if there’s something else that would be helpful to test. Cheers!

[drcmda]

could you make this a pr?