TypeScript Tutorial - TypeScript for React - Learn TypeScript

Key Takeaways

[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 this 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 typescript 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 fields 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 but 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 intellisense that we get in our code editors again you're going to 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 browsers 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 transpiles 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 typescript and write your first typescript program so here we're in the terminal we're not going to work with angular in this section we're going to 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 have installed the latest version of typescript which is currently version 2.3.4 now we can type tsc which stands for typescript compiler dash dash version again you can see that i'm running typescript 2.3.4 all right 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 going to create a new file and open it with vs code so code main.ts so now i'm going to 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 going to 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 typescript file into javascript so tsc or typescript compiler main.ts now if you look at the files in this folder look we have main.js and main.ts now this transpilation or 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.js file so code main.js so it's exactly the same code that we wrote but now it's in a 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.js 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 export 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 2. 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 ecmoscript 5 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 ecmascript team which is the team extending javascript decided to use the year number instead of the version number so we have ecmascript 2015 2016 and 2017. now in ecmoscript 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 going to define a function let's call it do something it doesn't really matter now here i'm going to define a 4 block so var we set i to 0 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 going to log this i one more time but with the label finally and then i'm going to call this function here so in the terminal i'm going to compile this file main.ts and also at the same time run it with node main.js 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 keyboard so we have declared i here inside this four block but is also meaningful and available outside the four 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 a var keyword is scope to the nearest function so in this case the nearest function is do something so once we declare i inside this four 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 this is one of the beauties of typescript when you are writing typescript code you can cache 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 save this file back in the terminal first i'm going to remove main.js now i'm going to recompile our main.ts okay we got our error here cannot find name i however if you look at the files in this folder we do have main.js so even though we have a compilation error the typescript compiler still generated main.js 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 es5 or ecmascript 5 which is the older version of javascript that is supported by all browsers out there now there we don't have the led keyword so that's why our compile code now uses the var keyword and this is perfectly valid javascript code so i can go in the terminal and simply run this code and get the same output as before so what i want to clarify here is that typescript compiler reports these errors but still generates valid javascript code so here's the 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 in typescript in this lecture i'm going to 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 let's 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.ts now look this is our main.js 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 going to use this count variable inside a 4 block so our program is going to break at runtime 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 inferred that the type of this variable should be a number because we set it to number five now what if i declare a variable without initializing it let's look at this type its type is now any and that's exactly like the variables we 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 we don't know the value of a variable ahead of time that's when we use type annotations so here we add colon 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 booleans which can be true or false we have strings we have any that you saw earlier we have arrays so let's say we want to declare an array of numbers we would use number with square brackets now we can optionally initialize this to an array like this or we can declare in 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 enum 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 2. 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 or lowercase we give it a 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 and 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 this but as a best practice it's better to do so because chances are sometime in the future someone may come here and add a new color here like purple and then purple would automatically become two and the value of blue would change to three 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 typescript compiler main.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 declared an enum here it's much cleaner so the more you work with typescript the more you're going to love this language in this lecture i'm going to show you the concept of type assertions in typescript so i'm going to start by declaring a variable like message and setting it to a string now here we can type message dot and 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 with c 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 going to remove this initialization here 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 with 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 we 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 we use message as string they're exactly the same the approach you choose is purely your personal preference but the first approach is what you see more in a lot of tutorials and code bases out there now 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 timescript 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 console.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 are working with c sharp you have seen this before in 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 parenthesis 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 parenthesis here to indicate to the reader of this code that these are the parameters now what if we don't have any parameters we just add empty parenthesis and of course here we 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 define 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 a car has so many different properties we don't want to pass all those properties to a function like drive car instead we 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 going to break at run time 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 okay we've got x and y so there are two solutions to solve this problem one way is to use what we call inline annotation so just like we can annotate this parameter with the 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 y 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 have worked with object-oriented program 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 i'm going to call this point curly braces then i add x is 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 uppercase p not the lowercase p okay so when using interfaces always use pascal naming convention so in the last lecture we used 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 cohesion 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 we're going to build a utility library for working with points chances are we'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 this code block again we have while at 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 any 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 going to 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're 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 we do now 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 this 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 all right 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 we're not going to call drop point like this anymore so here's our point class in the next lecture i'm going to 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 typescript 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 going to learn the difference between fields and properties now if you want to call the draw method 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 going to add a simple console.log here and display the coordinates of this point so x now here i want to add the x field but 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 going to add y is once again this dot y now let's compile and run this program and see what happens so tsc what should we type here main.ts and we can shortcut by adding this pipe here type node and then main the js okay we 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 booleans 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 parenthesis 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 into terminal typescript compiler main.ts and then node main.js okay we didn't get an error but you can see that these x and y fields 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 that y to 2. now back in the terminal typescript compiler main.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 node main.js all right beautiful x is one and y is two so this is how we use the classes that we define in our programs now i want to 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 when we 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 going to look at constructors all right so i've simplified the code from the last lecture i simply removed 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 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 going to 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 we write here this dot x we set it to this x argument that we get here and similarly this.y we set it to y now look we got a compilation error here because when creating a new point object we need to supply these values look at the arrow supplied parameters do not match any signature of call target so here we need to supply the values for x and 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 a 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 program 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 if in 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.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 coordinates 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 when we 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 keyword 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.x to 3 look we have a compilation error in typescript says property x is private and only accessible within class point now with this technique i can go here and apply the private keyword on the y field as well and now once i initialize a point object i can no longer change its coordinates i can only call the draw method okay so this is why we use axis modifiers to control access to certain members of a class from the outside you can apply these access modifiers on fields properties and methods now by default if you don't set an access modifier it's assumed to be public so here the draw method as you know is public i can also add the public keyword 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 going to show you one of my favorite features of typescript around access modifiers as you write code with typescript 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 dot x equals x and this.y equals y typescript 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 axis 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 we don't need these ugly repetitive assignments either so if we 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 going to see that a lot in this course now clarify something before i finish this lecture in this case our fills were private but if they were public we would use the public keyword here so this means when we create a point object we can access the x field okay so i'm going to 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 x here to display it to the user what's the workaround well one simple solution is to define a method like this get x and here we simply return this dot 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 dot 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 initial 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 you mean by that let me show you i'm going to define another method here set x now this method is going to get a value that's the new value for the x field let me scroll down now here first we can do some basic validation so if value is less than zero we want to throw an error throw new error value cannot be less than zero otherwise we want to set this but x to 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 going to have parenthesis just like a method okay now similarly i'm going to 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.x we set it to 10. 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 that 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 now 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 defined this private field here using camelcasing notation camelcasing 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 camelcasing notation for our properties if i name this the lowercase x 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 underlay okay 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 lowercase x and note that both instances both 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 a 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 removed the properties so we have a simple constructor and the 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.ts so ideally i want to move the definition of this point class somewhere else in a file like point.ts so here in this project i'm going to add a new file point.ts now back in main.ts i'm going to 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 so 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 point.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 typescript's point of view this file is a module now we need to go back to our main.ts and import this class so we can use it so back in main.ts look we have a compilation error cannot find name point because we have not imported this into main.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 we 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 path 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.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 going to 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 paths to these module files because these files are not really part of our application they're somewhere inside node 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 typescript's point of view in angular we also have the concept of 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 will 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