 So who has heard of TypeScript before? One, two, three. Okay, cool. So yeah, it's not such a bad topic then. Who has been writing softwares in JavaScript? Sorry? Could be anything. Yeah. Yeah, still software. And I have been doing it for like the last six, seven years now. I'm writing using JavaScript for front-end as well as for back-end. And I faced some challenges while working with JavaScript. Okay, and I would like you to share that pain with you. Okay, so for those who don't know what JavaScript is, it's a simple scripting language that isn't read in most of the browsers. The mainstream use of JavaScript initially was only for UICide, but then when Node.js came into picture, it has transformed JavaScript used only from UICide to the server side and mainstream programming. And who uses it? As we said, developers just like us, right? It's made for humans, but still sometimes it feels like it's not for humans. And why? Because of its dynamic nature, it's very powerful, right? It's very easy. There's very less learning curve because it's C-like language and everyone who starts with programming has some understanding of C-language or the syntax of C. That's why it's very similar and easy to understand. And what are the problems that you guys faced while working with JavaScript? Or did you ever face any problem working with JavaScript? Debugging. Debugging, yeah. Compilation errors are only an accurate time. Refactoring support is not there. That's right. That's true. Callback hail. Yes, it is there. Promise. Yeah, you just give promises. No one knows where it's going to fulfill. It's like dating for years and years. You're always under that thread. Is she going to marry me? So that's what happens. There is so much untreated creativity while you're developing code as well as when the code is in production. But at the same time, I love JavaScript because it's such a simple language to just begin with as well as it's too dynamic. You can do so many things with it. But what if there is a way to improve on what we already have? And TypeScript provides you support for those kind of problems. And the problems that you guys discussed, which are it's not type safe, right? For example, take a look at this code. What should be the answer of C? It's pretty simple, right? It's 9. Yeah? Why 40? It's 9, sorry. Yeah, but anyway, then one of my colleagues just came in and because we were working in a team, right, he just decided to write this line of code. It's perfectly fine. No one gives you error until it fails in production. Yeah. And I'll just scratch my head. Hey, it was working yesterday. What happened to it today? And then imagine this is hundreds of lines of code in a minified JS. Then good luck. Yeah. It can easily become complex. You mean doing A++ on this thing would return an error? Yeah, yes, yes. It'll give you error as soon as you do it. Correct, exactly. It will fail in compiles. It won't fail in compiles because there is no compilation happening. This is the word. Can you write? Yes, correct. But you won't get that error unless you see that code running in a browser and only if that particular path has been taken by the code. Let's say there was a condition and that path is only taken once a while. That is not covered by any test. Then you have one. So it can easily become complex. So who has written any optitude into JavaScript? Yeah. Does it look something like this? So you can see it. Unfortunately, if I increase the font, it won't fit in the slide. If I increase the contrast, hang on, don't worry. What I'll do is I'll show it in subline. I'll show that in subline. Yeah. Yeah, I'm opening in subline. Yeah, but it will run out of slide. This is a simple code for inheritance or extending a class. And such a beautiful code, right? So many understores, so many prototype things going on. And I don't know what's happening over here. Although when writing it feels, wow, it's so easy to inherit any class because it's so dynamic. You can do meta programming and all that. But when you just look at that code after one month, you don't know what's happening. So this is one of the problems. Let's do one thing. Let me stop the mirror. Yeah. So it can easily become complex, right? Then it's, again, hard to keep track of context. Who has been doing self is equal to this? Everyone, right? You can't run away from that. If you don't do it, you won't get the right context. And sometimes you can simply miss it. Yeah. Can you read this? Okay, let me, again, take this in the sublime then. Actually, could some of you guys come and track me because there's a nice space in here. Why don't you come and track me? Is there a slightly PowerPoint slide plugin for sublime? What do you think? What's wrong with this code? Is there anything wrong? Yes. And this here does not have any meaning, right? Because as soon as you enter into this function, the scope of this has changed. So that means for this function, this is this function. It is not the outer function. Correct. And this is a very common mistake that I have done countless times. And then you have to figure out, okay, hang on, let me correct that. But to get that feedback, you have to wait until you run the code. So this is, I call it, I like to call it context hell because it is hell. As you just go in to deep and then you suffer throughout the feedback cycle of the code. So why is it a long feedback cycle? Because you can't catch errors while you're writing code. You don't get to know about the mistake that you did unless you run it. And there can be many, you can miss any part that your code is taking while running it. And so you can realize about the errors after a long, long time. And in some cases, you won't even get any error. If you're working with JS and callbacks and some subcallbacks might be completely written up by NodeJS and you won't get any errors from it. And it's difficult to debug the minify.js as some of my friends already said. Now how TypeScript can help us? Let's see what it brings to the table. So what is TypeScript? In a single sentence, I would say TypeScript is a superset of JavaScript. What does it mean is, it provides you a way to write clean JavaScript by adding some functionality over JavaScript or some added syntactical sugar over JavaScript. All the code that you write in JavaScript is totally valid TypeScript because it is superset of JavaScript. And because it is superset, there is no learning curve at all. You can immediately start using it without learning any new syntax. But the real benefit of TypeScript will come when you start adding types into it. That way you will get static type checking with the static compilation. So in your editor, if you're trying to use any function or a method on a particular object which is not there, it will immediately throw you an error. Just like your Java language or any statically typed language. That way your feedback cycle will immediately reduce the value of writing code. And as I said, it provides syntactical sugar. All the code that you are using to create OOJS or a browser-safe OS, a browser-safe JS, it will be reduced. Although you will have to write code for adding types to the TypeScript classes, but in the long run if you see your code will look much cleaner and you don't iterate complex code. And when we'll see that there is no... you are not going to handle various codes, you are not going to handle prototype-related functionality, your code will immediately start becoming readable. Let me show an example of a TypeScript. Okay, strange. What are they? I want single-reout, but I want to see the files. Sidebar. Show open files. And then it's here. Okay. This one. You can drag from that video to this. You want to do the same. Yeah. So I am completely over on your project now. So that way I can simply show you. I don't know why this plugin is asking me to do this. Come on. Yeah. So look at this class. Okay. This is a clean JavaScript. Oh, God. Okay. It has constructor. It has class. If you want to extend this class, you can easily extend it into another class. And that's it. You don't have to worry about all the prototype hierarchy and how you're adding the functionality. Something wrong. Why is it asking me to do this? Yeah. Is it clean? Is it readable? I mean, the code that I showed you previously is the exact... It is doing the same thing. Is there something wrong with... There is something wrong with... No, no. Okay. You should not ask me. Come on. I have created the sublimit file. It is still asking me to do it. Okay. Leave it. Can I disable the plugin? Okay. Let's dive in later. But what I wanted to show you is an example of how a simple hierarchy would look like in JavaScript. It is scalable. Now what I mean by scalable, it will not help you to scale the ability of your server to handle many requests. What it will help you is, if you're working on a very large JavaScript project, you can easily separate it into various modules like frameworks... module framework like CommonJS or MDJS. That way, you can easily keep track of your classes. You can easily separate the functionality and respective points, and you can use it effectively because all those module frameworks are inherently supported in JavaScript. Can you see those are support engines? It can understand... When you say import some module, it can understand what you want to do. Then can you even understand the... Yes. So, yeah, it provides you a very good level of encapsulation with using classes, interfaces, as well as simply type definitions. With that, you can build your code in such a modular way that when you look at just the file system or the sidebar of your solution, you can know what's going to happen here. And this can still stay at the development mode, and when you are actually generating a Minipack.js, all these things will go away, and it will generate a clean.js file for you. Now, because of its static type nature, it provides the ability to write better software tools so that better IDE support because I know where each function belongs to which class, I can easily provide you refactoring support. I can keep track of scope, so I can easily navigate between various objects. I can rename, refactor. I can find the references. And I can give you static error checking. I can even provide you implicit, which was very difficult when you were using JavaScript. And that's why you will find that there is not a single IDE who provides you top-class support for JavaScript. I mean, there are support, but you can't say that it's 100% accurate. So this is what you can... it also supports generating source maps. That way, you can directly debug from your... you can debug to your actual TypeScript file, even though your output is minified.js or generated.js. If you put backpoint into TypeScript file, your breakpoint will hit over there because of the advantage of source map... source map file generation. So we'll go through... we'll see demo of each of it. Let's first understand the concepts for this time to tell us. And this is the solution to context hell problem because now you don't have to try context. So with the ability of anonymous functions, you can easily pass in any lambda and then that lambda will have the scope of the actual calling functions that you want it to have. Best part is it's open source, so community can make it even better. And we have already seen that there are so many contributors to this project. So when this initially started in Microsoft Research, it was in the... it was in the preview mode, but as it went to open source, immediately people started contributing to fix lots of its issues and we saw that last year that they released TypeScript 1.0, which is now a officially supported version in many IDs. One of... the best part about JavaScript is it compiles... TypeScript is... it compiles two ECMAScript 6 specification of JavaScript so that the JavaScript output that you will get or the JavaScript that you are seeing is compatible or it's made for future, it's compatible for future. So all the... all the types like classes, interfaces, all these features are coming in EC6 and you will already start using them when you use TypeScript. It is adopting many modern language features such as... generics. So in JavaScript it's not possible to add generics, but with TypeScript you can do that. You can have optional... default parameters, optional parameters and so many things. So let's dive into some... some code. So JavaScript provides us types like string, right? Number, boolean and object and arrays. Yeah? And TypeScript provides you exactly those things. It doesn't provide you anything extra because it has to compile to JavaScript. But... this is how you will see that you can create a variable of certain type. So is done is a variable of type boolean. So with boolean and then specifying the type, you can tell your editor that I want to use this variable as boolean. So if I try to assign string value to it, my editor will throw me an error. Then there are string, the array and this is another syntax for defining array which is using generics. This way you can create any array of complex type as well and your compiler will keep track of it. So when you just look at the TypeScript it is totally new language. But it compiles to JavaScript. So just the way Java code or Ruby code compiles to bytecode right? It compiles to JavaScript. Compiles yes. Because once it has compiled, your browser is not seeing TypeScript. Browser doesn't understand TypeScript. What browser understands is the JavaScript. So once you get the output, you are going to serve that output for your production code. So when you compile and you compile the JavaScript and you compile? Yes. Yeah, you compile the JavaScript and then deploy. So it's like compile and minify and then deploy? You can do minification. Yeah, compile and minify and then deploy. So it's same as copy script. It generates JavaScript and that's what you say in the browser. Or GWT, it creates the JavaScript and then... I think it happens at runtime and sometimes it is slow, right? Not really runtime. Is it compiles? Yeah. So here it is one time you... Yes. Now there are additional types like enumerations. Then you have any type, right? It is like object in Java and this allows you to get benefit out of the dynamic nature of JavaScript. So we are not getting any good features of Java here. It is still there. But it is like a two two-headed sword. You can cut your hand as well. If you don't you do use dynamics properly. So I usually discourage use of any but if you want to use it you can still use it. Then you have a special type which is called as void and you will use that when function is not returning anything. And all these type annotations are completely unnecessary. But if you don't give those types, your editor won't understand what type you want to use. Although it has type inference as well. For example here, if I don't sorry, here if I don't put color type here. For C. And if I am assigning value color.green to it, it will automatically understand that I want to use that variable as color. And then from that point onwards, the editor will start tracking it as color. So there is type inference building. Now let's take a look at interfaces. Interfaces are very important concept in typescript because I would say everything is built around it. Around the interfaces because interfaces are treated as contracts and how a particular object is coming to contact is decided based on the structural typing or it is also called as duck typing. So if class animal has a method work that means it can follow interface I-walkable or just walkable interface. You don't have to explicitly say that this class is implementing that interface. TypeScript is automatically going to check if you are whenever you are trying to ask that animal into walkable if it supports all the methods and member of walkable, then it is safely cast to walkable. So this is called as structural typing or duck typing. So it becomes structural typing in green to name parameter and type to type written type to it. But you can also add additional features as well. So here I can define an interface as you would do it in Java with the key interface in the name of the interface and all the members which will come in that interface. And then you see here that let's say I have a function which is draw shape it takes parameter and while creating this function I only need to tell it that it has to have shape. I don't care what object it is but it has to follow the contract which is shape but I can use color member on it. And if you try to pass something else your compiler will throw it at you. So this way you will you will you will not enjoy the gazing game as you would do when using javascript frameworks. For example when Chinmay was showing you Casper.js you don't know what method it is. As I said he has to go to documentation to see what syntax it is what parameters does it take am I giving any wrong parameter to it right. But with this statically typing you can get benefit. You don't have to play the gazing game. I can I can even specify just the structure that I am expecting instead of specifying the interface. So here I am saying that I want a parameter which has to have color member in it color property in it. So here I am not specifying an interface I am only specifying the structure of the argument that I am expecting. Now interfaces can be also applied to a function because functions are the first class javascript and that's why you will see that there are interfaces for function as well. So what this particular interface is telling me that this is an interface on function because there are brackets or round brackets surrounding the parameters. So this is a function which takes a parameter called as message of time string and returns boolean. And then I can use this interface wherever I am trying to use higher order functions. So here let's say this is a function called as getData and one error I just want to invoke error callback. Now what an error callback is this is the definition of error callback that it has to take message and should return boolean. And you will see that suddenly your code becomes so elegant and readable. And I can safely say invoke the error here with the string argument. And how many time did you guys use or try to see the jQuery documentation while calling jQuery hijacks. Which parameter goes where, what are the error, does error comes first or does data comes first. I had to do it all the time. I couldn't ever remember what comes first. And this way I can call this function by passing it the argument or the callback function which says alert message. It is following same constraints which are specified by my contract. Correct? Although it is not exactly 100% accurate because I am not returning anything from this function. So this comparison fail I just spot this mistake. So you will see that our contract says that it should return boolean. But here I am not returning any boolean from this function. No it will fail. I mean, so yeah one interesting thing is even though our comparison is failing you are always getting JavaScript output. So that way if you want to live with the errors you are still fine. You will still be able to generate your mini-pages and you will still be able to run your test with the rest of the code. You might go down there to support other libraries to import it. Yeah, let's talk about that later. But yeah it could be initially when they are developing TypeScript that was their intention. But sometimes it helps to get the error output and understand what is happening over here. Just for educational purposes. If I wrote error-ness TypeScript what will it be out there? Now let's take a look at classes. So you can clear classes with keyword class which is followed by the class name and then the curly brackets. You will see that here I can even specify a constructor and constructor can take a number of arguments. You can specify the class members. One thing you will have to you will see here that to access all the class members I have to use this keyword. I cannot simply say grating over here because the scope it needs to track the scope of the variable. That's why you need to specify this and you can create instance of your class with a new keyword. Okay, you have defined a thread. Yes, it is inferred. In this grid right? Yeah it is inferred. So whenever I try to look up for grid it will tell me that this grid function returns a string. Now if you want to implement an interface you could simply say implement interface just like Java. It's much similar to Java right? Java and Scala and they have mixed all the languages. Okay, if you extend from an existing class or an interface you can do it with the extends keyword. And then to access your super you will use super. You will use super keyword to access any methods from your super class. So here I all the functions and members of the cat will be accessible. So there are only two types of accessors right? Which is public and private although it is not really private but it's private for scope programming and then there is nothing called a just protected which is only accessible to the audience. So default is public so as you saw that the grid method did not have any access specific file. So let's dive into functions because they can be interesting sometimes. So to define a function you can use a function keyword but that is again optional. You can simply say add and it will slow down and then you can specify the arguments with the types and at the end you can even specify the return type of the function with the columns. Even if you don't specify any of this the compiler will try to infer the types. Now the second type of function is the anonymous function where you don't start the function with the name. So here it's just an anonymous function which is just line of code and then you are assigning that anonymous function to a variable called as my add. Parameters you can specify optional parameters with question mark. That means you can call this build name either by passing just by the first name or by passing first name and last name. And you can also have a specified default parameter when in conjunction with the optional parameter if you want to have it. You will just say last name is equal to smith and then you can still call this build name function with just first name and it will automatically take the value of last name from this default value. It becomes more interesting when you involve generics, right? You can do now suddenly the whole new door of having different design patterns is open to JavaScript so now you can implement so many design patterns which are talking through contracts and generics and you can implement whatever you were doing with any standard object oriented programming language like Java or C sharp. So you can use t to specify a generic type and if you want to put some constraint on the generic type you can do that as well. Here I am making sure that the t that I am going to get here it has to extend from length wise. Nothing delay like JavaScript doesn't have anything in the runtime generic nature it's just really complicated. Yes this is only for the compilation time because JavaScript doesn't understand t, right? Yeah and as I said you can manage your large JavaScript project with the help of modules. By default there is there's one module type which is called an internal module ok. This you can use while writing your code only from the client perspective. Let's say your JavaScript is only going to get executed in the browser for client side then you can use this kind of module structure. It doesn't require any additional libraries like require.js or comps.js libraries. This is supported by the language itself. So if I want to access this particular class I will have to say expert.store session. So this is giving you a way to organize your code. Now you are not just dependent on setting into file but even in one file you can organize your code with different modules. Even I can write the module in any other file. Yeah you can still access it. So while you are playing the run time, so compared to when you are using require or something. No so when you are using internal modules when you are not importing anything right you use import to import libraries or external modules but that you will use when you are working with server side code like as in Node.js but when you are using only clients ultimately it's one JavaScript file so it doesn't need anything extra. It is kind of a namespace. Can I have a class that might be called JavaScript file? Yes and you can still refer to it. Yes. Just like logical namespaces. Yes. So in my other class JavaScript file I just have to say and all the two classes will be available for you. So it will come it will so export means I want this class to be visible from outside of this module. Okay. If you don't put export you will not be able to see that class from outside of that module. Can you say outside of the module outside of the file? No no outside of the module not the file. Okay. What is the use of the module? For the logical for the logical separation right? Yes. So you might you might still want to have private classes which are only relevant for that internal module which are not visible to your module. Yeah. Let's say I am building a library right a public library and I only want to expose certain number of APIs to the outside world. They won't be able to see all the private classes in my module. Finally it is all about JavaScript. Yes. But no you can still create privates by writing some hacked JavaScript which is not accessible from outside world. So if you don't put anything on the prototype right it is not directly accessible from the object of that function. So at least protected I can find a very very bad way I can achieve this module. Yes. Now there is another way to create use modules it is called as external modules. There are two kinds of external module framework that TypeScript support which is or the specification of the framework. So there is common just specification and there is AMD specification. And at the compile time you can tell it which kind of not compile time. But as a compile configuration you can tell it what kind of modules you are working with. Do you want to be use your modules as common just specifications or AMD specification. For example take a look at this line. So it is saying that I require this module. Okay. If you are using common js then it will start looking for the file with this name. Okay. And that file will not have any word like module because the compile because you can just convert the whole file into one module and all the classes which are there they are available for that module. As in Node.js you will see that. And that way all the classes which are there in that file are now aliased with this particular module name. The advantage of this is let's say me and Chilmay are building one library he has the similar functions as well as I have the same functions with the same name. And if you and you are the person who is using both of our files or both of our JavaScript files then you can decide under which name every module every class should do. This gives you more ability to have a module define the modules for your project. Now what if many JS libraries should we throw them all the way and start using TypeScript library? No. What you can do is you can only create a definition file for all those libraries and then you tell compiler about your definition file and the runtime implementation of the definition can be your JS file and what people have done is they have created the definition files for all the popular friends. Not all, but more than 500 popular friends. So anything you can think today has a definition file. There is a definition called Angular file for Casper for phantom or Amber What does it mean as a definition file? Yes. So definition file only bears the types. So here I am not creating a class. I am just declaring a class which should look like this. It will have a parameter less constructable and it will have a public method file. This is a definition. This is not an implementation. Right? So real definition will be by the actual library. Yes. But let's say there is a scenario like you know in Sanjay, they do have a definition model but later they have created more classes of functions. Yes. And so we want to use the upgraded one. So either we have to wait for a type script to come with the latest version of the definition file. Yeah. It is a drop ever. No, no. You don't have to wait because there is a tool whenever you can generate, you want to generate, you can generate it. So we have to go and we have to scan which files of this class is the method we are going to use in our project and we have to expand this definition. No, no. You can do that tool. You can completely pass in a JavaScript file and it will generate a definition file for you. Yeah. Right. But this will, if it can infer the type it will infer it. But if it cannot infer the type it will input any. That means your code will still work or the new functionality was added it will still work. But then you will not get any advantage of having it type script file. So it is one of the methods of whoever comes with the type. But because it is community driven people are really whenever there is a new framework people will add new type definitions to it. And you can find all those type definitions of this. Definitely type.org site. So for example, yeah. So this is a if you want to learn more about type script you can go to typescriptlang.org you can play with an interactive editor over there which will show you a type script and a compiled version of it of the type script site by site. Yeah. And for all the definition leverage you can go to definitely type.org. So let's let's see what those type definition look like. So this is not this one. This is definitely type github repository. And I was just going through phantom.js definition how does it look and all that. So there are so many definitions already available for this framework. You can just scroll through them find whatever you want you are interested in just get it. There is a if you are using .NET there is a support. There is a new get package for every definition. You can easily import all this definition into your project and they can be upgraded with versions. I am sure there is something for Bower as well. Yeah. Too many definitions. And to refer yeah. This is one of the parts. So let's say so I think someone asked the question that what if my classes are split between files and all that how my compiler will understand that this particular class is using another class. So you can you can put this line at the top of your file to compiler that I am referring to this particular file. So if you are looking up for any classes function also consider this file for that lookup. It's like an import statement in Java. So here it can be definition it can be a class but here it's a file name so that file name can hold many classes can hold many definitions. So basically the file saved in a .t.t. No, no. Type script files get saved with only .t but here it's the definition file and I think this is the this is the standard for storing creating the definition file. So all the definition file will end up with .t.t.s. So what is the way to get this .t.t.s and then it's supposed to and be No, so as I said you can get them from the definitely type .t. And there is support in the new get package manager for .net or not .net but visual studio can say that and I think in the Bower Bower is another package manager, right? So you can get them in there as well and it is constantly it is updating you will see that most of the takes are like days I go not months or years. I can go inside that you will find visions. There was one definition for this one. Yeah. So here it is clearly this particular definition on this hand is based on is for this particular version of the why you are yeah, then I think you can whoever is maintaining the link, right? Yeah. Yeah, you can see the history of this if you want but yeah, you wanted me to open this. I was just, you know, curiously thinking because most of the just started coming like so probably for example, why do I start using this one but in real problem testing, right? We just use this with module of why I'm just giving you an example, right? So maybe my board is using some extra models. So you will see that if you're the definition file that you are using I mean, nobody can go and create so many versions of the same but remember, right? So I think I want to choose only a couple of modules a couple of UI gadgets but just have all of that provided by just supported by the specific that's it, right? Correct. So I was just having the rough guess that my developers they will start using that so when we are dealing in the SQL page Yes, so what you can do is you can edit this definition file so that for example I don't want this function to be available, right? I can just remove it from the definition file and it won't be available for your typescript compilation. So all this file we have to download it locally and we can make our own local persons and while creating real JavaScript it will simply pass those Yes, you can do that but package managers are becoming more intelligent to keep track of various versions and only downloading them when it is required Yes. So this is definitely type I think go to typescriptlang.op you can just play with it online if you don't have any fancy editor So they have different types that you can have definitions for this you can go to the directory that you want to see if I search for Angular then we are dealing with it for intelligent Let's again look to know that we can also go and update it Yes, you can also go and update but you have to then make sure that that definition file itself is valid if you just remove it and then there are errors in the definition file you will have to add that file So for example let me go to AngularJS and there is a legacy folder which has all the legacy Angular definitions Let's see this playground So here you can write whatever you want and then it will be available for you to play with So for example let's say I want to create class not section but let's call it talk and you will see that this is the JavaScript interface Ultimately it just creates a function and this is the top function and another this function and let's say if it has a properly called speaker So right now there is no meaning of it in the JavaScript unless you start using it So another good feature of JavaScript is you can create properties in the constructor itself as a constructor argument So what this will do is the meaning of this is whenever you are creating new talk it takes a speaker and this speaker will automatically be created we created getters and setters over here there will be getters and setters for this speaker you don't have to say this dot speaker is equal to the value that we just come over here and when you when you start using that particular variable then only it will appear in your JavaScript it won't create unnecessary JavaScript for the things which are not even getting used and then I can simply have a method open okay which you can access this dot speaker or anything like that so you will see that whenever I created open function it added that function on the prototype of that talk function so if you wanted to write this JavaScript which is as given in the JavaScript good part book you can make mistakes while writing this kind of tool but here it's really simple because we are used to writing Java tool and when you want to create new talk you just say yeah but here you will see that it is showing an error because I did not provided the parameter which is required for the constructor so I will provide a speaker and then I can safely create this object now when you try to access this particular member because of the static type nature you immediately get intelligence saying what are the available members on this particular object and what is the function so it has an open function and a speaker member available if I try to do something extra on it it will show me an error that who does not exist on the this static has nothing to help you also where it form modules so yeah because this error is coming right that you will see that is coming from the compiler so any editor which is using the static compiler can show you that particular help or the error message any doubt any questions so far because whatever I wanted to talk about is finished but if you want me to demonstrate it I can demonstrate it even further that what is the example so yes correct so let me run okay let's take this example I am clicking so many things so we have this code over here and this is my main file come on so let me start compiling these things okay to do that let me go to that particular folder and start the server so I am at the watch task over here so that whenever my files change it is going to compile the type script right and it has also started a server yeah you will see that now here the code which was done in the main class which is getting executed from my index file is being executed so I am only printing out the messages from that particular file over here which is bird.move bird.fly and then human.move and you will see that it is printing the output according to that okay now let's see if I want to debug this particular JavaScript okay so I am calling move on the board so my final output is this main javascript file which is one javascript file compiled out of all of those files you can specify compiler do you want to either have one file or you want to have multiple separated file but I wanted to show the debugging probability that's why I am generating one file and this something so you will see that my color has generated three kind of files for each ts file one is the js one is the js file okay other is the map file okay what is this map file is this map file is being used by all the modern browsers to tell that whatever the source that you are going to see from this file the it is located at this place okay and the mapping for that source is this now I don't understand what this language is but somehow it allows browser to map between the the code in this main file okay and the code in the generated javascript file now I will have to read more about how this source mapping works but it works let me show you how okay let's say our animal let me generate the output again I am going to delete this folder okay I will just come on I should not have grid my sublime version I wanted to trigger the compilation okay I will do it from here itself okay it is compiling it you will see that it has generated the js okay yeah it has created this main script file and then this is the map file and you will see that it has mapped to all those different ts files yeah now let me open it here oh yeah I haven't started it you will see that when Chrome did not fetch any other ts file yet okay it only got this main script and the main script map file now I want to debug a particular file so what I will do here is go click on any other file which is I have mapped this folder in my Chrome okay let me go to my main file and let me put a break point here yeah I have mapped it into this Chrome developer that particular physical folder it will help us navigating how can we do this how can we do this I want to map it here you can map many folders in Chrome no no so this is this mapping right I went to Chrome and I said I want to map this particular folder at folder to workspace I just added the physical location of those folders right and then because of break point if I try to execute it it should get one more set of constraints is it not executing it properly let me remove the folder try again yeah now I see source.ts over here and you will see that in the main.ts file our break point has been so based on the information given in the source map Chrome understood where I can find my sources and it got this folder automatically in my Chrome developer toolbar which is source.ts and then it mapped the code in the main.ts file to this actual typescript files and then I am able to debug it over here when you added the ds folder to workspace then Chrome recognized that no no that was something I did wrong I should not added that and that's why I removed it and now Chrome automatically went and fetched this source file so let's say yeah because of the mapping file in that you are saying that Chrome is downloading many source files yeah but it will only download it when you want to debug it so this was another thing I wanted to show right so let's say we did not have any we don't have any break point anywhere right we are not debugging anything and now if you see my network tab and let me load and you will see that I have break point only in BERT and that's why it has only loaded the BERT.ts file and all other edge files can you go to source and open BERT.ts file and you come back to that yes when you ask it to open it will automatically automatically come there so here it has now loaded main.ts file so it is not prematurely fetching all the files it is only when there is some need and this mapping because javascript and we can use it for any web server right so for example now let me open this in my firefox you will be able to get the same functionality in all the modern browsers my question is it supported by one process or it will be working in any web browser any server any web server nobody just I am using so that I could I wanted to do something more but I didn't do it so if you see the net tab firefox it just got the main.script file and in the javascript I am not used to this but you should be so in the script so I will have to figure out how to do it in Chrome as well but yeah you can do it in Chrome because source map file is a very pretty good standard and then you can get that so how do you generate that source file I think so I told the compiler to generate that okay now let's go into all the details like how you can what are the different options that you can configure in the compiler this kind what will be the help in that in my fresh network how can I go ahead and start using tag to our script yeah so you can for that you can install typescript using the typescript tools on them using the npm packages as well as the typescript compiler and that's it so you need only these two things typescript compiler and then typescript tools compiler can be independent but the typescript tools which supports the additional facilities is installed on the node and then I am using here grunt to execute my typescript compilation and this is the configuration for that compilation which is I am telling it where are my typescript files okay what reference file to generate tell you I will talk about this after a while then where is the output of my typescript file so I won't so because I wanted to generate in one file I specified the actual file name but if you select the output directory it will generate the multiple js files for each typescript file then this is the watch target if you want it to continue compile and keep watch on it but the watch which comes with this grunt task didn't work properly that's why I am using the separate different watch module then this is the ECMAScript version that you want to target so for older browser who does not understand ECMAScript 5 you can still compile to old ECMAScript 3 and when ECMAScript 6 becomes standard you can compile to ECMAScript 6 so it will output whatever generated is ECMAScript 3 output then what is the what kind of modules are you using any module which are external modules that's why I have not configured it then source map I am asking it to generate the source map and then I am asking it to generate the declaration files as well and remove comment is something which is so you will for example this reference there are some pre-compiler pre-processor directives that you can use the typescript files and then you can remove those comments and pre-processor from the generated output and that's how it generated the map file for all my output let me see if I can provide the syntax JavaScript syntax but as soon as I do that then becomes one long file same thing with you can here ask it to minify the generated output as well another minification base over it but this is the generated output and this is the definition so let's see we are building in multiple projects of working together I am also working on one module he is also working on another module so we both can only talk about each other's implementation we both can work on each other's code separately and we can share our declaration files so this is the declaration file for the code that we wrote cool? so once you have this code in place right? I need to fix this this yeah I will push that this is another code that I wrote on video studio this is using express and node.js and here I am using tags on the server side that was the example of purely using it on the client side this is the example of using it on the server side so I have my controllers mongo's user model so everything that you are saying is a type script code and I am using the type definitions from mongo's from express and you will see that I get the type intermissions come on not the dynamic model but let's say request or response I am telling that what is the type of response that I have not specified any type on the request so when I try to get any information about the request I don't know what it is just some dynamic stuff if you try to hover over it the type of it is and then for response I am going to do the type of response so I get all the available method on the response and it is a documentation about what does it do yeah as well as what are that argument does it expect there are examples so all the documentation from that libraries are available here yes you won't be confused while using those libraries yes and you are saying whatever input that you are passing to is at least getting checked by the compiler you are not passing argument in the wrong order yeah you can have it yes yes that is how we got the information about response right because response is the express object let's say we are going to the mongo model like this over here yeah I can get information about it what are the different method available on that mongo model right so easy you don't have to move on to the documentation you also know about the number of arguments what are the option argument if there is any default value what is the default value yes idea I admit but there are a lot of people who are building the for the community addition but they always want to catch some money right they first go to and then comes into community we have the support for sublime as well but somehow my sublime is broken at the moment but if you install sublime plugin called as t3s or better type script you will get these pictures in sublime as well you have it for eclipse there is there is another plugin for eclipse which does all this syntax highlighting type checking and compilation power and I can make an easily I can see that all the code that I am writing here is much more clean now and in the future versions what they are trying to do is they are if any of you aware of a synchronous programming in C sharp so for example let's say ok let's say this is find by id this is a function and assume that this is a this is a synchronous function so right now what and that's why we have to pass it all back and then whenever that function is complete it is going to return invoke that call back but with the new features what you can do it in type script is this is your result is equal to user.model. find by id ok and then you will give it some some id and you can only tell it to wait until the result comes and then it's going to return the result back to you no it is not this is how you do a synchronous programming in C sharp you don't have to say call back and then promise and promise and promise and promise so what happens in C sharp is as soon as the control sees that it's waiting for something thread immediately returns from there and start doing something else whenever the result comes it the invoke action model then gives the handle back to that thread which was initially executing this and then your execution will continue beyond this point so it's too easy in C sharp and they are trying to bring the same thing in type script so that way you will have to the synchronous programming will become much much beautiful I won't say easier but beautiful sorry I am not much aware about workload.js I am just wondering because we just saw demo where you were able to debug and everything using Chrome and then you were able to do desktop watch and something and we can say how this X will be able to debug in server side so that particular feature right that was again provided by Chrome that is something exclusively that's particular Chrome web development tools are providing but as we saw that with the source might we can do the debugging on the client side you can similarly do you should be able to do it on the server side as well but I don't think that feature is here supported in the Chrome for type script no I didn't do that I haven't done extensive note program Chinmay, are you aware of this as long as it's there I don't think there will be too much pain yes exactly if you don't understand everything there should be let me see if I can do let me let me let me start my Mongo and then let me open it in Chrome and let's see if it is generating any source maps I don't think it is generating it so yeah it is generating the source maps so let's see if we can debug it I have put breakpoint in my login ok so I am in my breakpoint so I can see information about what does request contains what was my everything I can see over here I can come here I can even inspect what is inside my request body I can even step in so all these features are available here because it is because I wanted to debug from there so I have attached my debugger so I am now using my debugger rather than Chrome being my debugger right yeah because my debugger was attached on that code if you see here not here not somehow I don't know what we just should have did because I don't know the internals of it because if it was how we would have to jwd ok I am assuming similarly with the script JavaScript engine how you are able to work in the browser I think that might be a standard so no no server is server is express so this is my server right and you will see that the debugger is listening on this code so any debugging tool now connect to this code and then start so thank you guys I hope this was helpful in some way and you will start using type script because it will be easier yeah I mean initially while starting you said that so many different papers are here like copy script and type script so just wondering in case you get a chance to copy yes so in what 3-4 years right I am not sure but I tried to learn it once and the output that it generated was not made for you I mean at least I couldn't read it so I came up on that when I know you there might be many copy script plans here but I never liked it and that's why I didn't see any of our projects which were happening here they are not using type script I have used jwt once even was then copy script that was for aliens completely all people from Google were really really intelligent but I couldn't work with that as well so that's why all our projects are now using plain javascript but now we are now learning about this new type script language we will use it in our future projects how friendly it was for you to include playing with the multiple javascript and to be frank I did not compare them side by side I am just giving you an understanding you are using javascript and then there are so many other people which help you creating quick syntaxes initially you probably are using that that we should respect writing type script because it's like you create that it's easy to write also so have you got a chance to start from scratch I started from scratch I didn't really compare what will be the migration from one framework to another but yeah I help so what I did was for an exercise I had a complete javascript project and then I decided now I want to and it was damn simple because it is just super sort of javascript so all my code was still valid and I could do incremental type addition into my code rather than changing whole code at once you find some bugs which are not there yes yes in fact yes that was that was a finding when me and my pair were doing that exercise we found a bug which we did not realize when we had javascript in place so and that made me even love type script and so I mean it's kind of I mean like existing javascript project also I can use it because in the run I can add a task to say look up all the type script files yes so that people who are interested can write a type script they can write javascript so yeah you can take that incremental migration approach you don't have to change your tools you don't have to change your tactics you don't have to learn something radically new you don't have to learn new syntax that's why it's easy to migrate to javascript projects and many many big projects are now migrating to javascript because when you are working with large teams it becomes easy to handle errors at compile time and it stops you from getting many bugs in the production site so you will find many many game engines which are written in javascript they are getting migrated to type script many mathematical libraries which they are getting migrated to type script so there are many examples out there give it a try to like it use it there will be another framework in just a couple of years I am sure javascript has that power or traction whenever someone start thinking about creating new they will create something new in javascript so you do something in javascript right either it could be small kids or matured person which is xmascript 6 but that is still not having a statically type yeah so you will be having interfaces you will be having extents, implements, class all those things that we saw here right people love javascript so they don't have to create a class or only speak before a pressure right correct cool I need to give some time to next week as well I am not canceling any more questions otherwise he will kill me can I always be in the room of twitter also yeah but I am not active on twitter that's how you will be yeah so you can reach me on twitter or my skype id is pradeep.woodacre I am online on skype all the time so that's the best way to reach me anytime pradeep.woodacre and it's pradeep with I love you thank you