feat(curriculum): Add type safe user profile to typescript module (freeCodeCamp#66005)

Co-authored-by: Sem Bauke <sem@freecodecamp.org>
Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com>
Co-authored-by: Kolade <chrisjay967@gmail.com>

Author: 4 people

client/i18n/locales/english/intro.json

@@ -6181,6 +6181,12 @@
           "In these lessons, you will learn what TypeScript is and how to use it."
         ]
       },
+      "workshop-type-safe-user-profile": {
+        "title": "Build a Type Safe User Profile",
+        "intro": [
+          "In this workshop, you will practice working with type annotations, array types, object types and more by building out a user profile."
+        ]
+      },
       "lecture-understanding-type-composition": {
         "title": "Understanding Type Composition",
         "intro": [

curriculum/challenges/english/blocks/workshop-type-safe-user-profile/699b4e284291adcfcb90df47.md

@@ -0,0 +1,78 @@
+---
+id: 699b4e284291adcfcb90df47
+title: Step 1
+challengeType: 1
+dashedName: step-1
+---
+
+# --description--
+
+In this workshop, you will practice working with primitive types as well as object and array types by building out a type safe user profile. 
+
+Start by creating a variable called `profile` and assign it an object. Your object should have these three properties and values:
+
+```md
+username: "codeLearner",
+age: 25,
+isLoggedIn: false,
+```
+
+# --hints--
+
+You should have a variable called `profile`.
+
+```js
+assert.exists(profile);
+```
+
+Your `profile` variable should be an object.
+
+```js
+assert.isObject(profile);
+```
+
+You should have a `username` property in your `profile` object.
+
+```js
+assert.property(profile, "username");
+```
+
+Your `username` property should have a value of `"codeLearner"`.
+
+```js
+assert.propertyVal(profile, "username", "codeLearner");
+```
+
+Your `profile` object should have an `age` property.
+
+```js
+assert.property(profile, "age");
+```
+
+Your `age` property should have a value of `25`.
+
+```js
+assert.propertyVal(profile, "age", 25);
+```
+
+Your `profile` object should have an `isLoggedIn` property.
+
+```js
+assert.property(profile, "isLoggedIn");
+```
+
+Your `isLoggedIn` property should have a value of `false`. 
+
+```js
+assert.propertyVal(profile, "isLoggedIn", false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```ts
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/blocks/workshop-type-safe-user-profile/699b5370a43e299b4673bcaa.md

@@ -0,0 +1,43 @@
+---
+id: 699b5370a43e299b4673bcaa
+title: Step 2
+challengeType: 1
+dashedName: step-2
+---
+
+# --description--
+
+It would be helpful to see the `profile` object properties in the console as you build it out.
+
+Add a `console.log` that logs `profile` to the console.
+
+# --before-each--
+
+```js
+const spy = __helpers.spyOn(console, 'log');
+const getLogs = () => spy.calls.map(call => call?.[0]);
+```
+
+# --hints--
+
+You should log `profile` to the console.
+
+```js
+assert.equal(getLogs()[0], profile);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```ts
+const profile = {
+  username: "codeLearner",
+  age: 25,
+  isLoggedIn: false,
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/blocks/workshop-type-safe-user-profile/699b58c5abecfda9dc81c4ec.md

@@ -0,0 +1,43 @@
+---
+id: 699b58c5abecfda9dc81c4ec
+title: Step 3
+challengeType: 1
+dashedName: step-3
+---
+
+# --description--
+
+Right now the `profile` object only has three properties. But it would be nice to have a few more. 
+
+Add a property called `mood` to the `profile` object. Its value should be `null`.
+
+# --hints--
+
+Your `profile` object should have a `mood` property.
+
+```js
+assert.property(profile, "mood");
+```
+
+Your `mood` property should have a value of `null`.
+
+```js
+assert.isNull(profile?.mood);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```ts
+--fcc-editable-region--
+const profile = {
+  username: "codeLearner",
+  age: 25,
+  isLoggedIn: false,
+
+}
+--fcc-editable-region--
+
+console.log(profile);
+```

curriculum/challenges/english/blocks/workshop-type-safe-user-profile/699b5b7cb68b6d35afca61b7.md

@@ -0,0 +1,74 @@
+---
+id: 699b5b7cb68b6d35afca61b7
+title: Step 4
+challengeType: 1
+dashedName: step-4
+---
+
+# --description--
+
+While it is possible to continue to add properties like this to the `profile` object, it would be nice to restrict the types of properties that should be allowed. It would be better to define the shape of the `profile` object beforehand.
+
+In prior lessons, you learned how to work with object types like this:
+
+```ts
+const composer: { 
+  name: string; 
+  instrument: string; 
+  isActive: boolean; 
+} = {
+  name: "Ludwig van Beethoven",
+  instrument: "Piano",
+  isActive: false
+};
+```
+
+In this example, `composer` is an object with an inline object type. This object has three required properties of `name`, `instrument` and `isActive`. The first two properties must be of type `string` and `isActive` must be of type `boolean`.
+
+Update your existing `profile` object to include an inline object type. `username` should be typed to a `string`, `age` should be typed to a `number` and `isLoggedIn` should be typed to a `boolean`. 
+
+# --hints--
+
+Your `profile` object should have an inline object type with a `username` property set to `string`.
+
+```js
+const explorer = await __helpers.Explorer(code);
+const { profile } = explorer.variables;
+const prop = { name: "username", type: "string" };
+assert.isTrue(profile.annotation.hasTypeProps(prop));
+```
+
+Your `profile` object should have an inline object type with an `age` property set to `number`.
+
+```js
+const explorer = await __helpers.Explorer(code);
+const { profile } = explorer.variables;
+const prop = { name: "age", type: "number" };
+assert.isTrue(profile.annotation.hasTypeProps(prop));
+```
+
+Your `profile` object should have an inline object type with an `isLoggedIn` property set to `boolean`.
+
+```js
+const explorer = await __helpers.Explorer(code);
+const { profile } = explorer.variables;
+const prop = { name: "isLoggedIn", type: "boolean" };
+assert.isTrue(profile.annotation.hasTypeProps(prop));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```ts
+--fcc-editable-region--
+const profile = {
+  username: "codeLearner",
+  age: 25,
+  isLoggedIn: false,
+  mood: null
+}
+--fcc-editable-region--
+
+console.log(profile);
+```

curriculum/challenges/english/blocks/workshop-type-safe-user-profile/699b61ca8c9cb9bc1968364e.md

@@ -0,0 +1,47 @@
+---
+id: 699b61ca8c9cb9bc1968364e
+title: Step 5
+challengeType: 1
+dashedName: step-5
+---
+
+# --description--
+
+If you open up the console, you should see the following error message:
+
+```md
+Object literal may only specify known properties, and 'mood' does not exist in type '{ username: string; age: number; isLoggedIn: boolean; }'.
+```
+
+In vanilla JavaScript, you were allowed to add whatever properties and values you liked to the `profile` object. But in TypeScript, the compiler checks that the object only has the properties you defined (`username`, `age`, and `isLoggedIn` in this case). Since `mood` wasn't included in the type, TypeScript treats it as an invalid property and throws an error.
+
+Remove the `mood: null` from your code.
+
+# --hints--
+
+You should no longer have `mood: null` in your code.
+
+```js
+assert.isUndefined(profile.mood);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```ts
+const profile: {
+  username: string;
+  age: number;
+  isLoggedIn: boolean;
+} = {
+  username: "codeLearner",
+  age: 25,
+  isLoggedIn: false
+--fcc-editable-region--
+  mood: null
+--fcc-editable-region--
+};
+
+console.log(profile);
+```

curriculum/challenges/english/blocks/workshop-type-safe-user-profile/699b62c99ec8c63470313365.md

@@ -0,0 +1,44 @@
+---
+id: 699b62c99ec8c63470313365
+title: Step 6
+challengeType: 1
+dashedName: step-6
+---
+
+# --description--
+
+Now it is time to add another property to your `profile` object. 
+
+Start by updating the inline object type to include a `bio` property with a type set to `string`.
+
+# --hints--
+
+You should update the inline object type to include a `bio` property set to `string`.
+
+```js
+const explorer = await __helpers.Explorer(code);
+const { profile } = explorer.variables;
+const prop = { name: "bio", type: "string" };
+assert.isTrue(profile.annotation.hasTypeProps(prop));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```ts
+const profile: {
+--fcc-editable-region--
+  username: string;
+  age: number;
+  isLoggedIn: boolean;
+  
+--fcc-editable-region--
+} = {
+  username: "codeLearner",
+  age: 25,
+  isLoggedIn: false
+};
+
+console.log(profile);
+```