 Hi, my name is Bill Tyshurst and I work in the Developer Division of Microsoft on some of our JavaScript tooling. In this video, I'm going to briefly cover the goals of TypeScript, an overview of its benefits compared to authoring directly in JavaScript, and then demo some of the more recent features we've added to both the language and the tools. When we started working on TypeScript, we could see both inside and outside Microsoft, teams working with these really large code bases, sometimes in the hundreds of thousands of lines of code, and spread across a large number of files. A common theme we heard was it was really hard to reason about these large code bases. Without the features in more strongly typed languages, such as code navigation, refactoring, find references, and so on, working effectively in projects at this scale was a real challenge. Imagine being a developer on a 200,000 line project and being asked to rename an object property used heavily in the code from name to username. Now, how would you go about making this change all the places name is used as part of the property being renamed? And not in all the other places the word name happens to appear in the code. So people were telling us these large projects had effectively become read only, that folks were too afraid to go in and make changes. Our goals with TypeScript is to make working in these large JavaScript projects productive and enjoyable. A language benefit TypeScript brings to JavaScript development is the ability to use the latest and upcoming JavaScript features in today's JavaScript engines. Features from the recently finished ECMAScript 2015 standard such as classes and arrow functions and even features from future versions of the standard such as decorators can be written in TypeScript today and it will generate code that will run in the lower level JavaScript engines. So we wanted to make TypeScript as usable at scale as other type languages such as Java or C sharp. But we did still want it to be unmistakably JavaScript and not try to map the syntax or semantics of another language onto JavaScript. If you end up in the debugger looking at the generated JavaScript or even if you want to stop using TypeScript and just keep the generated code, then the JavaScript you get maps cleanly back to the TypeScript you wrote. And it doesn't feel like you're working with two entirely different languages. By laying a type system onto JavaScript, it enables a wealth of tooling as the tools can reason about the structure and dependencies within the code. With a few type annotations, you can define what shapes an object can take, what type of values a property can contain, and the valid call signatures for functions and methods. With ES6 features like classes and modules and accessibility modifiers like private and abstract, you can cleanly encapsulate and structure your application's logic. And the tooling can help you easily visualize, navigate, and safely refactor that structure. So you have the power and clean syntax of the very latest JavaScript features, a type system layered on top so you can reason about the code and great tooling to be able to work effectively in the code. And the end result is clean, readable JavaScript that runs on a broad number of existing JavaScript engines. So let's take a look. For this first demo, I'm going to use the Sublime Text plugin we've written for TypeScript. If you use package control for Sublime Text, you can look for the TypeScript plugin there. Or you can go to our Microsoft TypeScript Sublime plugin repository on GitHub. And there's instructions there on how to clone the repo directly. So I'm going to fire up Sublime to show some of the features. I'm going to take this JavaScript file which has some errors in it, which are not apparent. And I'm going to rename that to a TypeScript file and then reopen it. And now we're getting some errors. One of the new features we've added is an error list. So that's going to fire up the language service and tell me which errors exist in this file. Straight around the first line here, we can see read only is an invalid property. With jump to definition, which we added, which the F12 key is a shortcut. I can look at how that is defined and it expects a property descriptor. F12 again. And I can see that the expected value is writable, not read only. So I can navigate backwards. And using a completion list, I can just add the correct value. There's a few others in here that I'm going to quickly fly through just to get to the content. I'm using a bitwise instead of logical, fix that. This is a function call, not a property, fix that. And now we're good. However, with the TypeScript, we can add some type annotations to give it even more information and help catch some more errors. Let's take that type and specify the parameter type. And now it's telling us that forEach does not exist on type string or string array, which is true because the type check we're doing here for the length property is not very good. Length exists on string and array. What we really want is to use something like array.isArray on our email address. And now this is a new feature we recently added. If I go to the definition for isArray, you can see that it has this return type specified in a new syntax arg isArray. The way you write these is this function is a predicate. You give it an argument and if the function returns true, then that argument was of the type you specified here. So now that that's fixed within this if block, we can see it knows it's a string array or in the else statement it knows it's the remaining type which is the string. And it's still giving us an error because if we bring up the signature help here and make that a little larger, you'll see I've got these back to front and it should actually be value comma index and now the errors are all gone and that project is ready. Some of the other work we've been doing is for JSX support and this is to help support the React library and the work they do with having elements inliners expressions. Here you can see we can use an HTML element and we can get the attributes off of that and we can add expressions and get intelligence that flows all the way through. We define these by exporting a class which extends the React component and we provide the properties and the states as generic type arguments. So within this we get intelligence on the state, we can get the types of the properties and so on. We also get refactoring if I want to rename ship weight and just call it ship size. You can see that's been updated and if I find the references you can see all the locations where that's gone through and updated. The other place that works great is even when you're exporting from your module we can go in and rename and I'll change show shipping to display shipping and you can see it's gone up and opened my modules where I'm importing that export and it's renamed not just the import but the places where that's invoked. Another new feature we added is the ability to build, to say build with TypeScript that's going to go ahead and that's finished and that's just used the tsconfig file that I've added in the root of that project. So for this next part of the demo I'm going to switch over to my Mac and I'm going to use Visual Studio Code which is a new cross-platform editor you can download from code.visualstudio.com. I'm going to open the same project and let me just bump up that font a little bit and so I'm going to open that same Angular file. Now an interesting thing you'll notice here is I don't have the Angular typings in my project and I don't have them referenced either and one of the new features we've added is we will look for the declaration files in the same manner that node modules resolve so where it sees Angular 2 whack Angular 2 it's going to look up for the node modules folder find Angular 2 and then load this angular2.d.ts. So for example on this component if I go to definition you can see it's jumped me straight into those definition files under the node modules location. So one of the ES7 features that we've brought forward to TypeScript to help with authoring code is decorators. You can see here this syntax at ng.component is a decorator on the class and that allows you to specify properties such as the selector, the template and so forth and obviously we get completions here for that decorator as well. Another feature we've added is the ability to emit ES6 code but still specify a prior to ES6 module system. Now the reason we did this is there's tools out there today such as Nodev4 and the latest browsers which do support a lot of ES6 syntax but don't support the ES6 modules system. So for example when writing Node code you'll want to import the FS module using ES6 syntax and then we can call functions and so forth as we would in ES6 but when this compiles it's going to compile to a common JS module syntax. Another thing you can see in this file is we're using generators with this syntax here which allows us to yield results from the function when called repeatedly and then we can do a for of loop over that generator to get the results. One thing we are bringing forward here is the ES7 feature of async await. I can declare this as an async function which means it's then going to return a promise and within there I can await the results of functions that return a promise. So if I go back to the command line here and switch into that folder I can compile and if we look at the result you can see we've generated a little bit of code here for the async await operations but we have created common JS module system code and you can see the other ES6 emit such as the generators has remained. So that was a brief tour of some of the work we've been doing in TypeScript. We hope you'll give it a try and we especially hope you'll give us your feedback. We're an open source project driven by the input from the community so please get involved and tell us what you want to see or even better contribute if you can. You'll find the projects for both the TypeScript compiler as well as the TypeScript plugin for Sublime Text on GitHub under the Microsoft account. You'll find links to these projects and other resources on the typescriptlang.org site and you can get the Visual Studio code editor from code.visualstudio.com. You can reach me on Twitter at build.icest. Thanks for watching.