Annotations and Assertions 12 exercises
Problem

Comparing as, satisfies, and Variable Annotations in TypeScript

In this exercise, we are going to examine three different types of setups in TypeScript: variable annotations, as, and satisfies.

The first scenario consists of declaring a const obj as an empty object and then applying the keys a and b to it. Using as Record<string, number>, we're ex

Loading exercise

Transcript

00:00 In this exercise, we're going to compare satisfies and as and variable annotations. We have three setups here. We have this first one where we're saying const obj is an empty object and we're saying as record string number, and we're then basically applying a and b to it

00:18 and we're expecting the type of object or a to be a number. OK, cool. Then if we go into menu config here, this is a record containing string as the keys and then it's got either an object with label and link on it or an object with label on it and a bunch of children which are label and link as well.

00:38 And so then we're expecting that when we declare home and services down here that when we then go to access this config object that we can actually access the members and we're not getting these weird object is possibly undefined errors. And then at the bottom here we have

00:54 element.document.getElementById app satisfies HTML element. And we're getting some weird errors here too. So what I'd like you to do is rearrange the annotations here so that at the end one of them should use as, one of them should use a variable annotation, one of them should use satisfies.

01:12 And see if you can get this working by rearranging the annotations and getting them in the right order. Hopefully you've got a little bit of an intuition now for when you should use as, when you should use variable annotations, when you should use satisfies. And I will see you in a minute. Good luck.