typescript a syntactic superet of JavaScript which adds static typing in simple terms it prevents our dumb ass to shoot ourselves in the foot while writing code by catching errors during development that JavaScript wouldn't warn us about it's like having a buddy who double checks your work and stops you from doing something dumb like passing a string to a function expecting a number or accessing a property that doesn't exist imagine you're a freelance developer hired by a startup to fix their buggy e-commerce site frustrated you decide to introduce typescript to the project first you installed typescript by by typing the following in the terminal npm install and then typescript and then D- saave and last ddev then you initialize a configuration file for typescript by typing npx TSC D- init after that you opened your TS config file and saw a bunch of lines in there among these lines you'll find the compiler options field which specifies options for the typescript compiler it's like having customizable settings for typescript in the Target Field typescript automatically selects the JavaScript version you want to use but you can also choose to work with a more modern version such as es2020 or ES next think of it like choosing a car model older models work everywhere but newer ones come with more features next is the module field by default it is set to commonjs which specifies the module system for JavaScript files modules are chunks of code that you can Import and Export between files commonjs is a module system mostly used in node.js it lets you use the required keyword to import and module. exports to export alternatively you can work with modern module systems like es next or es6 to use the Import and Export syntax next is es module interrup which acts as a bridge smoothing out compatibility issues between the two module systems we discussed earlier the force consistent casing in file names option as the name suggests ensures that Imports match the case of file names preventing errors on case sensitive file systems the strict field enables strict type checking for your code which is critical when using typescript lastly skip lib check skips type checking for Library files this speeds up compilation by assuming that the library code is correct once you're done with the TS config file you tackled on your first task your tasked with creating a user registration form where users must enter their name so you create a variable for it and add John do as an example this works well usually but what if someone tries to input an invalid value like mistakenly put their phone number instead of name well typescript will save you from the mistake you just need to specify which type of a value you wanted to let the variable pass in our case anything that is not a string will results as an error which let us handle it correctly this also works in other types like numbers for example here we have a variable for the discount this will take in as a number right but what if someone typed the word 20 instead of a numerical one this could accidentally lead to a loss of Revenue and we definitely don't want that so let's make sure the variable discount will just take a number as a value by using typescript how about a Boolean for example let's say we created a feature toggle for our beta users we have a variable that checks whether a user is a beta user if it's true we assign it accordingly to ensure types safety and prevent accidental misuse we can secure this variable using typescript once that's done you're assigned another task this time the marketing team wants to keep track of top selling products you decide to create an array for the top sellers like laptop or phone this works well initially but what if your team accidentally adds a non-product value like a number or a Boolean to ensure our array only accepts string values we can secure it by adding a string type with square brackets at the end this restricts the array to accept only strings as its values however your marketing team insists that they need to add numbers as some top products are represented as numbers for some reason to handle this you can adjust the string type to also accept numbers this is achieved using a union type here's how you can solve it let's use a union operator to combine the types you want to allow like a string and number then let's enclose the union type and parentheses to group it properly and last let's add square brackets afterward to indicate that this is an array this allows top sellers to accept both strings and numbers ensuring flexibility while still being type safe Union operators can also be used with regular variables for example you are building a user management system where the user can be identified by either a numeric user ID or a username which is a string using a union type you can let the variable accept both types while still ensuring type safety after you're done learning type annotations and unions let's move on to using typescript with functions imagine you're building a loan calculation system the function requires two number inputs the loan amount and interest rate and the output should also be a number without typescript passing a string or object could break the function now let's ensure that both the amount and rate only accept values as numbers but we also have the return statement right how can we make sure it only returns a number to enforce this let's add the number type annotation after the function signature now even if we accidentally change the return value to a string typescript will give us an error this ensures that only valid values are passed to the function preventing bugs in the calculations after learning how to use typescript with functions let's now learn how to work work with objects imagine you're building an HR System to track employees and you want to ensure that the data about each employee is structured correctly without typescript this object could easily be inconsistent for example we might accidentally forget to include a field like ID or add an invalid field like age to prevent these issues we use interfaces to define the structure of the employee object ensuring consistency across the code base an interface in typescript act as a template for objects by defining the employee interface typescript makes sure that every employee object must follow this structure preventing missing or incorrect Fields if you accidentally leave out a property or add a wrong one typescript will give you an error however sometimes employees don't have a position yet because they might still be in a pending process but already have an ID we can make interfaces flexible by providing optional properties to do this you simply add a question mark to the field in our case this applies to the position field this way even if we create a new object without a position field it will still be valid in typescript since the field is optional you can also customize the name of your type in typescript in typescript a type Alias is a way to give a type a new name it allows you to define a custom type that can be used like any other type in your code when you're working with primitive types like string number or Boolean you can use type aliases to create more specific and meaningful names for those types this can make your code more readable and descriptive normally you would Define A Primitive type like this here username is a string and there's nothing special about the string type it's just a general primitive you can create a type Alias to make the type more descriptive or tailored to your use case you can define a type Alias for string that represents a username this gives the string a more specific meaning in your code if you want to go further you can define a more restrictive Alias using literal types for instance if you want to restrict the username to specific values like only certain strings you can use literal types in this case the type Alias username is restricted to only John Jane or Alex this kind of type Alias can be particularly useful when you're working with a set of predefined values like roles or states for example user roles often determine what actions a user can perform in an application for instance you might have roles like admin moderator and user you can use a type Alias to restrict these roles to specific values in this example the RO type Alias restricts the value of role to one of three options admin moderator or user if you try to assign an invalid role like guest typescript will raise an error ensuring that only valid roles are used type aliases in typescript plays a crucial role in ensuring that code is both robust and maintainable after learning how to work with type Alias let's dive into enums and typescript enums and typescript are a way to define named constant values they make your code more readable and maintainable by providing descriptive names for a set of numeric or string values for example imagine you're building a subscription system where users can choose from different subscription tiers instead of using strings like free basic and premium we can use an enum to ensure consistency and avoid typos so even if we accidentally try to assign something other than a valid enum value typescript will give us an error enums is great for improving code readability and make it easier to manage sets of related constants you can also use numbers for enums for example we created an enum that handles HTTP status code with different fields corresponding to various status codes like 200 for okay or 404 for not found this makes it much more secure and easier to handle functions with switches lastly let's talk about generics and typescript a generic is a way to create a reusable component that can work for multiple data types it is simply a placeholder for any data type for example we have a function called identity where we don't know upfront what type of data will be passed we need to ensure that the type of the argument passed to the function is the same as the type of the return value in this example there is no type enforcement and JavaScript won't prevent us from passing different types of data to the identity function however this can lead to issues if we want to be sure that the type of the argument matches the type of the return value to solve this we can use generics and typescript a generic will act as a placeholder for the type ensuring type safety in typescript we Define the generic placeholder T which represents any data type the argument type and the return type both use T ensuring they are consistent if we pass a number to the identity function typescript infers that both the argument and return value are of type number similarly if we pass a string both the argument and return value are treated as type string the function ensures that the type of the argument matches the type of the return value which prevents issues that could occur in JavaScript where the types are not enforced I know it's hard to understand generics at first so let's explore them more deeply in another video explaining how generics work and when and how to use them in your project well that's it this is just the basics of typescript we also have a pdf version of this video which is free but we would appreciate it if you could support the channel we still need to learn how to handle more advanced features of typescript so subscribe to stay tuned for future videos well that's it for now novas thank you for watching [Music]