 Okay, so welcome to TypeScript Again, my name is Doris Chen Have a little more detail on this slide So I normally leave my blog address And my email which is doors.chainanimigasum.com Oh, you could always reach me on Twitter at a DorisT-Chain Make sure you put a T there because I don't know who took DorisChain But I got some Comprehensives and I've never replied but I actually I never got it so DorisT-Chain That's my Twitter and so my blog I put all the presentation Technical demo on to my blog, but it is a long URL I actually can't remember that either. So if you do a search Doris space MSDN The probably the top two links one of the link is my blog address So that's a little easy to remember Okay, so I'm a web developer. I have been working on the web space development for many many years and I joined Microsoft about six years ago as a developer evangelist focus on the web space before that I was with some micro system as a Java evangelist for another ten years So I'm really from Java community open source community and really happy to work with you further on that so I like to get a little bit idea about your background How many of you here already have some exposure to Java script? Oh, very good. Awesome. How about a TypeScript? Some of you. Okay. Cool. All right. So let's actually get a Star Wars So first of all How many you never heard about Angular? That's not right. So Angular 2 is actually using TypeScript for their implementation So if you start with working with Angular 2 TypeScript is probably the language that you want to be familiar with and how many you actually using Angular to do development Okay, very good Okay, so we have a pretty busy agenda and I know I have about a you know A half an hour in a 40 minutes to do the talk So I'm gonna keep it kind of like a short but first of all a lot of people always ask me the first questions Why TypeScript, right? So we're gonna talk about that. Why we need a TypeScript? Second thing is what exactly is TypeScript? If you never tried a TypeScript What is your learning curve? How bad it is, right? We talk about that And then what's new in TypeScript because TypeScript 2.0 just released So I really want you to take advantage of all the new features in TypeScript 2.0 And also we're gonna talk about a Common request for me is people usually say hmm. I want to see some demo For TypeScript to work with an Angular app as well as a React app, right? How many of you actually are using React? Okay, very cool. Okay, so let's get in there So first thing first, why TypeScript, right? Because two years ago when I first heard about a TypeScript I actually have the same concern. I was like, hmm, we don't need another scripting language Do we, right? What is that, right? So but the more I look into that the more I fall in love with TypeScript So the idea here is we want developers to be able to focus on creating Amazing things, right? So any developers, if you start any development, you're more likely, what interests you more is Trying to develop some new feature, some new content for the project, rather than Try to understand some other people's code Try to do bug fix or try to maintain the code in a really tedious way, isn't it? So the idea behind is really try to give you more time to work on the things you're most interested Now let's start with something called monocle. How many of you heard about a monocle? It's basically a browser based editor and then it is actually started with JavaScript so at a Microsoft that the whole team is working on and contributing to monocle and And this is actually the foundation of Another tool called visual studio code. How many you heard about visual studio code very good So I'm gonna use it a lot for all my demo and the visual studio code is not just a variable on Windows It also available on Mac and Linux and the most important things. It's a free download. It's free for everybody, right? So we started with monocle implementation. So the monocle project is getting larger and larger So if you look at a typical JavaScript project, you think one southern line is a lot of lines already How about a three thousand five thousand or seven thousand, right? So we see this tendency for monocle project to grow larger and the larger I would say if your project is within one southern lines of code It's still manageable meaning it's probably not too bad to understand it It's probably not too bad to adding some new feature into it But once your project is go beyond one thousand three thousand seven thousand then most of a time You don't even bother to try to understand everything inside a project You would just say if I want to add a feature new feature I will just do a wrapper around the existing thing right and adding something into it so that I don't break the previous code Right, so this is a lot of people just doing it No, even though we know it's not a best practice But just you don't want to break something and introduce more bugs and then spending more time to fix bugs So so because of that we were thinking what it would be a better way of doing things, right? So we did some experiment we take the monocle project as a sample take some statistics And we figure out people spend a 70% of the time just to understand the project itself and Then another 25% to maintain that project only five percent of the time is spending to really create a new feature adding new feature into it So if you look at all the number This is probably not ideal and I would say monocle project is not only one We sort of like it has this kind of number a lot of project larger project also has similar issue So the goal here for us to have another set of Like a super set of JavaScript language is actually this is a rational behind So we want to reduce the time from 70% to 65% to just understand code 20% to maintain the code Give 10% or more on to the creation which is 15% to develop a new code So this is really what we we try to do for monocle project And this is where I show the motivation behind to have type script So type script is really for you to spending more time To develop a new things last time to worry about all the maintenance and understanding so Next thing is what is type script right by definition type script is a type to superset of JavaScript that will comp compiles into plan old JavaScript so basically you're still working with JavaScript But instead of JavaScript we adding more static types onto the existing JavaScript So hence if you go to Type script that you are out. This is a central location if you want to know more about type script It is basically a statically type of superset why it is a statically Typed superset is important because whenever you have statically typed thing You will actually be able to provide the better tooling Right because if you look at a JavaScript, there's another tools available But because it lacks of the static type that feature so a lot of times It's not a really easy for two to support that now we have Type script so it's very much static typed. It's adding the types on top of JavaScript So that's why we could have tools such as visual studio code. We could take advantage of that, right? So the other thing is because of that we actually could scale JavaScript project just like a monocle right right now is you know multiple Thousand lines of code right but with type script we don't feel it's that difficult to maintain and to understand and Again, you know because it's after the comparison it compiled to all the JavaScript. So we'll run everywhere Now so if we take a look the site you could see this is the very first thing for TypeScript and What's good about that is it's completely open sourced. You could actually see the source code on GitHub So if you click on that a particular link you could see exactly What's on get up? So this is all the you know Implementation detail of TypeScript and then you feature anything support you could always take take a look from GitHub Are you all familiar with GitHub? Very good. So that's awesome Okay, so and if you never try the TypeScript if you want to download and install it's very simple Just two lines of command line one is use NPM right to install the TypeScript The other thing is called TSC to compile So these are the sort of like the very first two things you want to know for TypeScript Once you're there you actually could have started with TypeScript development okay, so I Think it's probably better if I could just show you a demo with TypeScript so you could understand much better Okay, so let's move on Visual Studio code. This is a code. All right. So and again, it's free and It also asked me to upgrade so it actually providing those automatically upgrade you could do it all the time so the current version is 2.02 that's my current TypeScript version and What we want to look into is this typical One called the demo one. This is my Particular file and if you're looking to that I don't I don't want to bore you with a detail But this is basically a very simple typical JavaScript implementation Which is I check the weight of particular shipment and then checking the email sending the email sending the updates But one thing I want you to pay attention is if you're looking to this particular JavaScript file In this editor you don't see an error message or warnings at all right So what if I change this can people see on the back because I wasn't quite sure people could see in our back You could actually feel free to sit in the front Framero's are not going to cost more Okay, so I'm going to change this Java script to TypeScript So immediately this will become a TypeScript file and if you look at that right? So when I change to TS instead of JS what I see here is I do have more warning message It does say ah look at the readable So what's what's what's the problem with readable basically? It says it's not assigned to a parameter for this property descriptor So it has a problem with this readable, but remember in the Java script file I don't see an error message isn't it right so with TypeScript it do a pre-checking so we know this particular one is not there Okay, how do we fix it so we could actually go to this define property which is a method and We just go to the definition and you will see this is definition file to defining that a defined property And we'll go through that method you will see there's another attribute called property descriptor So I'm going to look into the definition of this and you will see very easily That's there is a writable parameter there instead of what I put there readable Right, so with this you could actually go back to say ah, this is not a readable this should be Now the little warning sign is gone, right? So that's good. Let's save it The next thing we want to look into is there's another little warning message here. It says the ship wait So what it says it says cannot be applied to type to a number, right? So we were saying hmm ship wait. I thought it's a function, right? It's a method with return, which is here return Something like a number, right? But why it's not a really It's company the reason this company is it forget to put Parenthesis which is a very common mistake in JavaScript board if you don't put if you you think you called a function But if you actually didn't put a parenthesis or whatever it wouldn't come pray it will still say it's okay But with TypeScript, which is more strictly typed it would tell you immediately there's something wrong, right? So you don't have to like typical JavaScript implementation You don't have to wait until a runtime and you see bunch of you probably wouldn't see the error message It because JavaScript you wouldn't be able to see the compilation error message You probably just see the end result either it's a blank screen or you see some error code, right? And then you don't know what's going on. You still have to roll back. Okay, so this at least I know I'm not making the correct a function call so I correct here, right? Okay, so another one which is company here is it says this trim it says this trim should Does not work with a number type so we see what's going on here So let's let's look into this function, which is actually defining this bell and the IDX So for each that a function it's expecting a value and a number Now the way we put it is actually we reverse order, right? So that's why we actually getting the comprehensive value is a number. It cannot do trip. Okay, so that's a reverse it Now those things is actually pretty Common when you're doing JavaScript development because you probably wouldn't be able to figure out exactly what's going on until the runtime But now look at it. It's all gone, right? so very nice, so I save it and I will be able to just to compile it, right? So that's that's pretty good, isn't it now How many of you are actually working with a project which was a multiple JavaScript in the project? Okay, so if that's the case you probably just say, ah, this is just kind of Mickey Mouse kind of file Yeah, you want me to work with but I want to work with a real project. What should I do next? So you look into that I could actually very easy with this visual studio to you could open a command line and You could actually just do TSC dash dash in it so what that what gives you is Default TS configuration file for that Now what's in there? The most important thing you want to pay attention is basically you will say the target of Javascript target for ECMA 6 5 or ECMA 6 some other number, right? But default is ECMA 6 5 Why is that because all the modern browsers more likely will support ECMA 5 But then some browser will support some ECMA 6 not our browser will support that So there will be some kind of distinguish here You will be able to fix like a reset or come something here for your target So that later on you could run in browser, but we will talk about how to work so well with your development cycle So let's let's take a quick look. So this is one thing like I said, this is just one file, right? What if I have multiple multiple javascript So I will be able to use something called allow JS And I'm going to turn this one into true and also I'm going to actually put a little Directory doesn't my output a directory call out So afterwards I'm going to actually save it but before I save it I'm going to do something kind of little tricky here This is something you may want to use. It's called TSC www Dash-dash-w meaning watch What would mean watch mode if there's any change in the project? It will automatically compile to javascript or to all the most updated version right once you save it. So if you're looking to if I save this project configuration file and You should be able to see boom. There is a direct directory called out And there would be a particular javascript called demo.js Which is actually compiled from this demo.ts Right, so that's pretty good and you could actually take a look at the demo.js as actually really Almost identical with the previous TS file. It's just compiled in the runtime to a JS file Now let me actually Open this one to the side So that you could see a little better of what I would do next So next what I'm going to do is I'm actually going to adding some EGMA 6 feature into it Okay, how many of you familiar with EGMA 6? I could define your cross General okay, so this is basically using the EGMA 6 feature Which is I use new definition called a constant constant. I use a lat. I use a cross I create a cross called a customer and I have all the public variables and the constructor, right? So if you don't really understand constant or lat, it's a homework. Go home and figure it out So basically this is the EGMA 6 new feature now Once we put it there remember that the JSON file says the target is five, right? So if I do this and I Do a save and what you will see here is because it's an EGMA 5 So it does not support all the cross definition the constant the lat So you will just translate still as a variable, right? So what does this mean to you mean meaning you could try all the new feature in EGMA 6 or even 7 But then once you define your configuration file the target is EGMA 5 It will automatically compile into the JavaScript which will run fine in all the browsers Right, so you don't have to worry about ah this browser support that feature from EGMA 5 or 6 or 7 You could just directly use it, right? So that's good. And so I will show you something magic So you say what if I change this to EGMA 6? What's gonna happen? Okay? Let's take a look Let's change it to EGMA 6 Let's save it. Ooh What do you see here? So constant lat cross all the constructor all working fine Isn't that cool? So now it's EGMA 6 so you could actually easily because the target is EGMA 6 you could easily, you know Compile your, you know, Java's basically a TypeScript compiler will actually compile all those new feature Into the EGMA 6 compatible JavaScript So you don't have to worry about that you could take advantage doing the all the new feature using all the new feature Let a TypeScript compiler to worry about that, right? So you see I could do Upgrade I could also change it back to 5 to downgrade, right? It's all good, right? So just for the fun, we could change it to Any meter change it back to 5 So very easy to do isn't it? All right So one more thing I want to actually show you here is what if I have a multiple project called another JavaScript called a foo And I want to just leave it a very simple It's across called a foo Commission and Maybe I would do call a method called this spray Me actually go back to the purpose for to make sure it's a calling of the right thing Let me do this first. Let's do it in the constructor adding a spray method Delivery method, sorry, no one gonna find Delivery method, let me call it here and This isn't TypeScript, right? And then let me also call it at foo.js Which is my JavaScript now the reason I'm doing this is because I'm adding allow.js I Will actually adding all that say you could actually change your JavaScript one at a time Say I'm choosing to choose this particular demo one to TypeScript But for the rest of the project you still have 10 say JavaScript file there, right? So you would be able to actually just keep all the JavaScript file leave the way it is and then you could actually See the output which is actually compile all the demo one and the foo into the directory So that you don't have to worry about it changing everything into TypeScript all at once You will be able to do the graduate one file at a time or one function at a time So that will actually really give you some easy time to do your development cycle, isn't it? Okay, now one thing, you know people ask me about Refractor right so how does it work right? How well does it work? Okay, so let's go back to here Let's say I have this delivery method Let me actually close this one because we've done with this and Let's take a look at this guy here, and you will see in the same file. I have two occurrence So I'm gonna actually do Rename into something. I definitely know it's different So you see the very method is changed as well as different method here is changed How about that a full-dollar JS? I just pretty doesn't change anybody want to guess It's all changed to different method So basically meaning refactoring is working across all the JavaScript and TypeScript inside of your project So you could actually change the name convention to change anytime and obviously you would be able to change it from this particular One to the original one. They were remastered to change it in a JavaScript full-dollar JS And if you look at it back everything is changed already in the TypeScript Isn't that cool? So you don't have to worry about if you change something inside your project You have to worry about the change every single file, but your studio code will allow you to do refactoring pretty easy All right enough about this demo. So let's go back to move on to some other cool things so in this demo basically what I did here is I changed a typical JavaScript into a TypeScript and With the TypeScript because it's stackly typed so that you would be able to see Precomparation warning and errors and then you could fix it before you get into the real-time running and Then I also showed how you could actually set up a different target so that you would be able to do downgrade upgrade with a compatible JavaScript of your choice and Then also showed you how to allow a little parameter called allow JS So if you have multiple JavaScript inside of your project You could actually do it one at a time and including all the TypeScript and a JavaScript into the final project Okay, so Afterwards we want to talk about TypeScript, but JavaScript is TypeScript So show me the hands again. How many you actually know JavaScript already? Very good. Congratulations. You could have put a TypeScript on your resume Because basically if you understand the JavaScript, you do understand TypeScript because TypeScript is just a super set of JavaScript Right, but remember I'm a Java. I was a Java evangelist with son before so I do work with a lot of people from Sort of option-oriented background, right? They're not ever really familiar with a scripting language So a lot of times they always ask me they say hey Doris. Do you think I could start with TypeScript? directly without learning JavaScript The answer is no you really have to understand the JavaScript and then you probably 90% there to really leverage a TypeScript. You do have to understand JavaScript, right? It's not a trying to replacing like a Object-oriented kind of press from object rented to to scripting language. Basically it is JavaScript, right? You have to you have to sort of familiar with so this is something basically I would say TypeScript is basically adding optional types Top of JavaScript. So you could look at that. So a lot of times people say hmm I don't care about a TypeScript. Hey, could I still work with JavaScript total fine? You could actually rename all your JavaScript to TypeScript and Without a change in anything or without take advantage of any of the new feature I'm about to talk about in TypeScript. It's totally working fine just by doing the JavaScript to TypeScript itself it will give you all the pre warning message It will help you to develop your code help you to debug your code, isn't it? Okay, so that's what one thing the other thing is you know I keep on getting this question people actually want to understand how TypeScript compiler works And it's very very simple because the idea here is you develop your JavaScript with all the ECMAS 6 or 7 or future Feature and then let a TypeScript compiler to do the work for you You set up your target and then TypeScript compiler will do the work for you So eventually you still work with the the plan or the JavaScript at the end, right? Okay, so the reason a lot of people still have this concern is it is very true if you look at it this kind of like a Web space JavaScript kind of like evolving diagram you will see We actually you know, by the way, how many of you know ECMAS 6 is actually called ES 2015 Very good. Okay, so move on if you ECMAS 7 is called ES 2016 and so okay So this is a new name convention, right? But I know for most developers we still remember ES ECMAS 6, ECMAS 7 instead of put a year there But in reality all the new features coming in every single year because if you look into their name convention That suggests we're gonna have an ES 2017 next year very soon, isn't it? So the JavaScript developer will become more complex I would say a couple of years ago when I talked to people like you guys you guys probably wouldn't I wouldn't ask Say, huh are you a ECMAS 5 developer or ECMAS 6 developer? But now when we talk we probably will say Is that ECMAS 6 you're familiar with or is ECMAS 5 right? So there are more features adding into JavaScript word getting things more complicated And then you have more new stuff to learn and then unfortunately There's always a little gap, right? For example, not all the modern browser support all the features new features from ECMAS 6 and then next year is coming up This is already December, right? So we have a new ECMAS version next year And you will see same story right some browser with support of some features and browser wouldn't so it is actually makes sense to have some Compiler will actually help developers say you go ahead you with a new feature You set up your target and we will worry about the rest of the compatibility issue Who is the browser with the JavaScript version and this is actually a very big thing about a TypeScript compiler All right, but this is just kind of like an insight you don't have to really worry about that because this is already inside a TypeScript So you don't have to worry about how to config TypeScript compile all those things. It's there. It's out of box Okay, but a good advantage is Re-emphasize you could actually take a future ECMAS feature combining with TypeScript and Then let the TypeScript compiler to do the work eventually You will actually compile into JavaScript compatible with ECMAS 5, ECMAS 6, ECMAS 7 or ECMAS of your choice I think the lowest the support is ECMAS 3 All right, so next probably you are sort of Interesting to find out is what's new in TypeScript, right? So I'm gonna actually skip a little bit about the new features because I think just by talking about new features alone It would take another Full session to talk about so I'm gonna skip it just a little bit But then show you these are the new features available for the TypeScript 2.0 as well as ECMAS 6 So the idea of TypeScript 2.0 is fully support all the new ECMAS features We usually take what we call the third iteration of the proposal Once it's complete the third then we start to support right because we know it's probably more likely that feature is going to Make it right so we support it in TypeScript So TypeScript 2.0 is is is a variable and it's very exciting and then there's so many new features into it But I probably don't have room to go over all of them But I want to actually point two of them, which is very very interesting For you to start looking to one is called non notable types. The other is control for all Analysis, I will do a demo to show you what are they but before I do the demo I like to actually talk about what I mean not about types because this is the most Want demanded feature from the community so TypeScript is open source project So you could actually have your voice to be heard You could say I want this particular feature to be implemented in TypeScript And then we look at all the voting right and see how many votes they are will implement that So go back to the notable types if you look at that there are basically Three types of those things number string and a boolean But if you look into different things you will see there is a valid kind of data as well There's also defined and now kind of types within the primitive data type in Javascript, isn't it right? So sometimes you will feel it's it's it's weird because you always have to check if it's not now It's not undefined. I want to make sure it's real data. You always have to do that So in TypeScript we say why don't we remove the other two now or undefined? Outside a primary data type instead of have three primitive data type. I have five right? Number string boolean and then now and undefined right so in that case It's a lot easier to do checking. It's a lot easier to do the rest of the development So if you look at a notable type if we want to represent that number very easy I use a unique type which would say it's a number in this case in TypeScript number meaning all valid data Right or it could be a now data or it could be a undefined data So once we separate these two into such a fashion but use uning to sort of combine them together This actually represents the full blossom data type in the Javascript definition get that all right So what's so cool about that right? That's your next question. Let's actually take a quick look Let me I could I could actually close this project All right, and just leave this project. Okay Are you ready for some kind of interview questions? Okay, this is a very typical question for any Javascript developer you go to interview people will ask you the difference between double ego sign and a triple ego sign Do you guys know the difference? Some people do nodding some people say mm. I have to look into stack overflow This is probably one of the common sort of the most popular topic in stack overflow people still struggle with double triple And I totally agree with you as a as a background is from Java community I I actually don't understand why we have so many things double and triple equals to deal with that I don't know so let's take a look. Can you see it? Okay the code. Okay, so let's take a look So it says this is a testing for Something called s s could be a string or String array or now or undefined so basically says s has all those types data now How do we make sure that a particular knowable type is working in TypeScript when tricking to do is here There is a configuration for there's one called a strict now checks You want to turn it to true if you turn it to force then it doesn't have this kind of knowable new type It will still fall with a Java script So if you don't like this feature totally fine, just turn this parameter into force, right? But now I want to take advantage as I turn it to true. Okay, so go back to this and Would you want to guess if s what is the type of s? Okay, so you have to think about I have so many different type, right? so I Do a checking so this is pretty good with this to it very clearly tell me it's a string or string of array Okay, not too bad and else obviously with all my callable analysis It will say the rest of them is It's a string now and undefined, right? So that's pretty good, right? Now, how about the triple equal sign with object? What is s? As triple equal to object. What is s? You would have seen is the string String array, right? However, did you think there's a now there because now is an object? I Get some of you, isn't it? Okay, so with this tool you could very easily to see there's a now and then obviously the s here is a string and Undefined same thing double equal sign says undefined. This is what this is now and undefined because now is double equal sign with The undefined right so basically, you know I'm not going to repeat of the all of them because basically with the two You would be very easily to see what's going on and then this is a triple equal sign with undefined This is truly it's undefined. That's why this is undefined and the rest of the type is down to the next one Okay, so this is really taking advantage of the normal type and The the the throw analysis think about if you don't have this to you probably was struggling with all the double Equal sign the triple equal sign isn't it you probably not quite sure because you don't know what to expect So this is a really pretty cool feature If you want to take advantage go ahead to do that because I check in my old JavaScript code a lot of times I'm spending is doing the type checking if you go back you probably do the same thing all right I'm almost running out of time, but I actually would love to actually show you a very quick demo Because I actually said in my abstract says it works very well with With Angular as well as with the react which one you want to see with Angular or react All right, cool. I know this is what you're gonna ask. Okay. Very cool. So this is a react Let me actually this is a react project and I guess your question will be because Angular is using TypeScript, so obviously it's easy, but how about a react, right? We have a JS file We have the JSX file, right? So the good news here is TypeScript fully supported react So we actually have JavaScript to TS file. We have JSX to TSX So you could do actually the same thing instead of called JSX it called TSX right so in this particular one It's a very simple Kind of implementation what I did here is basically I'm actually using a Reddit Data which is a JSON data. It's pull all the interesting pictures from Reddit If you want you could take a look what's behind the JSON data. This is the basic the JSON data I'm pulling from this particular site and What I want to do here is I want to actually first of all try to use all the response from a JSON file and then Go through the submission and then And then one thing like what you could see is for example, I said API response What is that I could go to definition which is my another level which is another TSX Which is going to the interface explain what is API response? What is the submission and If you into the index you will see how we set up a URL How we actually go through that and getting all the JSON data We want and then the red is a submission TSX is actually the one is actually getting all the result Display on the page. So let's actually just based on this kill this and Let's do a quick demo. So if I do open command line And if I do HTTP server and you will see EP Logo host 880 You will see bunch of stuff. I'm sorry It's with a URL and with all the time when we submitted the picture But but last night at least is what if I getting an image of there? Let's see how easy it is you're adding this particular image URL as well as the pictures And then you could actually do let's do something quick. I use a web pack power the hosting and Then You will see It should be updated now. Okay, let's do a shift to reload Now you see all the images that in up So this is really using a react take advantage of JSX to TSX and then I probably running out of time But you actually will be able to see quickly the refactoring Everything is is working for example. I could have really refracting everything here To new version as well as I could actually go even to the definition to actually you could quickly show What is really going on there? Okay, so I think I'm running out of time I was going to give you a five minutes for Q&A, but I couldn't stay here Additional time, but if you want to remember one thing, you know, I think this is a slider you probably want to remember this is just go to that site and Take a quick look of this TypeScript and then it will show you exactly what's going on if you're beginner It also has a TypeScript a JavaScript kind of side-by-side kind of tool So you could see how it are going to combine to JavaScript. What's an advantage or new features in TypeScript? Thank you very much