Loading
Build a TypeScript Project From Scratch Tutorial (19 exercises)
Lesson

Refactor Our Code

In this lesson, you will refactor your code to be less repetitive and also use a TypeScript utility type called Partial.

Resources

The following resources provide more information for this lesson:

Transcript

[0:00] Very soon, we're going to be publishing our library to npm. That means we need to make sure we don't expose everything to the end user, only the things that we expect them to use.
[0:09] Therefore, we're going to move some of the code outside of this index.ts file into a new file called sourcelib.ts. We're also going to move formatted date into this file as well, and we're actually going to leave this interface in here but export it in case that end users want to extend that interface or merge it with their own version of Streak depending on how they're using streakCounter.

[0:34] I've also gone ahead and created a const called STREAK_KEY set equal to the string literal streak, and added some docs above it. This is used whenever we're saving the streak to local storage. I've replaced that as well in both index.ts and our test, anywhere that we call localStorage.setItem. Let's delete any rogue console.logs.

[0:53] The other thing we'll do is refactor the logic in streakCounter based on the state we are going to switch. We'll initialize updatedStreak here. You'll notice that I am initializing this object here and I'm passing in these curly brackets along with the type to say, hey, the type for this is actually going to be streak, but I'm going to start as an empty object.

[1:14] Then in each case, all we're going to do is update the streak if needed, update it in local storage as well, and then for none or defaults, we will leave as is. Then at the end of all of that, we will return the streak.

[1:26] The last major refactor that we 're going to do is add a helper function called buildStreak to lib.ts. This has two parameters, date and then overrideDefaults, which is optional.

[1:38] Here, you'll see we're using something called Partial. This is a utility type provided by TypeScript out of the box, so it's generic. Here, I'm passing in the type streak. What I'm saying is this is going to be a Partial streak. It essentially makes all of the properties in the type that's passed in optional.

[1:54] This is handy when you're using a function like a builder and you don't want to make it require to pass all of the properties, but you want to be able to override some of them.

[2:02] We'll create a defaultStreak with all the default values, and then we'll create a new object where we'll spread the defaultStreak, and then we'll spread the overrideDefaults in case the caller wants to override any of the streak values.

[2:15] You can see now that really cleans this up whenever we need to build a streak, because we just get the default values, and then when we need to override something like in the increment state, we pass in that second argument, and we can override that.

[2:26] Finally, we'll run pnpm test to make sure that we didn't break anything. There's a couple of things we need to do to fix these tests. We need to update that to make sure that we're using the same variable, this updatedStreak. We need to also break at the end of each case, and there we go.

[2:46] Now after the refactor, all of our tests are passing.