External Libraries 9 exercises

Override External Library Types

For this exercise we have an animatingState that calls getAnimatingState from a fake-animation-lib:

const animatingState = getAnimatingState();

Here's what getAnimatingState from the fake-animation-lib looks like:

export const getAnimatingState = (): str

Loading exercise


0:00 This is a really interesting exercise. We have an AnimatingState here, that is currently just typed as string. We want it to be before-animation, or animating, or after-animation. We want it to represent these three literals.

0:16 Why is that? If you look at the actual code for our library...this is actually coming from a fake animation library that I've built into the setup of this tutorial. We've got getAnimatingState here and we can actually see the code here. We can see that it's got an explicit return type of string on it.

0:34 Actually, we've got if Math.random() then return before-animation, or animating, or after-animation. It turns out that the explicit type annotation here is actually making the inference that we get worse. Ideally, it would be before-animation, or animating, or after-animation.

0:49 Assuming that you can't change this code...that's part of this problem. Don't change this code. Imagine this is coming from an external library. We actually want to override the types that are being exported from this external library, so that getAnimatingState actually returns what we want it to. In this case, we're going to have to override those types.

1:09 How do we do that? I'll give you a clue. You're going to need a declaration file. The first d.ts file I think that's been in TotalTypeScript. You'll need to create a new file which uses some module definitions in order to basically override this fake animation library and provide some new types on top of it.

1:30 I'll provide you some section resources here on how to do that and that's all the information I'm going to give you. Good luck.