From 2e76f14a4ff2596427cdb2b62e874417050df799 Mon Sep 17 00:00:00 2001 From: Mohd Saad Date: Fri, 15 Sep 2023 12:35:02 +0530 Subject: [PATCH 1/4] Modified content in Level 2 for video script --- .../executing-ts-code/README.md | 81 ++++++++++++------- typescript-fundamentals/type-system/README.md | 67 +++++++++------ 2 files changed, 97 insertions(+), 51 deletions(-) diff --git a/typescript-fundamentals/executing-ts-code/README.md b/typescript-fundamentals/executing-ts-code/README.md index 2061deda..e962ff3e 100644 --- a/typescript-fundamentals/executing-ts-code/README.md +++ b/typescript-fundamentals/executing-ts-code/README.md @@ -1,64 +1,91 @@ -# Text +**[INTRODUCTION]** -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. +Hello! In this level, we'll tackle a fundamental aspect of TypeScript: how to execute and run TypeScript code. -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. +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. -Here are the steps you'll need to follow to execute and run your TypeScript code: +**[TYPESCRIPT COMPILATION]** -- 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. -``` +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. + +**[STEP 1: Install TypeScript Compiler]** + +> Action: Display the command to install the TypeScript compiler. + +The first step is to install the TypeScript compiler on your machine. You can do this by running the following command: + +```shell npm install -g typescript ``` -- Create a new file called `index.ts` in your working directory and enter the following piece of code: +This installs TypeScript globally on your system. -``` -console.log("This is a typescript file!!!"); -``` +**[STEP 2: Create a TypeScript File]** + +> Action: Show the creation of an `index.ts` file and add code. + +Next, create a new file in your working directory and name it `index.ts`. Inside this file, you can write your TypeScript code. For example: -- 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: +```typescript +console.log("This is a TypeScript file!!!"); ``` + +**[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 the directory containing your TypeScript files and run the following command: + +```shell tsc index.ts ``` -- 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: +This command 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. -``` -tsc index.ts main.ts -``` +**[STEP 4: Run JavaScript Code]** -- 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: +> 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 ``` -- 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 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 ``` -You can learn more about `ts-node` usage [here](https://www.npmjs.com/package/ts-node) +This simplifies the process of running TypeScript code. + +**[CONCLUSION]** + +> 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! diff --git a/typescript-fundamentals/type-system/README.md b/typescript-fundamentals/type-system/README.md index e477a816..43a346e6 100644 --- a/typescript-fundamentals/type-system/README.md +++ b/typescript-fundamentals/type-system/README.md @@ -1,32 +1,47 @@ -# Text +**[INTRODUCTION]** -In this level, 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. +Hello! In this level, 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; age: number; @@ -34,16 +49,20 @@ interface User { } ``` -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. -Now that you have an understanding of 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. +Now that you know about types, let's talk about the benefits of using the type system. -One of the main benefits of using the type system is that it can help you catch errors before you even run your code. +- **Error Catching**: TypeScript catches errors before you run your code. If you try to assign a string to a variable expecting a number, TypeScript will throw an error. This saves you time and effort in debugging. -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. +- **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! From 5795575c900cad5606c19274c5e532b5a1370eb2 Mon Sep 17 00:00:00 2001 From: Mohd Saad Date: Wed, 4 Oct 2023 11:15:11 +0530 Subject: [PATCH 2/4] Update scripts --- .../executing-ts-code/README.md | 28 +++++------ typescript-fundamentals/type-system/README.md | 50 ++++++++++++++++--- 2 files changed, 56 insertions(+), 22 deletions(-) diff --git a/typescript-fundamentals/executing-ts-code/README.md b/typescript-fundamentals/executing-ts-code/README.md index e962ff3e..9a3b5d26 100644 --- a/typescript-fundamentals/executing-ts-code/README.md +++ b/typescript-fundamentals/executing-ts-code/README.md @@ -1,20 +1,18 @@ -**[INTRODUCTION]** +## INTRODUCTION Hello! In this level, we'll tackle a fundamental aspect of TypeScript: how to execute and run 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. -**[TYPESCRIPT COMPILATION]** - > Action: Display the text "TypeScript Compilation" on the screen. 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. -**[STEP 1: Install TypeScript Compiler]** +## STEP 1: Install TypeScript Compiler > Action: Display the command to install the TypeScript compiler. -The first step is to install the TypeScript compiler on your machine. You can do this by running the 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: ```shell npm install -g typescript @@ -22,29 +20,29 @@ npm install -g typescript This installs TypeScript globally on your system. -**[STEP 2: Create a TypeScript File]** +## STEP 2: Create a TypeScript File -> Action: Show the creation of an `index.ts` file and add code. +> Action: Show the creation of an `index.tsx` file and add code. -Next, create a new file in your working directory and name it `index.ts`. Inside this file, you can write your TypeScript code. For example: +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: ```typescript console.log("This is a TypeScript file!!!"); ``` -**[STEP 3: Compile TypeScript Code]** +## 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 the directory containing your TypeScript files and run the following command: +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.ts +tsc index.tsx ``` -This command 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. +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]** +## STEP 4: Run JavaScript Code > Action: Show how to run the generated JavaScript code in a web browser. @@ -60,7 +58,7 @@ Alternatively, if you want to run the generated JavaScript code using Node.js, y node index.js ``` -**[ALTERNATIVE: Using ts-node]** +## ALTERNATIVE: Using ts-node > Action: Explain an alternative method using `ts-node`. @@ -82,7 +80,7 @@ ts-node index.ts This simplifies the process of running TypeScript code. -**[CONCLUSION]** +## CONCLUSION > Action: Transition to the closing shot. diff --git a/typescript-fundamentals/type-system/README.md b/typescript-fundamentals/type-system/README.md index 43a346e6..7122095e 100644 --- a/typescript-fundamentals/type-system/README.md +++ b/typescript-fundamentals/type-system/README.md @@ -1,10 +1,10 @@ -**[INTRODUCTION]** +## INTRODUCTION Hello! In this level, 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. Let's start by answering a fundamental question: -**[WHAT IS A TYPE SYSTEM?]** +## WHAT IS A TYPE SYSTEM? > Action: Display the text "What is a type system?" on the screen. @@ -12,7 +12,7 @@ A type system is a set of rules that a programming language uses to ensure that Now, let's take a closer look at the built-in types in TypeScript. -**[BUILT-IN TYPES]** +## BUILT-IN TYPES > Action: Display a list of built-in types on the screen. @@ -27,7 +27,7 @@ In TypeScript, we have several built-in types, including: Now, let's explore how you can create your own types in TypeScript. -**[USER-DEFINED TYPES]** +## USER-DEFINED TYPES > Action: Display the code example for creating a type alias and an interface. @@ -51,13 +51,49 @@ interface User { These user-defined types can ensure that objects in your code have the correct structure. -**[BENEFITS OF THE TYPE SYSTEM]** +## BENEFITS OF THE TYPE SYSTEM -> Action: Display the benefits of using the TypeScript 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. -- **Error Catching**: TypeScript catches errors before you run your code. If you try to assign a string to a variable expecting a number, TypeScript will throw an error. This saves you time and effort in debugging. +## Error Detection + +> Action: Display "Error Catching" on screen and read it. + +- **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. + +Let's see how TypeScript's type system helps catch errors before they cause problems: + +> 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); +``` + +> Action: Explain that: In this code snippet, 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. + +> Action: Run the command `tsc index.tsx` in terminal and show the output. + +Now, let's see how this works in practice. 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: + +```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 +``` - **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. From cb95927ac0e65336583a859a38f36e7042fdc2d5 Mon Sep 17 00:00:00 2001 From: Mohd Saad Date: Wed, 4 Oct 2023 11:24:19 +0530 Subject: [PATCH 3/4] improved few sentences --- typescript-fundamentals/type-system/README.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/typescript-fundamentals/type-system/README.md b/typescript-fundamentals/type-system/README.md index 7122095e..6b48df1a 100644 --- a/typescript-fundamentals/type-system/README.md +++ b/typescript-fundamentals/type-system/README.md @@ -59,7 +59,7 @@ Now that you know about types, let's talk about the benefits of using the type s ## Error Detection -> Action: Display "Error Catching" on screen and read it. +> Action: Display "Error Catching" on screen and define it. - **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. @@ -80,12 +80,11 @@ myNumber = "Hello, World!"; console.log(myNumber); ``` -> Action: Explain that: In this code snippet, 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. +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. -Now, let's see how this works in practice. 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: - ```typescript index.tsx:6:1 - error TS2322: Type 'string' is not assignable to type 'number'. @@ -95,6 +94,10 @@ index.tsx:6:1 - error TS2322: 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 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. From cd0389b214f41e346d14983fcd21d671a3330407 Mon Sep 17 00:00:00 2001 From: Mohd Saad Date: Wed, 25 Oct 2023 16:42:14 +0530 Subject: [PATCH 4/4] remove the word level from the script --- typescript-fundamentals/executing-ts-code/README.md | 2 +- typescript-fundamentals/type-system/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/typescript-fundamentals/executing-ts-code/README.md b/typescript-fundamentals/executing-ts-code/README.md index 9a3b5d26..cbeb9018 100644 --- a/typescript-fundamentals/executing-ts-code/README.md +++ b/typescript-fundamentals/executing-ts-code/README.md @@ -1,6 +1,6 @@ ## INTRODUCTION -Hello! In this level, we'll tackle a fundamental aspect of TypeScript: how to execute and run TypeScript code. +Hello! In this lesson, we'll tackle a fundamental aspect of TypeScript: how to execute and run 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. diff --git a/typescript-fundamentals/type-system/README.md b/typescript-fundamentals/type-system/README.md index 6b48df1a..9b462ef9 100644 --- a/typescript-fundamentals/type-system/README.md +++ b/typescript-fundamentals/type-system/README.md @@ -1,6 +1,6 @@ ## INTRODUCTION -Hello! In this level, 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. +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. Let's start by answering a fundamental question: