Challenges 7 exercises

Build an Internationalization Library

For this exercise we're going to be building an internationalization library.

To begin, there is an object named translations with as const applied. We are using a curly bracket syntax inside the values within the object to add dynamic values to them:

Loading exercise


0:00 In this exercise, we're going to be building an internationalization library. We're going to be taking a const object of translations, which, here, we're using as const to define them. We're using some certain syntax inside these values in order to basically add dynamic attributes to them.

0:18 In this case, we have a button called "Click me" It has nothing dynamic inside it. It's just literally "Click me" When we translate this from these translations and we put button in there, then the button text should equal "Click me" We should expect it to be a string.

0:33 Next, when we have this subtitle here, "You have count unread messages," you should be able to pass in translate translations and pass in subtitle. There is the thing that we're translating. Then you should be able to pass in an object with the dynamic properties in there. This is kind of mad.

0:52 Then it should force you to provide the parameters. For instance, in title here, where we have "Hello, name," it should force you to provide a name. It should not let you pass parameters if they're not required.

1:05 What we need to do is we need to somehow, inside this translate function, extract out the generic here for this. We need to understand the type argument that's being passed in, take each example of it and provide a dynamic key there, and take each dynamic property and put them into an argument here.

1:28 Wow. There's a lot to think about here. This is a really challenging one. I've given you a little bit of help in terms of GetParamKeys, GetParamKeysAsUnion. What you can do here is you can say, "type Example = GetParamKeysAsUnion." Then you can pass in, let's say, "Hello." Let's say, "name," for instance.

1:51 Now, this is going to be name. This helps you extract out the types here. If you don't want this, then you can delete it, if you want an extra challenge. I thought this is pretty hardcore anyway. Most of this is focused on the generic signature of the translate function. There's a little bit of help here for you, if you like.

2:13 You're definitely going to need more than one generic. You're going to need to use these to extract out the actual param keys. You're going to need to do a little bit of conditional typing as well, to figure out the shape of these args too. There's a clue there. Good luck.