If you already have a subscription, you can sign in.
Enjoy free content straight from your inbox 💌
00:00
Consider the simplified example where we might have color represented as a well-defined string or a couple of RGB values. And this is something that is common in a lot of CSS in JS libraries. Now we want to use these color values in a theme, and we don't really care what keys you use within your theme. They can be any string that you want specific to your design requirements. But we do care about the values. We want all of those values to match one of the color types. An example of such a theme would be this object that has members, primary, secondary, and tertiary. And all of the values should be pointing
00:34
to valid color types. Now, we've intentionally not used the theme annotation for this variable, and the reason is that without that annotation, we get nice type inference out of the box. As an example, we want to be able to access theme, do secondary safely, because type strip is going to infer that secondary is indeed a valid member of the theme object and that it is an array that we can destructure. But if we were to add a type annotation for this theme variable, all of that inference will go away and will only be exactly what that type specifies, which is a record from any string key to any
01:08
of the color values as members. So because of this type annotation, we are losing the inference. That theme indeed has a remember, and this is something that can be structured and therefore we are getting an error over here. But this annotation is useful in finding issues when we are creating the object. For example, it is highlighting the fact that tertiary is pointing to an invalid string and in fact suggesting us to fix that typo. Now, in an ideal world, what we want is to make sure that this variable still conforms to the theme type and we get this error when we try
01:39
to assign an inverted string, but also get the type inference that kicks in when we don't have a type annotation so that we can safely access the members of the created object. And this brings us to the keyword called satisfies, which can be used to make sure that a particular object conforms to a particular type. Here we are saying that this particular object should conform to the type theme. With this in place, we get an error when we try to create an object that doesn't conform. For example, here purple is misspelled, but it doesn't impact any of the type inference, so we still get the inference.
02:11
That theme indeed has a member secondary and it indeed can be de structured into its RJB values. Now, just in case you are curious, even before the satisfies keyword, you could achieve the same effect by creating a temporary variable of the required type and try to assign whatever is inferred to that variable. And if it doesn't conform to the type, you would get an error over here. But of course now with the satisfies keyword, it is much more in line and you don't have unused variables hanging around in your code just to ensure type conformity.