feat(curriculum): expand and reorganize initial typescript lessons (freeCodeCamp#65928)

Co-authored-by: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

Author: 3 people

client/i18n/locales/english/intro.json

@@ -3639,6 +3639,12 @@
           "In these lessons, you will learn what TypeScript is and how to use it."
         ]
       },
+      "lecture-understanding-type-composition": {
+        "title": "Understanding Type Composition",
+        "intro": [
+          "In these lessons, you will learn how to work with union types, interfaces, void types and more."
+        ]
+      },
       "lecture-working-with-generics-and-type-narrowing": {
         "title": "Working with Generics and Type Narrowing",
         "intro": [

curriculum/challenges/english/blocks/lecture-introduction-to-typescript/67d3018062fe6ba92b7d8299.md

@@ -1,226 +1,189 @@
 ---
 id: 67d3018062fe6ba92b7d8299
-title: How Do the Different Types Work in TypeScript?
+title: How Do Primitive Types Work in TypeScript?
 challengeType: 19
-dashedName: how-do-the-different-types-work-in-typescript
+dashedName: how-do-primitive-types-work-in-typescript
 ---
 
 # --description--
 
-You've already seen one in the previous lesson: `string[]`, which represents an array of strings. But how does that actually work?
+In this lesson, you will learn how to work with basic primitive types and how type annotations work for variables.
 
-For the primitive data types `string`, `null`, `undefined`, `number`, `boolean`, and `bigint`, TypeScript offers corresponding type keywords. In our example, we are using these types to annotate our variables:
+For the primitive data types `string`, `null`, `undefined`, `number`, `boolean`, and `bigint`, TypeScript offers corresponding type keywords. 
 
-```js
-let str: string = "Naomi";
-let num: number = 42;
-let bool: boolean = true;
-let nope: null = null;
-let nada: undefined = undefined;
-```
+For this lesson, we will focus on the commonly used primitives and not go into much detail for `bigint`. The `bigint` data type is a numeric data type in JavaScript to represent numbers larger than the standard integer type. 
 
-Now, we have explicitly declared `str` as `string` - which might seem confusing because we assigned it a string value already, but this annotation ensures that we cannot reassign a different value type (like a number) to that variable.
+Let's take a look at each of these primitive types starting with `string`. Here is how you can type a string in TypeScript:
 
-But what about arrays and objects? Well, you've already seen the syntax for an array! You can define an array of specific type with two different syntaxes:
-
-```js
-const arrOne: string[] = ["Naomi"];
-const arrTwo: Array<string> = ["Camperchan"];
+```ts
+let firstName: string = "Angie";
 ```
 
-Fundamentally, these two syntaxes are the same, and the choice between the two is generally a matter of preference.
+Unlike vanilla JavaScript, the variable `firstName` is expecting a `string` type. So if you try to reassign it with a value of a number, then you will get an error like this:
 
-Objects get a bit more complicated. You can define the exact structure of an object:
-
-```js
-const obj: { a: string, b: number } = { a: "Naomi", b: 42 };
+```ts
+let firstName: string = "Angie";
+firstName = 9 // Type 'number' is not assignable to type 'string'.
 ```
 
-This syntax means that property `a` must always be a string, property `b` must always be a number, and you cannot add or remove properties.
-
-But maybe you don't want to restrict the properties? Maybe you want an object with any keys, but the values all need to be strings. There are two ways you can do this:
-
-```js
-const objOne: Record<string, string> = {};
-const objTwo: { [key: string]: string } = {};
-```
-
-Like the array types, these are fundamentally similar. With these object types, you must define both the type of the keys and the type of the values. Keys must always be strings, but you can define custom string types to further restrict those keys.
-
-In addition to these types, TypeScript offers four other helpful types. The first is `any`, which indicates that a value can have any type. This is effectively the Konami Code of TypeScript - it tells the compiler to stop caring about the type of that variable and let you do whatever.
-
-The second is `unknown`, which is generally preferred over `any`. The `unknown` type tells TypeScript that you do care about the type of the value, but you don't actually know what it is. If you then try to perform type-specific actions (like a subtraction operator, or the `slice()` method to perform a specific string operation), TypeScript will expect you to narrow down the type of that value first. You'll learn more about type narrowing in an upcoming lesson.
+The next type we will look at is the `number` type. Here is an example:
 
-The third is `void`. This is a special type that you'll typically only use when defining functions. It's effectively the opposite of `any` - it represents the absence of any type at all. Functions which don't have a return value, such as `console.log()`, have a return type of `void`.
-
-Finally, there is the `never` type. This is probably something you won't use often - it represents a type that will never exist. For example, passing a mock object to a function in your test suite might be a good use of `never` to indicate that such an object would never really be passed to the function.
-
-Expanding on these types, you have access to the `type` keyword. This keyword is like `const`, but instead of declaring a variable you can declare a type:
-
-```js
-type myString = string;
+```ts
+let age: number = 16;
 ```
 
-This might not seem terribly useful on its own, but when coupled with union types it becomes powerful. A union type allows you to combine two or more types into one. Here's an example:
-
-```js
-type stringOrNumber = string | number;
-```
+You can assign integer and floats to the `number` type. But if you were to try and reassign a value that is a `bigint` type, then you will get an error like this:
 
-Our `stringOrNumber` type matches values that are a string and values that are a number. You can then combine your type with other types, like an array:
+```ts
+let age: number = 16;
 
-```js
-const stuff: stringOrNumber[] = ["a", 2, "c", 1000];
+// Type 'bigint' is not assignable to type 'number'.
+age = 123n;
 ```
 
-You can also define more strict types that include only specific values:
+The next type we will look at is the `boolean` type. Here are some examples:
 
-```js
-type bot = "camperchan" | "camperbot" | "naomi";
-type digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+```ts
+let isLoggedIn: boolean = true;
+let isAdmin: boolean = false;
 ```
 
-You could then combine those types to create more specific restrictions on an object:
+The last two types are the `null` and `undefined` types. 
 
-```js
-const artificialIntelligence: Record<bot, digit> = { camperchan: 5 }
-```
+As you recall from earlier JavaScript lessons, `null` represents an intentional absence of a value. `undefined` means a variable has been declared but has not been assigned a value.
 
-Though if you need more control over the structure of an object, chances are you'll reach for our final type: `interface`. Interfaces are effectively classes, but for types. They can implement or extend other interfaces, are specifically object types, and are generally preferred unless you need a specific feature offered by a type declaration.
+You will see examples of how to work with these types later on when you learn about function types and union types.
 
-```js
-interface wowie {
-  zowie: boolean;
-  method: () => void;
-}
-```
+Now that you have seen how type annotations work with variables, the question arises on if you need to always explicitly type out your variables. 
 
-Finally, functions can also be given type signatures. In the previous lesson, you saw how to define the type of a particular parameter:
+If you have a simple type annotation like this, then you might not need to use an explicit type.
 
-```js
-const getRandomValue = (array: string[]) => {
-  return array[Math.floor(Math.random() * array.length)];
-}
+```ts
+let firstName: string = "Angie";
 ```
 
-But you can also define the return type of the function.
+Reason being is because TypeScript will try to automatically infer the types based on its value. So if you write this, TypeScript will understand it is a string.
 
 ```js
-const getRandomValue = (array: string[]): string => {
-  return array[Math.floor(Math.random() * array.length)];
-}
+let firstName = "Angie";
 ```
 
-In this example, we've told TypeScript that the function should return a string. If we try to return anything else, TypeScript will provide a compiler error to let us know.
-
-And that covers the basics of TypeScript's type system. It's pretty complex, and has a lot of moving parts, but it can often help to think of it as mirroring JavaScript's types.
+You should explicitly type your variables when TypeScript cannot clearly infer the type or when you want to enforce a specific type for situations like function parameters or complex objects.
 
 # --questions--
 
 ## --text--
 
-Which of the following is NOT a primitive data type in TypeScript?
+Which of the following is the correct way to explicitly add a type annotation to a number variable?
 
 ## --answers--
 
-`string`
-
-### --feedback--
-
-Primitive data types are the most basic data types available in TypeScript.
+```ts
+let age: number = 16;
+```
 
 ---
 
-`number`
+```ts
+let age<> number = 16;
+```
 
 ### --feedback--
 
-Primitive data types are the most basic data types available in TypeScript.
+Refer back to the beginning of the lesson for number types.
 
 ---
 
-`boolean`
+```ts
+let age>> number = 16;
+```
 
 ### --feedback--
 
-Primitive data types are the most basic data types available in TypeScript.
+Refer back to the beginning of the lesson for number types.
 
 ---
 
-`array`
+```ts
+let age == number = 16;
+```
+
+### --feedback--
+
+Refer back to the beginning of the lesson for number types.
 
 ## --video-solution--
 
-4
+1
 
 ## --text--
 
-What is the purpose of the `unknown` type in TypeScript?
+Which of the following is NOT a primitive data type?
 
 ## --answers--
 
-It allows any type of value to be assigned without type checking.
+`string`
 
 ### --feedback--
 
-Unlike `any`, `unknown` requires type narrowing before specific operations can be performed.
+Refer back to the beginning of the lesson.
 
 ---
 
-It indicates that you don't know the type and need to narrow it before use.
+`boolean`
 
----
+### --feedback--
 
-It represents the absence of any type at all.
+Refer back to the beginning of the lesson.
 
-### --feedback--
+---
 
-Unlike `any`, `unknown` requires type narrowing before specific operations can be performed.
+`object`
 
 ---
 
-It represents a type that will never exist.
+`number`
 
 ### --feedback--
 
-Unlike `any`, `unknown` requires type narrowing before specific operations can be performed.
+Refer back to the beginning of the lesson.
 
 ## --video-solution--
 
-2
+3
 
 ## --text--
 
-Which keyword is used to declare a custom type in TypeScript?
+When should you explicitly type your variables in TypeScript?
 
 ## --answers--
 
-`interface`
+When you are working with `number` and `bigint` types.
 
 ### --feedback--
 
-This keyword is used to define a contract for object shapes, not to declare custom types.
+Refer back to the end of the lesson.
 
 ---
 
-`type`
+When you are working with `null` and `undefined` types.
 
----
+### --feedback--
 
-`custom`
+Refer back to the end of the lesson.
 
-### --feedback--
+---
 
-This is not a valid keyword in TypeScript.
+When TypeScript cannot clearly infer the type.
 
 ---
 
-`define`
+You should always have explicit types in your code.
 
 ### --feedback--
 
-This is not a valid keyword in TypeScript.
+Refer back to the end of the lesson.
 
 ## --video-solution--
 
-2
+3