Merge pull request #218 from developedbysaad/feat/sample-video-scripts

Modified content in Level 2 for video script

typescript-fundamentals/executing-ts-code/README.md

@@ -1,79 +1,89 @@
-In this level, we will learn about executing and running TypeScript code. If you're new to TypeScript, you might be wondering how to take the code that you've written and actually run it in a web browser or other environment. Let us go over the steps you need to follow to do just that.
+## INTRODUCTION
 
-Before we begin, it's important to note that TypeScript code cannot be directly run in a web browser or other environment. This is because TypeScript is a compiled language, which means that it needs to be transformed into plain JavaScript before it can be executed. However, the TypeScript compiler makes this process easy and straightforward.
+Hello! In this lesson, we'll tackle a fundamental aspect of TypeScript: how to execute and run TypeScript code.
 
-Here are the steps you'll need to follow to execute and run your TypeScript code:
+If you're new to TypeScript, you might be wondering how to take the code you've written and actually run it in a web browser or another environment. Let's go over the steps you need to follow to do just that.
 
-- Install the TypeScript compiler: First, you'll need to install the TypeScript compiler on your machine. You can do this by running the following command:
+> Action: Display the text "TypeScript Compilation" on the screen.
 
-```
-npm install -g typescript
-```
+First, it's important to understand that TypeScript code cannot be directly run in a web browser or other environments. TypeScript is a compiled language, which means it needs to be transformed into plain JavaScript before it can be executed. But don't worry, TypeScript makes this process easy.
 
-- Go to your `hello-react` project and launch VS Code using `code .`. Create a new file called `index.ts` here and enter the following piece of code:
+## STEP 1: Install TypeScript Compiler
 
-```
-console.log("This is a typescript file!!!");
-```
+> Action: Display the command to install the TypeScript compiler.
 
-- Setup typescript compiler configuration: We need to generate the default configuration file for TypeScript by running following command:
+The first step is to install the TypeScript compiler on your machine. You can do this by running the following command in the terminal:
 
-```
-tsc --init
+```shell
+npm install -g typescript
 ```
 
-- This will generate a `tsconfig.json` file in the `hello-react` directory.
+This installs TypeScript globally on your system.
 
-- Since we will be using `node` to run the compiled TypeScript file, we will have to install type definitions for Node.js by running the following command:
+## STEP 2: Create a TypeScript File
 
-```
-npm install -D @types/node
-```
+> Action: Show the creation of an `index.tsx` file and add code.
 
-- Compile your TypeScript code: Once you have the TypeScript compiler installed, you can use it to compile your TypeScript code into JavaScript. To do this, navigate to the directory containing your TypeScript files and run the following command:
+Next, create a new file in your working directory, i.e., `hello-react` folder and name it `index.ts`. Inside this file, you can write your TypeScript code. For example:
 
-```
-tsc index.ts
+```typescript
+console.log("This is a TypeScript file!!!");
 ```
 
-- This will compile your `index.ts` file into a corresponding `index.js` file. You can also compile multiple TypeScript files at once by specifying them as additional arguments, like this:
+## STEP 3: Compile TypeScript Code
 
+> Action: Demonstrate how to compile TypeScript code.
+
+Once you have the TypeScript compiler installed, you can use it to compile your TypeScript code into JavaScript. To do this, navigate to `hello-react` directory that contains the file you just created and run the following command:
+
+```shell
+tsc index.tsx
 ```
-tsc index.ts script.ts
-```
 
-- Run the generated JavaScript code: Once your TypeScript code has been compiled into JavaScript, you can run it just like you would any other JavaScript code. If you're running it in a web browser, you can do this by including the generated `.js` file in your HTML file like so:
+This command will compile your `index.tsx` file into a corresponding `index.js` file. You can also compile multiple TypeScript files at once by specifying them as additional arguments.
+
+## STEP 4: Run JavaScript Code
+
+> Action: Show how to run the generated JavaScript code in a web browser.
+
+Now that your TypeScript code is compiled into JavaScript, you can run it just like any other JavaScript code. If you're running it in a web browser, include the generated `.js` file in your HTML file like this:
 
 ```html
 <script src="index.js"></script>
 ```
 
-- Alternatively, you can run the generated JavaScript code using `Node.js` by running the following command:
+Alternatively, if you want to run the generated JavaScript code using Node.js, you can use the following command:
 
-```
+```shell
 node index.js
 ```
 
-The above might not be the ideal way we run our code, as in most scenarios we use the node bundled with other packages to run our application code written in TypeScript.
+## ALTERNATIVE: Using ts-node
 
-Alternatively, we can use an external npm package to compile and run our TypeScript code in a single command.
+> Action: Explain an alternative method using `ts-node`.
 
-- Install and use the `ts-node` package using the following command:
+While the previous steps work, in most scenarios, we use Node.js bundled with other packages to run our TypeScript applications.
 
-```
+Alternatively, you can use an external npm package called `ts-node` to compile and run your TypeScript code in a single command.
+
+- Install and use the `ts-node` package by running:
+
+```shell
 npm install -g ts-node
 ```
 
-- Once done, you can directly execute your TypeScript code by running the below command in the terminal
+- Once installed, you can directly execute your TypeScript code by running:
 
+```shell
+ts-node index.ts
 ```
-ts-node-esm index.ts
-```
 
-> Note: We are using `ts-node-esm` here because, we scaffolded the application using vite and we have an entry `type: module` in `package.json`
+This simplifies the process of running TypeScript code.
+
+## CONCLUSION
 
-You can learn more about `ts-node` usage [here](https://www.npmjs.com/package/ts-node)
+> Action: Transition to the closing shot.
 
-You should now be able to execute and run your TypeScript code in your chosen environment.
+That's it for this lesson on executing and running TypeScript code! Now you know how to take your TypeScript code and make it run in your chosen environment.
 
-Let us learn more about Typescript in future lessons. See you at the next one.
+In future lessons, we'll delve deeper into TypeScript. See you in the next one, and happy coding!

typescript-fundamentals/type-system/README.md

@@ -1,62 +1,107 @@
-In this lesson, we will learn about the **type system** in TypeScript. Let us go over the basics of the TypeScript type system and how it can help you write more reliable and maintainable code.
+## INTRODUCTION
 
-> You can use the `index.ts` file you have created to practice the concepts in this and subsequent lessons.
+Hello! In this lesson, we will dive deep into the TypeScript type system. We'll explore the basics and understand how it can make your code more reliable and maintainable.
 
-What is a type system? Simply put, a type system is a set of rules that a programming language uses to ensure that data is used correctly and consistently throughout the codebase.
+Let's start by answering a fundamental question:
 
-In TypeScript, the type system helps you catch errors by validating, that variables and functions are used in a way that is consistent with their defined types.
+## WHAT IS A TYPE SYSTEM?
 
-There are several built-in types in TypeScript, including:
+> Action: Display the text "What is a type system?" on the screen.
 
-- `string`: A sequence of characters, such as "Hello, world!"
-- `number`: A numeric value, such as 42 or 3.14
-- `boolean`: A value that is either true or false
-- `void`: Used to represent the absence of a return value for a function
-- `null`: Used to represent the absence of a value
-- `undefined`: Used to represent a value that has not been assigned a defined value
+A type system is a set of rules that a programming language uses to ensure that data is used correctly and consistently throughout your codebase. In TypeScript, this type system helps you catch errors by validating that variables and functions are used in a way that matches their defined types.
 
-In addition to these built-in types, you can also define your own types in TypeScript using type aliases and interfaces.
+Now, let's take a closer look at the built-in types in TypeScript.
 
-Type aliases allow you to create a new name for an existing type. For example, you could create a type alias for a string array like so:
+## BUILT-IN TYPES
 
-```js
+> Action: Display a list of built-in types on the screen.
+
+In TypeScript, we have several built-in types, including:
+
+- `string`: This represents a sequence of characters, like "Hello, world!"
+- `number`: It's for numeric values, such as 42 or 3.14.
+- `boolean`: This type can only be `true` or `false`.
+- `void`: Used when a function doesn't return any value.
+- `null`: Represents the absence of a value.
+- `undefined`: Used when a value hasn't been assigned yet.
+
+Now, let's explore how you can create your own types in TypeScript.
+
+## USER-DEFINED TYPES
+
+> Action: Display the code example for creating a type alias and an interface.
+
+In TypeScript, you can define your own types using type aliases and interfaces.
+
+- **Type Aliases**: These allow you to create a new name for an existing type. For example, you can create a `StringArray` type for an array of strings.
+
+```typescript
 type StringArray = string[];
 ```
 
-You can then use the `StringArray` type whenever you want to refer to an array of strings.
-
-Interfaces, on the other hand, allow you to define a structure for an object type. For example, you could define an interface for a user object like this:
+- **Interfaces**: They help you define a structure for an object type. Here's an example of an `User` interface:
 
-```js
+```typescript
 interface User {
   name: string;
-  id: number;
+  age: number;
   isAdmin: boolean;
 }
 ```
 
-You can then use the `User` interface to ensure that objects have the correct structure when they are created or passed around in your code.
+These user-defined types can ensure that objects in your code have the correct structure.
+
+## BENEFITS OF THE TYPE SYSTEM
+
+> Action: Display the benefits of using the TypeScript type system using example code.
+
+Now that you know about types, let's talk about the benefits of using the type system.
 
-Now that you know the basic types and how to define your own types in TypeScript, let's look at how you can use the type system to improve your code.
+## Error Detection
 
-One of the main benefits of using the type system is that it can help you catch errors before you even run your code.
+> Action: Display "Error Catching" on screen and define it.
 
-For example, if you try to assign a string to a variable that is expected to be a number, the TypeScript compiler will throw an error, alerting you to the problem. This can save you a lot of time and effort in debugging your code, especially as your codebase grows in size and complexity.
+- **Error Catching**: TypeScript catches errors during compilation, before you actually run your code. If you try to assign a string to a variable expecting a number, TypeScript will throw an error. This helps you find and fix issues early on, saving time and effort in the debugging process.
 
-In your `index.ts` add the interface you created for the User. Try creating a new User using the following code:
+Let's see how TypeScript's type system helps catch errors before they cause problems:
 
-```js
-let newUser: User = {
-  name: "Jane",
-  id: "1",
-  isAdmin: false,
-};
+> Action: Paste the following code snippet in `hello-react/index.tsx` file
+
+```typescript
+// Define a variable expecting a number
+let myNumber: number;
+
+// Try to assign a string to the number variable
+// TypeScript will catch this error during compilation
+myNumber = "Hello, World!";
+
+// The following line won't be reached due to the error above,
+// but it's included for completeness
+console.log(myNumber);
 ```
 
-The TS compiler will throw an error on your editor with the message `Type 'string' is not assignable to type 'number'.ts(2322)` as we are trying to set the value of `id` as a string.
+we first declare a variable `myNumber` and initialize it with the number `5`. However, we then attempt to assign a string `"Hello, World!"` to `myNumber`. This is where TypeScript's type system comes into play.
+When you try to run this code, TypeScript will give you an error message indicating that you are trying to assign a value of the wrong type to `myNumber`. Here's the error message and output:
+
+> Action: Run the command `tsc index.tsx` in terminal and show the output.
+
+```typescript
+index.tsx:6:1 - error TS2322: Type 'string' is not assignable to type 'number'.
+
+6 myNumber = "Hello, World!"; // Error: Type 'string' is not assignable to type 'number'
+  ~~~~~~~~
+
+Found 1 error in index.tsx:6
+```
+
+Continuing with the discussion of TypeScript benefits, let's explore the next advantage:
+
+> Action: Display "Code Readability" on screen and define it.
+
+- **Code Readability**: By explicitly defining types, your code becomes more readable and understandable. Other developers can quickly grasp what data a function expects or what type of value a variable holds. This helps with code maintenance and modification.
 
-In addition to catching errors, the type system can also make your code easier to read and understand. By explicitly defining the types of your variables and functions, you can make it clear to other developers what kind of data a function is expecting or what type of value a variable is holding. This can make it easier to maintain and modify your code over time.
+In summary, TypeScript's type system is a powerful tool for writing reliable and maintainable code. By using built-in types and defining your own types, you can catch errors early and improve code readability.
 
-In summary, the TypeScript type system is a powerful tool that can help you write more reliable and maintainable code. By using the built-in types and defining your own types using type aliases and interfaces, you can catch errors and make your code easier to understand.
+> Action: Transition to the closing shot.
 
-See you in the next lesson.
+That's it for this lesson! We'll see you in the next one as we dive even deeper into TypeScript. Happy coding!