TypeScript Tutorial - TypeScript for React - Learn TypeScript [2020]

[Music] in order to build applications with angular you need to be comfortable with typescript so in this section i'm going to introduce you to the fundamentals of typescript and object-oriented programming principles so by the end of this section you will have a good understanding of type annotations arrow functions interfaces classes constructors access modifiers properties and modules if you are familiar with this concept and know how to implement them in typescript feel free to skip the section and move on to angular otherwise you really need to watch every lecture in this section so now let's get started so what is typescript typescript is not an entirely new language it's a superset of JavaScript so that means any valid JavaScript code is also valid typescript code but typescript has additional features that do not exist in the current version of JavaScript supported by most browsers out there for example in typescript we have this concept of strong or static typing if you have worked with languages like C sharp and Java you know that in these languages when we define a variable we need to specify the type of that variable now in time script typing is optional so we don't have to use this feature but using this feature makes our applications more predictable and it also makes it easier to debug them when something goes wrong typescript also brings quite a few object-oriented features that we have missed in JavaScript for a long time we have the concept of classes interfaces constructors access modifiers like public and private filled properties generics and so on you're going to learn about this in this section another benefit of using typescript is that with typescript we can catch errors at compile time instead of at runtime well of course not all kinds of errors but a lot of errors so there is a compilation step involved and when we compile our typescript code we can catch these errors and fix them before deploying our application and finally another benefit of using typescript is that we get access to some great tools out there one thing that I personally love about typescript is the intelligence that we get in our code editors again you're gonna see that in this section so typescript is a beautiful language and it's basically a superset of JavaScript so any valid JavaScript code is also valid typescript code now the browser's out there they don't understand typescript and it's very unlikely that they're going to support it in the future so we need to compile or more accurately transpile our typescript code into JavaScript so this is part of building our application whenever we build our application typescript compiler kicks in and it transpires our typescript code into JavaScript code that browsers can understand now that's enough introduction next I'm going to show you how to install typescript and write your first typescript program in this lecture I'm going to show you how to install time script and write your first typescript program so here we're in the terminal we're not gonna work with angular in this section we're gonna purely focus on typescript so first we need to install typescript globally on our machine so npm install dash G which stands for global typescript and of course if you're on Mac you need to put sudo at the front all right beautiful so I've installed the latest version of typescript which is currently version 2.3.4 now we can type T SC which stands for typescript compiler - - version again you can see that I'm running type scrape 2.3.4 alright now I'm going to create a new folder for this section so let's call this TS hello let's go to this folder now here I'm gonna create a new file and open it with vs code so code main TS so now I'm gonna write some plain JavaScript code and I want to show you that all this JavaScript code is also valid typescript code so first I'm going to define a function let's call this log that takes a message and here we simply log that message on the console like this then I'm gonna declare a global variable let's call this message and set it to this string hello world and finally call our log function message so this is just plain JavaScript code right now save back in the terminal we need to transpile this type script file into JavaScript so TSC or table script compiler main dot yes now if you look at the files in this folder look we have main degeus and main dot yes now this transpilation or a compilation step when you're building an angular app happens under the hood so you don't have to manually call the typescript compiler in fact when you run your application using ng serve angular CLI calls typescript compiler under the hood to transpile all our typescript code all right now let's open our main the J's file so code main the Jas so it's exactly the same code that we wrote but now it's in JavaScript file so all JavaScript code is also valid typescript code now back in the terminal I can execute this code using node so node main is and we got the hello world message on the console so from the next lecture we're going to look at specific features of typescript that we don't currently have in JavaScript all right let's explore typescript by looking at variable declarations so in typescript there are two ways to declare a variable we can use the VAR keyword which you have seen in JavaScript like var number we set it to one or we can use the let keyword so let count to be two now before I explain the difference I need to clarify that the let keyword is also being added to the javascript so javascript has a few different versions we have es5 or Okemo script five which is the version of javascript supported by pretty much all browsers out there it's been around for a long time now we have es6 which is a newer version and it was introduced in year 2015 and from that point the eggman script team which is the team extending Java Script decided to use the year number instead of the version number so we have a common script 2015 2016 and 2017 now in eggman script 2015 which is basically es6 we also have this led keyword but in case you are not familiar with it let me explain how it works so I'm gonna define a function let's call it do something it doesn't really matter now here I'm gonna define F block so VAR we said I to zero and as long as I is less than five let's increment it here we have a block and then log it on the console now finally at the end of this function I'm gonna log this I one more time but with the label finally and then I'm gonna call this function here so in the terminal I'm gonna compile this file main dat TS and also at the same time run it with node main J s note that the value of I at the end is 5 so this is the issue we have when declaring a variable using the VAR keyword so we have declared I here inside this for block but it's also meaningful and available outside the for block now if you have worked with languages like C sharp or Java you know that we don't have this concept in those languages in JavaScript a variable declared with the VAR keyword is scoped to the nearest function so in this case the nearest function is do something so once we declare I inside this for block it's available anywhere in this function now let's see what happens when we declare this variable using the let keyword so let now look we immediately got a red underline here which indicates a compilation error and this is one of the beauties of typescript when you're a writing typescript code you can catch these errors at compile time before you run your application before you deploy it now let's hover our mouse here so this is the error cannot find name I so now I is scoped to the nearest block instead of nearest function and this is the proper way to declare variables which prevents a lot of issues later down the road now I want to clarify something let me see you this file back in the terminal first I'm gonna remove main Jas now I'm gonna recompile our main dot es okay we got our error here cannot find name I however if you look at the files in this folder we do have mainland je s so even though we have a compilation error the typescript compiler still generated main dejay s let's have a look at the content of this file so this is the code that is generated so by default typescript compiler compiles our typescript code to es 5 or a comma script 5 which is the older version of JavaScript that is supported by all browsers out there now there we don't have the lead keyword so that's why our compiled code now uses the VAR keyword and this is perfectly valid JavaScript code so I can go into terminal and simply run this code and get the same output as before so what I want to clarify here is the typescript compiler reports these errors but it still generates valid JavaScript code so here's a takeaway for this lecture from now on anywhere we want to declare a variable we use the let keyword once again this does not stop the compilation step but at least we can catch the issues earlier during the compile time next we're going to look at different types we have and in typescript in this lecture I'm gonna show you different types we have in typescript so let me start by declaring a variable called count and set it to 5 now if I set this to say a character or a string like a note that I immediately get a compilation error here telling me that this a string or a character is not assignable to type number now we can perfectly do this in JavaScript because in JavaScript we can change the type of variables on the fly but in typescript we get a compilation error now once again I want to clarify that we can perfectly compile this using typescript compiler and we will get valid JavaScript code so if I go to terminal and type typescript compiler main the TS now look this is our main de Jas so we have this count variable and we have changed its value we can perfectly execute this no problem however code like this is very likely that it's going to break at some point in the future because chances are we're gonna use this count variable inside a four-block so our program is gonna break at run time we don't want this to happen right that's one of the reasons it's better to write the same code in typescript so at least we can get a warning during the compilation step now if you hover your mouse over this count variable look at the tooltip you can see a colon and number after a discount so this indicates the type of count variable in our program so here typescript compiler infer that the type of this variable should be a number because we set it to number of 5 now what if I declare a variable without initializing it let's look at its type its type is now any and that's exactly like the variables with declare in JavaScript so I can set a to 1 then I can change the value to true and then set it to your string even typescript doesn't complain about this so what's the solution if you don't know the value of a variable ahead of time that's when we use type annotations so here we add : and after that we set the type of this variable like number and then look on the third and fourth lines we got compilation errors now in typescript we have a few different types so we have number which can include any integer or floating-point numbers we have boolean which can be true or false we have strings we have any that you saw earlier we have array so let's say we want to declare an array of numbers we would use a number with square brackets now we can optionally initialize this to an array like this or we can declare an any array and with this we can set this to an array with these values one true a and false of course it's not a good practice we want to avoid this but I'm telling you what is possible with typescript now we also have another type that I absolutely love and that's inna so let's say we're working with a group of related constants like colors so in plain old or vanilla JavaScript we would define constant colors like this so color red we can set this to zero constant color green we set this to one and constant color blue set it to two now this is a little bit verbose in a lot of object-oriented languages we have this concept called enum so we can put all these related constants in a container so in typescript we can declare an enum like this enum all lowercase we give you the name like color now curly braces and here we set the values so red green and blue then we can declare a variable like background color and set it to color dot now look we have intellisense here so this tooltip you see here allows us to complete this code without remembering all the details this is one of the things I love about typescript so let's set the background color to color dot red now in terms of the values the first element here automatically gets the value of zero and each subsequent element gets an incremented value so we don't have to explicitly set these but as a best practice it's better to do so because chances are sometime in the future someone might come here and add a new color here like purple and then purple would automatically become 2 and the value of blue would change to 3 so this may break parts of our application so let me revert this by explicitly setting the values if somebody adds a new color here like purple then it will not change the value of blue now let me show you something let's compile this code and see how we get enum in JavaScript so at a script compiler main dot TS look at this piece of code here this is how we can implement the concept of enums in JavaScript we can see it's very complicated now compare this with how we declare it an enum here it's much cleaner so the more you work with typescript the more you're gonna love this language in this lecture I'm going to show you the concept of type assertions in typescript so I'm gonna start by declaring a variable like message and sitting into your string now here we can type message dot I look we get this beautiful intellisense and in this tooltip we can see all the things we can do with a string so all these items with this purple icons are functions for example we have this function called ends with we can call this and see if this message and let's say we'd see and this returns a boolean so we can store the result in another variable like ends with C however sometimes typescript may be a little bit confused about the type of a variable for example I'm gonna remove this initialization here and initialize this variable on the second line ABC now look at the type of this message variable it's any because by default when we don't set a value the type is any now the problem here is that if I delete this and type period look we don't get that intellisense anymore because ends waste is something that we can do with a string not with an object of type any so what should we do in this case we need to explicitly tell typescript compiler that this message variable is actually a string and this is what we call type assertions now how do we do type assertions there are two ways one way is to prefix this variable with angle brackets and here we put the type like string now we need to enclose both these parts in parenthesis like this then if you press period we get our beautiful intellisense with all the functions or methods available on string objects now there is also another way to do type assertion so let's change the name of this variable to alternative way and here instead of angle brackets use message as string they're exactly the same the approach to shoes is purely your personal preference but the first approach is what you see more in a lot of tutorials and code bases out there I just want to clarify something here this type assertion does not change the type of this variable at runtime in fact it's not going to restructure that object in memory it's purely a way to tell typescript compiler about the type of a variable so we can access the intellisense another concept you need to know when using typescript to build angular applications is the concept of arrow functions so in JavaScript we can declare a function like this let log we set this to a function this function takes a message object and simply logs it on the console like this now in typescript there is a shorter way to define this function so let's call the other one do log now we don't need the function keyword anymore we can simply add the parameters in this case message then we add this arrow and that's why we call this an arrow function and finally the code block so consulate log message now if our function has only one line we can even exclude these curly braces so we can make this code a little bit shorter and cleaner like this if you have worked with c-sharp you have seen this before and c-sharp we call this a lambda expression in typescript we call it an arrow function it's exactly the same thing now if you have one parameter here you can even exclude the parentheses but I personally don't like this because I think it makes the code a little bit less readable so I always like to put my parentheses here to indicate to the reader of this code that these are the parameters now what if you don't have any parameters we just add empty parentheses but of course here you don't have the message so if you have not seen this before get used to it it's a really nice and clean way to do functions all right now let's see how we can use custom types in typescript so I'm going to start by declaring a function like draw point so this function takes an x and a y and simply draws it on the screen now we don't want to worry about the actual drawing algorithm we just want to focus on the signature of this function now this function is not too bad here we have only two parameters but sometimes when working with more complex concepts we may end up with a function that has so many parameters like this this is really really bad and it's something you should avoid at all times in those situations it's very likely that a group of these parameters maybe all of them belong to a single concept as an example think of a car the car has so many different properties we don't want to pass all those properties to a function like drive car instead you want to encapsulate them inside an object and only pass that one object here so in this example instead of passing x and y here it's better to pass a point object and then we can call this function like this draw a point we give it an object with two properties x and y so now our function has a cleaner syntax however there is a problem with this implementation instead of a point object I can pass a person object that has a name property and nowhere here we are getting a compile time error but we know that this code is gonna break at runtime because the algorithm in our draw point function is expecting x and y properties so what's the solution well let me revert this back ok we've got x and y so there are two solutions to solve this problem one way is to use what we call in-line annotation so just like we can annotate this parameter with a type like number we can annotate it with a custom type or custom object so here we add curly braces to indicate an object this object is going to have a property called X which is a number and also another property called wine which is again a number so this is what we call inline annotation it works fine for simple cases but the problem with this as you can see is that this is a little bit verbose also chances are somewhere else we might have another function that expects a point object we don't want to repeat this object literal in multiple places so in those cases a better approach is to use an interface if you worked with object-oriented programming languages like C sharp and Java you know the concept of interfaces we have the same concept in typescript now if you have never worked with interfaces let me show you how they work so on the top I define an interface and I'm gonna call this point curly braces then I add X it's a number and Y is a number so with this interface I'm defining the shape of an object and then I can simplify this declaration and set the type of this parameter to point this is much cleaner and we can also reuse this in multiple places just one thing note the naming convention I have used here so because I'm introducing a custom type I've used Pascal naming convention so the first letter of every word in the name of the interface should be capitalized so here we have our per case P not a lowercase P okay so when using interfaces always use Pascal naming convention so in the last lecture we use an interface to define the shape of a point object but there is a problem with this implementation in object-oriented programming languages we have this concept called cohesion which basically means things that are related should be part of one unit they should go together this is what we call cohesion now back to this example on the top we have used an interface to define the shape of a point object and below that we have a standalone function and this is where we have violated the Haitian principle so the concept of drawing a point is highly related to the structure of a point it should not be a separate function now if you're going to build a utility library for working with points chances are you're going to create another function like get distance that calculates the distance between two points so point a of type point and point B of type point and this goes to is code block again we have violated the cohesion principle we have two functions hanging in the air separate from the point object since these concepts are highly related they should be part of one unit in object-oriented languages we call that unit a class so a class groups properties and functions that are highly related now in this implementation unfortunately we cannot move these two functions inside our interface because interfaces are purely for declarations they cannot include an implementation in other words we cannot have the algorithm for calculating the distance between two points or drawing a point inside this interface what we can do instead is to add a function here a function declaration so we're gonna have a draw function that takes no parameters and returns void which means it doesn't return anything now you might be asking why don't we have this point parameter here because if all these members X Y and draw are part of one unit we don't need to pass x and y as parameters to the draw function this function can directly access these properties x and y in the same unit so we don't need this parameter here now in interfaces as I said we cannot have implementation we can only have the signature of a function so with this interface we are telling typescript compiler that our point objects should have two properties x and y and a function called draw the implementation of that is somewhere else so what should be to apply the cohesion principle here we need to use a class instead of an interface so on the top I'm going to change the type to class and here I'm going to replace is comma with semicolon so our point class has three members the first two members are what we call fields that we use for storing data and the third member is a function now here in this class we can have the actual implementation of this draw function so we can simply define it like this draw and then add all that logic for drawing a point now similarly we can have another function get distance that returns the distance between this point and another point like this again all that logic will end up here now with this restructuring you can see that everything about a point is in one unit in one class so we have the coordinate which includes x and y and two functions draw and get distance now in object-oriented programming terms we refer to these members as fields and to these functions as methods so when a function is part of a class we call it a method alright now with this new implementation we don't want these two functions hanging in the air so delete this is a much better structure also you're not gonna call draw a point like this anymore so here's our point class in the next lecture I'm gonna show you how to create an object of this type and call the draw method all right so here's our class now let's declare a variable of this type so let point be of type point and then we can type point dot look we have this beautiful intellisense we have two methods draw and get distance and two fields x and y now in time script we also have a concept called property which is different from a field but a lot of people use these terms interchangeably later in this section you're gonna learn the difference between fields and properties now if you wanna call the draw method I simply call it like this so this draw method is now part of the concept of a point it's not a function hanging in the air polluting the global namespace now for this demo I'm gonna add a simple console dot log here and display the coordinate at this point so X now here I want to add the X field what we cannot use it like this we need to prefix it with this dot so that refers to this field in this class and then I'm gonna add Y is once again this dot Y now let us compile and run this program and see what happens so TSC what should we type here main the TS and we can shortcut by adding this pipe here type node and then main ajs okay you got a runtime error cannot read property draw of undefined so this is the problem when we call this draw method this point object was undefined because here unlike the basic types we have in typescript like numbers strings billions we're dealing with a custom type when defining an object of a custom type we need to explicitly allocate memory to it how do we do that well here where we declare the point object or the point variable we initialize it using the new operator so this object is a new point and here we add parentheses this is the syntax now you can see that we have repeated this point here twice so we can make this code a little bit cleaner by removing this type annotation because typescript compiler can infer from this assignment here that the type of this object is a point object and let's verify that so look you're working with a point object now one more time save so back in the terminal typescript compiler main dot TS and then note main that is okay we didn't get an error but you can see that these x and y fills don't have a value because by default they are undefined so we can get back here and set point that X to let's say 1 and point out y - 2 now back in the terminal typescript compiler main dot TS i actually made a mistake earlier so instead of this pipe operator we need to use double ampersand on Mac I don't know the Windows equivalent so with this we can combine multiple commands so note main that is all right beautiful X is 1 and Y is 2 so this is how we use the classes that we define in our programs that one highlight something here this point here is a class but this point here is an object an object is an instance of a class as a metaphor think of the concept of a human human could be a class but let me create instances of this class like John Bob Mary these are all objects so that's the difference between a class and an object next we're gonna look at constructors all right so I've simplified the code from the last lecture I simply remove the method get distance because we're not going to use it later in this section so here on the top we define a point class and then below that we initialize a point object now this code is a little bit verbose because we have three lines to create a point object and put it in a valid State what if this point object had a few other properties that we had to initialize like this and maybe a few more here is there a cleaner way absolutely so let me delete this first all right in object-oriented programming languages we have this concept called constructor so every class can have a constructor which is basically a method that is called when we create an instance of that class so let me show you how it works in the class I'm gonna add a method the name of this method is constructor this is a reserved keyword in typescript now this method can have parameters so X which is a number and Y which is also a number and then here in this method we can initialize these fields so what should be right here this dot X we set it to this X argument that we get here and similarly this that Y we set it to Y now look we got the compilation error here because when creating a new point object we need to supply these values look at the error supplied parameters do not match any signature of call target so here we need to supply the values for X on Y one and two and with this we can simplify this code and get rid of these two extra lines and here's the end result now what if somewhere else in our program we don't know the initial coordinate of a point in other words what if I want to create a point object without setting these values is that possible yes absolutely but it's a little bit different from how you have seen that in other languages like C sharp and Java in c-sharp we can have multiple constructors in typescript we can't so the solution for this is to make these parameters optional so here after X I add a question mark and that makes X optional and similarly Y should be optional as well because once you make it parameter optional all the other parameters on the right side of that parameter should also be optional this is a rule by typescript and a lot of other programming languages so now look we don't have a compilation error when creating a point object without initial values all right so here I've created a point object with an initial coordinate now what do you thin our program you want to have this rule such that when we initialize a point object we should not be able to change the X or Y values with this implementation I can always come here and set point that X to a different value how can we avoid this sometimes we need this feature in our programs because it will make them more predictable it reduces the chance for bugs so how should we prevent the coordinate of this point object to change after it's initialized well in object-oriented languages we have this concept called access modifiers an access modifier is basically a keyword that we can apply to a member of a class to control its access from the outside so in typescript we have three access modifiers public private and protected public and private are the most common and by default all members are public let me show you what I mean so here in our point class we have three members right we have two fields and one method so let me create a pointer object and type point dot look these are the members of the class and because they are all public we can access them here and that's why we can see them in the intellisense however I can go here and prefix this field with the private key word now once we create this point object if I type point dot look X is not in the list it's not accessible it's private so if we try to set point at X 2 3 look we have a compilation error in typescript it says property X is private and only accessible within class point now with this technique I can go here and I applied the private keyword on the Y field as well and now once I initialize a point object I can no longer change is quite innate I can only call the draw method ok so this is why we use it's modifiers to control access to certain members of a class from the outside you can apply these access modifiers on field properties and methods now by default if you don't set an access modifier is assumed to be public so here the draw method as you know is public I can also add the public key word here but this is redundant it's just making my code noisy so you don't really need to add this it's better to keep your code short and clean and use the private access modifier only when you need to next I'm gonna show you one of my favorite features of typescript around access modifiers as you write code with time script you see constructors that follow a pattern like what you see here so here we have two parameters in our constructor and we use these two parameters to initialize the fields in this class the code looks a little bit redundant this that x equals x and this dot y equals y time script has a fantastic feature that helps you achieve the same thing with less code so here we can delete these two fields here and in our constructor we can prefix our parameters with an access modifier so here I want to have two private fields x and y I can simply prefix these with the private keyword like this so typescript compiler will generate these fields for us and also you don't need these ugly repetitive assignments either so if he prefix a constructor parameter with an access modifier with a private or public typescript compiler will generate a field with the exact same name and it would also initialize that field with the value of this argument it's one of my favorite features and you're gonna see that a lot in this course now clarify something before we finish this lecture in this case our fills were private but if they were public we would use the public key word here so this means when we create a point object we can access the X field so I'm gonna revert this back to the private all right now this implementation has a tiny problem we can set the initial coordinate of this point and we can also draw it but there is no way for us to read the coordinate so I cannot access point that the X here so display to the user what's the workaround well one simple solution is to define a method like this yet X and here we simply return this that X because in this class we do have access to all the private members of this class but we cannot access them from the outside okay now here I can always call point that get X to get the x value and display to the user now let's talk about another use case maybe we want to give the user the ability to set the inertial coordinate here but we also want them to be able to change this coordinate later only if they provide a value within a given range what do I mean by that let me show you I'm gonna define another method here set X now this method is gonna get a value that's the new value for the eggs field let me scroll down now here first we can do some basic validation so if value is less than zero you want to throw an error throw new error value cannot be less than zero otherwise we want to set this well x2 this new value okay now with this implementation we can always change the value of the X field like this point that set X we set it to a new value now if you have a use case like that in your applications you can use what we call a property so in typescript and in a lot of object-oriented programming languages we have a concept called property which is exactly for this very use case so look at how I can define a property here we start with the keyword which is get or set and then the name of the property which is in this case X and after that we're gonna have parentheses just like a method okay now similarly I'm gonna change this to set with a space so we have the set keyword and here it's like we have a function a method now what is the difference the difference is that we can use these properties like fields so here I can read X like this dot note the icon of X it's the same icon we have for fields it's not a method anymore so we can read X and we can also set it like this point that eggs we set it to ten we don't have to call a method like this it's a cleaner syntax okay so this is what properties are for if you have private fields then you want to give maybe a read-only access to the outside or if you want to give the consumer of your classes the ability to set the values but you want to have some basic validation that's when you use a property now in this case if I want to give only the read-only access to this underlying field I can simply comment out the setter so we call this method a setter and the other method a getter okay and I look at this compilation error we cannot change the value of x now let's bring this back one last thing before we finish this lecture so here I have used a capital X for the name of my X property in JavaScript and in typescript we use camel notation to name our field so that's why earlier we define this private field here within camel casing notation camel casing means the first letter of the first word is lowercase and the first letter of every word after is uppercase now what should we do to use camel casing notation for our properties if I name this the lowercase eggs it clashes with the existing field so let me revert this back a convention we use to solve this problem is to prefix the name of the underlying field with an underline so let's rename this using f2 and prefix it with an underline okay a similarly for the Y parameter or the Y field I'm also going to use underline Y then we can rename this property from capital X to lowercase X once again we press f2 or case X and note that both instances was the getter and the setter are updated now we can work with this X property exactly the same way we use the X field so here's the lesson a property looks like your field from the outside but internally it's really a method in the class well more accurately it's either one method which is a getter or a setter or a combination of a getter and a setter all right I've simplified the definition of the point class I remove the properties so we have a simple constructor and draw method and we're using this point class below its definition now this is a very simple program with only one file but the real world application consists of tens or hundreds of files we don't want to write all the code in one file like main the TS so ideally I want to move the definition of this point class somewhere else in a file like point the TS so here in this project I'm gonna add a new file point a TS now back in Maine the TS I'm gonna select all this code cut it and move it to point a TS now in typescript we have this concept called modules now what a module is requires a little bit more explanation but for now let me give you a simple pragmatic definition in typescript you can think of each file as a module sorry in this program we can say we have two modules but this is not quite accurate because these files are not modules yet so in pointer TS we have defined this class called point but this is not accessible anywhere outside this file so this file defines its own scope in order for us to use this class somewhere else in our program we need to export this to the outside so we add the export keyword here and now this is visible outside this file now that we're exporting something on top of this file from type scripts point of view this file is a module now we need to go back to our main de TS and import this class so we can use it so back in main the TS look we have a compilation error cannot find name point because we have not imported this into main the TS so on the top we write import in curly braces we add the name of the types we want to import in this case point now if there are multiple types you want to import we separate them using comma okay so we import point from now here we put the name of the module in quotes what is the name of the module it's the relative pass to that module from this file so both these files are in the same folder we can use period slash which refers to the current folder and then point is the name of our module so it's not point that TS look we get a compilation error so the name of our module is point now we no longer have a compilation error here and we can create an instance of this point class and use it now there is a lot more to talk about when it comes to modularity in typescript but that's all you need to know for now in order to start building applications with angular because in angular framework we have a lot of types that are exported so we need to import these into our typescript files and use them you're gonna see that a lot in this course the only difference is that angular modules are defined in a different way so we don't add the relative path to this module files because these files are not really part of our application they're somewhere inside note underline modules folder so when it comes to importing types defined in angular we use the library name as the module name for example one of the libraries is at angular slash core okay so here's the lesson in typescript we divide our program into multiple files in each file we export one or more types these types can be classes functions simple variables or objects and wherever we need to use these types we need to import them first when we have an import or export statement on top of a file that file is a module from type scripts point of view in angular we also have the concept the modules but angular modules are a little bit different they're not about organization of code in different files they are about organization of your application into smaller functional areas you're going to learn about angular modules in the next section hi thank you for watching my angular tutorial if you enjoyed this video please like it and share it with others also you can subscribe to my channel for free new videos every week this video is part of my complete angular course with almost 30 hours of high quality content where you learn everything about angular from the basic to the advanced topics all in one course so you don't have to jump from one tutorial to another in case you're interested you can get this course with a big discount using the link in the video description and if not that's perfectly fine continue watching as the next section is coming up you

Channel: Programming with Mosh

Views: 426,320

Rating: 4.8445873 out of 5

Keywords: typescript tutorial, typescript, typescript tutorial for beginners, typescript tutorial 2020, typescript for beginners, learn typescript, typescript vs javascript, typescript course, learn typescript 2020, typescript crash course, typescript react, typescript crash course 2020, typescript nodejs, typescript basics, what is typescript, angular, web development, mosh hamedani, code with mosh, programming with mosh, ts, react typescript, typescript 2020, react, javascript, react js

Id: NjN00cM18Z4

Length: 51min 32sec (3092 seconds)

Published: Thu Aug 31 2017