TypeScript Keynote • Anders Hejlsberg • GOTO 2012

I am Anders halberg techn whoa technical fellow at uh Microsoft and I'm here to talk about typescript which is um a project that we've been working on for the last uh two two and a half years um um so typescript is about solving a problem that we've increasingly heard uh from from our our customers um you know in particularly over the Last 5 Years customers and even internal teams keep telling us how how hard it is to write large applications in in JavaScript um several reasons you know one being that that JavaScript really was never

designed to to write large applications it it you know it was it was sort of like originally intended for these 10line event handlers and now we're writing 10,000 or 100,000 line apps in it and the language doesn't really have any large scale application structuring uh Concepts like classes or modules um and also it's entirely dynamically typed which means there's no static type information off of which we can power intelligent tooling and if you think about what it is that powers the intelligent IDE that we all use today it really is static type information that makes

it possible to do code completion safe refactorings finding all references go to definition etc etc um so two 2 and a half years ago when we were thinking about where where do we go next with JavaScript development tools we thought it'd be really neat if we could strengthen JavaScript with with those key Concepts that are missing for large scale development like classes modules optional static typing but but doing but but to do so in a way that doesn't sacrifice the inherent thing that makes JavaScript so interesting thing I.E crossplatform uh Open Standards web and and

so forth and and that is what uh what typescript is it is a language for application scale JavaScript development so it's a language for large or application scale uh JavaScript development uh next level down or the more technical description is typescript is a super set of JavaScript that compiles two plain JavaScript um and it does so uh the the compiler itself and the code that it produces uh runs on any uh uh browser any host on any operating system and the compiler and the associated language Services uh uh and library typings and so forth are

all open source um we put this project out uh in the open about two days ago um and uh what I have here uh is is basically you know the publicly available uh installation of it that uh that we're going to try and play with now so so typescript starts with JavaScript um all JavaScript code is valid typescript code because we are a pure superet of of JavaScript uh and that means that you can just copy and paste JavaScript into a typescript file and then work with it there it also means that typescript works with

all of the existing Frameworks and libraries that are available out there today like node.js or jQuery backbone prototype etc etc there are lots of them and new ones coming practically every day um so the thing that we then add on top is optional static typing classes and modules um and those are really sort of the things that that allow us then to build great tooling because they're the missing things that that power the the idees today um the cool thing though is that there's zero cost all of this all of typescript is purely a development

time tool once you compile you you're left with plain JavaScript and there's no runtime component that needs to be present in order to to run the the the generated code in fact we simply compile to idiomatic JavaScript the JavaScript that you would have written if you wanted to emulate classes or or modules and the final code runs as I said in any browser any host on on any OS um so let's let's actually try to to to do a little bit of demoing and see what this looks like in action here is the uh typescript

uh website well actually it's a local copy I have just uh in case we locked connectivity but uh but this is is what it looks like and we're going to go and play with typescript in the typescript playground um which is basically a web page where you can where you can type in typescript and see the compiled out output in uh in a window on the side um I'm going to switch here and grab uh my first little demo and so here you you you see some some JavaScript and here you see the compiled output

which happens to be exactly the same because we are just a a superet of JavaScript now if you look at this code there's something funny about this code right I mean I'm like taking a parameter X then I'm adding a property to or setting a property but I'm also cring it together but hey this is valid JavaScript it just so happens to not be meaningful but it's valid uh now now it would be nice let's say for example that I knew that X was going to be a string um it sure would be nice if

I could somehow indicate that and you know it's not like we're inventing anything new in that sense you know uh for example if you use a tool like Google's closure where you put uh type annotations in comments there are there are tools that can check these things for you but but having your type system in comments is not particularly uh conducive to readability of the code nor is it particularly expressive you know there are a bunch of things that you can't say in these comments and you can't put them in all the places that you

would like to put them um so what typescript does instead is it allows you to put type annotations in your code so I can say x is a typ string um and when I do so you see that our IDE starts to light up I should mention that that what is powering underneath this edit box that I'm typing in is the typescript compiler and a typescript language service because typescript is written in typescript and when you compile it you get JavaScript and you can just use that anywhere and so that's what we're what we're doing

here and so the first thing you see is that we get something here that says there's no name property on typ string which is which is true there isn't uh uh we also see if we hover over V that we've infer that string plus string is a string and therefore V is a type string and we see that alert is a thing that takes a string and returns void and therefore it is valid to pass V to it um now let me try to get rid of of that line and error here and let's try

one of the other primitive types number for example and now we see now we're inferring that number plus number is a number and now we're trying to pass a number to a method that expects a string and that in turn is also an error so so here's some more you know static type checking happen happening let's try to use a bu instead uh and now we see that operator plus can't be applied to bus well it actually can in JavaScript it just so happens that you don't get a meaningful result right and so in a

sense what this is about is trying to to to siphon out that meaningful subset of java the semantics subset of JavaScript that makes sense and that's basically what what what what we're doing here right now we also allow uh more complicated types like arrays for example I can say that X is a string array and now when I index into X and press dot you see that we know that there are strings and therefore we can show you all the methods that are available on string and not just their names but also their signatures so

we can see that care that is a thing that takes an index and uh which is number and returns a number and so forth um other typical patterns that are interesting is we could say x is a function that takes no arguments and returns a string and now when we call it and say dot again you see we get statement completion um but of course one thing that's really interesting is having the ability to describe as shape of object here for example I'm saying that uh whoops that my function takes an X that is a

an object that has an A and A B property and now when I say x dot you see that we get statement completion here x. a x.b and so forth um now I might also want to give a name to to this structural type or this Anonymous type so you see you can write types just in line but of of course you can also name them um I think I have this little example here that shows you how you could write an interface thing with two properties in it and that's really just interface here think

of it more as I'm writing an object type whose name is thing and it has two properties um and let me now try for example and say Bar N equals process of a colon 10 comma B colon uh hello for example um now a couple of things worth noting here first of all if you've been following along over in the generated JavaScript you see that the JavaScript we generate is really just the the JavaScript that you type minus the type annotations and minus the type declarations so all of that is there you know for validation

and and IDE tooling sake and then it just compiles away um now the other thing you'll note here if we if we try to look a little bit at this program so we've defined a to be a number and here we return x.a which means we've inferred that we return a number which in turn means that we can infer that process is a function that takes a thing that returns a number which in turn means that when we call Process we can infer that N is a number and so you see how types flow through

just a few annotations and then we can flow it through the code once we know what what what's going on um let me try to sort of show here what also happens for example let's say I add uh an extra uh uh uh property to my my interface type here now you'll notice that I get errors here it says process is is missing one of the one of the parameters um and I could fix that by by adding my parameter C but I could also instead indicate that c is an optional parameter so this is

a pattern that's very common in in JavaScript where you take say options bags that are a bunch of options but you don't actually have to specify all of them right so here we're saying that A and B are mandatory but C is optional if I give a c it must be a bu if I give a c that isn't the bull now it's an error so so we can we can sort of express some of the the more intricate parts of of what goes on in uh in in JavaScript let me actually try to take

this piece of code here I'm just going to copy it and then let's switch to uh visual studio uh and just get ourselves an empty typescript file so now part of typescript uh the distribution is a plugin for visual studio that uses the compiler and language service to power up all of these uh intelligent uh facilities in the IDE um as I said this stuff is all open source so you can use it anywhere else we you you saw an example of using in a web browser you someone could build an eclipse plugin and do

do the same thing um I'm just going to paste it in here and then continue uh uh playing with with our code in in here um so one thing you of course can express whoops in in types is uh is methods so now we're saying that thing has a and b properties of type number and a foo method uh so now when I do statement completion you see we have a Fu and when I do open curly it tells me what the signature of that guy is and and so on um and again here we

can infer then that it now we return a string because Fu returns a string um we actually also allow you to express overloads um so I can say there's there's Fu actually um is a method that when you give it a string returns a string and when you give it a number it returns a number uh this happens very often in JavaScript for example like like think of jQuery and a dollar object that has seven different overloads that you can if you give it a function then it does this if you give it a string

it does that if you give it an object bag it does this other thing and so on and so it's important to be able to to model that in the type system so we can follow along and when you say dot on that give you the right type information again um so now if we look here uh if I say x. Fu you'll see that there are now two overloop uh oh that's should yeah anyway uh um so and if I give it a number here you go then process now returns a number now this

stuff here actually uh is really the same as writing this uh so F what I'm really saying here with these two overloads is that there's a foo property that has two possible call signatures one that takes a string and returns a string and one that takes a number and returns a number um and but I can describe further things on my on my function for example it also has a data property so and this again is stuff that occurs so now when I say FU dot you'll see that there's a data property but I can

also call it with two different overloads and so I can model all of these crazy things that occur in in JavaScript libraries in fact just for completeness sake let me add a uh uh a couple more here um I could I could now also Define that thing can be a Constructor function that takes a string and returns elements and when you index into it you get dates and and so forth and now so crazy stuff when I say new X here it says oh you must give me a string and when you do then I'm

going to return an element etc etc so we basically can model all of these things that go on in the JavaScript Dom jQuery all of the all of the Frameworks okay let me get rid of this stuff and try to paste in some other here's a little more advanced example of type inference uh a function that closes over a local variable and returns an object with a bunch of function properties that use that that local and this is how you get privacy in JavaScript is a very very common pattern right um if you if you

look in this piece of code the only thing that that differs from regular JavaScript is this one annotation here that says that that this function takes a number but we can infer all of the types from from from this so if you hover over the return statement here you'll see that we've inferred that this returns a thing that has three properties that are each of a function type that has certain argument types and so forth and in turn make accumulator therefore is a function taking no arguments that returns an object lateral containing three functions that

Etc ET ET Etc so so we can sort of grock it all um and now when I say bar a equals make accumulator and then a DOT you'll see that there's an ad here and that I need to pass a number five and and so forth now so this shows how we can infer from code that your writing but sometimes inference you want inference to go in the other direction you may for example uh have a declaration of an interface that that you want to go Implement and now really you would like to make inferences

from that about the code that you're that you're writing so let's say that my make accumulator function here is something that's supposed to return an accumulator right well you'll see that it all works out now because we actually have structural typing here so the mere fact of writing an object literal that has the right shape is an implementation of that interface you don't have to first declare that you implement it um but but the other thing that's really cool is that if I made a mistake here like typed in the wrong property name then it

tells me what's wrong here it tells me that hey you're missing property ad from accumulator um now this is where tooling gets really really useful imagine that this was like a 500 line object literal and trust me I've seen lots of them in JavaScript code and there's something wrong in there somewhere how the hell do you figure that out right I mean that's what tools are supposed to do for you um and that's what we that's what we do here okay um another place where this kind of contextual typing is interesting is um well actually

I should show here that even even if I get rid of that type annotation you'll note that we can still infer that value is a number because you've said that you're returning an accumulator and accumulator has an ad function that takes a number and therefore we can relate that and still flow the types in the other in the other direction right this turns out to be useful for example if I say uh document do on Mouse move uh here which is one of the events you can handle equals function of e and then open curly

e Dot and you'll note that we actually know what e is here and the way we know it is because we know what document is document is the root document document has an on Mouse move that takes takes a mouse event and returns any and therefore we can push the type information into e as a mouse event and therefore we can give you statement completion on E when you say dot and so lots of lots of inference going on um the cool thing is I can actually go to the definition of mouse move and and

look at what this thing is um and that jumps you into in this particular case a file called lib dod. TS and this is 8,000 lines of typescript declarations that declare the entire structure of the Dom and the JavaScript runtime Library this is actually generated from the IDL files that are standardized um so so we know it's correct and and the type information is actually available um it's just that JavaScript itself has no way of conveying this information to you other than at runtime when it's too late right um so so here we can see

that Mouse move is a thing that takes a mouse event and we can actually navigate around and and check out all of these things uh and and see what what their shapes are now now the thing that's really neat about this is that we can provide this file just as an adjunct file on the side and once you have that information the tooling lights up and we can do that for any JavaScript library out there so we and we actually do do that for node.js and we do it for jQuery in the typescript distribution so

so just as an adjunct file we can provide the missing information right and then light up the tooling based on on that and I think that is just super super valuable okay um so let me uh let's see where where did I want to go from here let me go back and just sort of summarize a little bit about uh the typescript thing here so basically what what what typescript does is it formalizes javascript's type system and provides a static view of it but we're not trying to invent a new type system we're actually bending

over backwards to stay true to what really is javascript's uh type system you see that we do a lot of type inference and structural typing and and the and and the reality is that when you're writing typescript code you actually end up writing very few type annotations and then we just flow from from from there uh as I said it works with existing JavaScript libraries um and for the type system Geeks out there this is not a provably typ safe type system because JavaScript is not in a sense provably typ safe well you first have

to Define what you really mean by that but but the point here is that it is not a type system for the traditional sakes of type systems like performance or like strict validation rather it is a type system that helps you author code and that reflects you know the reality if you will but it is optional and and you don't have to use it but when you do use it the tooling can help you more okay let me try try to jump back and show you some of the uh other features that are available uh

I wanted to show classes and modules and we'll go back to the playground because it's instructive to see the the code that the compiler generates um so typescript supports classes so I can declare class uh point for example here and say it has two Fields uh sorry my typing is not great X colon number and uh y colon number like so um and you see that we generate the code that is sort of typical for for for writing classes where you have a closure uh in which you have a Constructor function that we then return

out of the out of the closure and now I can say RP equals new point and now we know that on P there's an X and A Y so we can give you statement completion so you can say p.x = 10 p.y = 20 and so on okay now now of course it would be nice to be able to give the arguments to my point here but if I do I get an error because we haven't yet written a Constructor uh but we could go write one uh Constructor of X colon number comma y colon

number and in here we can say this dox and again you see we get statement completion on this because we know where where you're at this doy equals y uh and so forth now this this class syntax by the way is aligned with ecmascript 6's current proposals for classes so so the class and module extensions that you see in typescript are actually in a sense a preview of what's coming in ecmascript 6 but then on top of that we have layered optional static typing which is not part of what what EAS script 6 is uh

is doing so of course you can have uh methods in classes so let's write a dist method here and let's say in here we want to return math Dot and again here you see I get statement completion on all of the all the stuff that's available in in the in the standard runtime Library so I want to return this.x time this dox plus this doy time this doy for example um let format that a little nicer okay so one thing you see here is that instance variables go on this but methods go on the Prototype

um and this is exactly how javascripts or egas cript 6 is is planning to do classes and this is basically the typical pattern that people use them when they write uh prototype uh uh uh chains in in JavaScript um we allow uh some other things in classes here for example I could declare uh static field static origin equals new point of 0 comma 0 for example and you'll note now that Statics go on the Constructor function object methods go on the Prototype instance variables go on the instance and so forth and now we understand what

this means so when I say Point dot you see that I get an origin member on point okay we also allow uh allow you to write private members but but with a Twist so I could say for example private Color Oops colon string uh like so and now now down here if I say this do color equals red you'll see that we generate the code and you see that this uh statement completion on this shows the color member but if I go down here and say p dot you'll see that there's no color member on

P because it's private so we limit you to access only within the class if you declare things to be private however in the generated code we simply just generate a normal Al member call color because there is no way of having private members in JavaScript at least not currently uh one Zas script six rolls around with private names we could Target private names for this kind of code generation and and perhaps do a better job but right now we do the best uh we we can okay uh couple of other uh neat features uh we

support what we call automatic properties this pattern of declaring Fields taking Constructor arguments with the same names as the as the the properties and then saying this do blah equals blah is super super common so we have a nice short hand for that where instead you can simply on the Constructor argument say public here and public here and then we automatically inject properties with those names and inject the code to initialize those properties we also support another ecmascript 6 feature which is um default argument value so I could give these arguments default values just by

saying equals something and then we inject the correct code to check whether they're undefined and and so on and now of course the the type system whoops the type system now knows that it is permissible to omit the arguments uh in the in the call so we don't get a red squiggly on that okay uh that's well well I should also show that we of course support inheritance for classes let's try to declare class Point 3D extends Point like this and then let's just take a look at what happened in our generator code so we

still have our Point uh class right here and now we also have a point 3D and you notice that the code genen for that is a little bit different we generate a function closure that takes the base class as an argument and then we call a helper extends that sets up the Prototype chain the way you're supposed to do in JavaScript uh this is why classes are hard in JavaScript because you're supposed to do all of these crazy things right um this extends method is injected into the generated source code only if there are CL

derived classes in that file and that is the only time we inject code that you didn't write into the output file otherwise the code you get is simply the method bodies that you wrote so there is no runtime library or new collection classes or blah blah blah anything associated with typescript it is simply just JavaScript okay I could in here write myself a Constructor that takes X colon number comma y colon number comma say public add an extra property Z colon number like that and then in here say call Super of X comma y for

example and now you see that we generate the appropriate code for making a call to the super Constructor etc etc um yeah so that's uh classes um what I wanted to show next is modules um let's try to actually let me try and grab a little snippet of code over here what I wanted to show before that in fact is Arrow functions so let me go to the toolbox and let me grab uh tracker here we go okay let me paste that in here okay here's a little piece of code uh scroll this up so

you can see what's going on here's a little class uh that declares a counter uh instance variable and then it has a start method and in the start method we capture the on Mouse move event and have a little Handler that increments our counter and and does a console. log of of the counter so let's let's try and run it so you can actually run the output here in the playground um let's bring up the F12 tools and go to the console window and then we see that hm there's uh there's something wrong with our

code we're getting a bunch of nans uh out of this if we go back and look at uh at what's going on here the problem that we have here and if I had actually been typing this code in we would have already seen what what the problem was is but if we hover over this now you can see that this is of type any meaning that we do not know the type of this here and therefore we wouldn't have gotten statement completion to show count and so forth um but the reason it's a problem or

the reason this is is of type any is that you never know what this you're going to get in a function call and sometimes you're going to get the wrong this for example in a mouse move event you get the element that the move occurred on you don't get the this of the surrounding context now any everyone's gotten bit by this problem and it's got people have gotten bit enough by it that there's a proposal in ecmascript 6 to support uh what's called Arrow functions or what we in C call Lambda functions so I could

instead instead write this code AS e Arrow um and then in a Lambda function this is always of the type of the surrounding context or it's lexically scoped meaning that I get the this of of the outer function and the way we code generate that is we do the the nasty little thing that you normally have to do where you say why that equals this and then that dot inside your function or whatever we can simply code generate that for you in instead here well it's interesting about okay and let's let's actually just sort of

run and prove to ourselves that uh that it now works yep we're seeing what we're supposed to see um thing that's interesting too is if in my little mouse move here let's say that I did not refer to the outer this then you'll note that we don't generate that that closure so so we only inject it if you actually do it and then we rewrited to underbar this in instead uh okay now the other thing we support in typescript is modules let's say I wanted to put this class in a module I could write here

module open curly and down here close curly oops of course we want to give this module a name we'll call it module utils and you'll see that what we generate for a module again is a function closure where where we then for all of the things that you export out the module if I say export class tracker we then create a property on the module object for each of the exported items in there so this is also a very very typical uh pattern in in JavaScript uh and now of course we get red squigglies here

because there is no tracker in the global scope it is now utils Dot and if I say dot you see that there's a Tracker in there and that's that's the one that that that we want right I can actually go deep with these things ac. core. utils and you see we just Nest function closures uh uh uh sort of off the screen there um uh and now I have to refer to it as Acme doc. utils but you'll note that we do track it in the type system so we know that the name of this

type is ac. core. utils um in fact we even allow you to import modules so I can say import ACU equals Acme do core. utils for example and then here I can use the shorthand for for that ACU and if you look down here you'll see that what we've generated is just a variable that grabs that module object and then you use that to reference instead these modules we we call internal modules and they're they're very typical like jQuery for example is an example of a module called dollar right that has a whole bunch of

stuff in it um uh there's another kind of modules that are that are in common use out there called commonjs modules and no .js uses those and those are basically like source files that get loaded dynamically at runtime and have the ability to State their requirements in terms of other modules and state their exports in terms of an exports object um and we support those so let me actually try to uh close down uh the playground here and then let's go back in visual studio and let's try to open up a uh server. TS here

and let me try to write a little twom module node uh server uh application so first thing I'm going to do is I'm going to import uh or reference the static typing of node.js which is in a declaration file called node. D.S and I simply place a a reference in my in my source file um which tells the compiler that when you compile this file also include that other file in in the compilation and now I can say import HTTP equals uh module of HTTP which is one of the modules defined by node and in

fact uh if I go to definition on this guy uh you'll see that it jumps me into the adjunct static type information file for HTTP and this is what it is itself powering off of in order to give me statement completion help okay so let me now try to write a function here export function uh simple server uh that takes a port colon number comma message colon string like so uh and in here let's say we want to call HTTP doc create server and you see we get statement completion on node here create server in

turn is a thing that takes a call back function that has two parameters request and response so I can give those guys and then in here I can write the body of my uh of my code now I'm going to just paste in some stuff here so so you don't have to watch me uh type it all uh but note one thing that when I type result dot we actually get statement completion on that so we flowed the types from the Declaration of create server in into the call back function because we know what the

types of those call back arguments are and so we can flow it all without you having to explicitly State anywhere okay uh let's just go back here and say listen uh of 1337 or no sorry a port which was the argument that we got passed okay so that's the first module of our of our little server let me uh create another uh let's see here here uh recent files let me get uh hello this guy here open another uh empty file um and now let's create a module that uses the module that we just wrote

so I'm going to say import server oops server equals module of server and now I actually have referenced the module that I just wrote and so if I say server dot now I actually get statement completion on the module I just wrote so I can now call Simple server and it tells me you got to pass me a port number so 1337 comma uh hello go to uh for example and then uh let's just also just say console uh do log of uh listening like so there and let's save that guy all right and now

let me jump out and actually use the uh command line compiler so we'll switch to uh node uh or sorry demo uh and node and in here you'll see now that we have our three files the the node declaration file and the two typescript files that I wrote now I can simply tell it to compile hello. TS I don't even have to tell it about server. TS because the compiler will automatically Trace all of my imports and all of the references that I have and find the entire graph of files that need to be compiled

and then compile those so so if we look at the output that got generated we now have two files hello.js and hello uh our server.js we can just sort of take a look here's server.js if we oops let's try and take a look at that and you'll see that the code that's in there is the code that I wrote with my import changed into a require and if we type hello.js you'll see again it's pretty much the same code right um let's try to run a node on this server so node hello uh and it's

listening and now let's go to uh whoops let's get rid of this guy there and then let's go to Local Host 1337 there and we should see Hello go to there we go yep okay so that's a little bit about classes and modules uh I could just quickly summarize here that that basically you know these are the things that allow us to do scalable app development right and and this is how you you get to write really large applications and have tools that understand what what the contracts are between different modules and have them enforced

so you find the errors before you run your app instead of whilst you're running it um we're aligned with the emerging standards so as I said earlier classes modules Arrow functions are all things that are proposed for ecmascript 6 that that we're taking inspiration from and we support the two popular module systems that are out there commonjs which is used by node.js and then AMD modules which probably the most common loader there is require.js um uh and that's used for asynchronous module loading in a browser and and and we support both of those okay last

thing I wanted to show was just uh a few larger applications because we've been doing a bunch of little stuff here so let's let's try to load up some of our samples um first thing I'm going to open is uh uh let's see demo SL uh image board this is one of the samples that that we include uh and let's just load up app. TS so this is a multimodule node.js application that uses mongodb and and the Express framework um so in here uh you see that we import modules from various places HTTP and URL

come from node uh DB is actually a module that we wrote we can navigate in and and look at it and in here you see that that in turn uses mongodb so we can navigate into that and check out the static typing of of mongodb in here you see that we open we create a server create a connection to it um and then just for convenience uh We've defined some interface types that represent the entities that we're storing in the database because they are all of the same type and it's really actually convenient to have

statement completion and validation on these entities that we that we're putting the right thing into into the database um and then we've also written some helper functions like get user here that takes an ID and then asynchronously calls you back when it's fetched the user from the database and here you see we use the interface files that we that we just declared now we can use the ID to navigate in this larger app we can for example find all references of get user and you'll see that here's the Declaration of it and then there are

two references over in the app uh here's one that that I think is interesting um if you look at this this function here there are zero type annotations in this function yet we know all the secrets about it because app elsewhere is typed as being uh of of type Express server we know that Express server has a get method uh that takes that has a bunch of overloads and one of them is one that takes a function that returns a that that has two arguments request and response and so we can infer what their types

are we know what the type of user is the one that we declared over in the database module and so when we're in here if I say request dot you see that I get statement completion if I say user dot you see that I get statement completion so we know all of this stuff without having you to State it over and over uh it's inferred uh from the code um now in the interest of time I'm not going to actually run this one uh I'm going to try and switch and show you uh another little

sample uh um which is one called warship uh and let's try to load that guy up here and let's get rid of this dude no and this dude here this is a little app that uh a browser app that uses jQuery and jQuery UI and you you'll see that we referenced the the typing for jQuery and for jQuery UI um and let me show you how this works then because the the pattern between these two libraries is that that jqu UI is a library that builds on top a jQuery it actually sort of monkey patches

into the dollar object and adds additional uh properties uh that that are for for for for UI manipulation so if we look at Dollar well first of all you'll see that we now have type information for jQuery so we know the seven overloads of of dollar um we're going to pick the one that takes a string and then we're going to press dot on it and here you see all of the things that that you can say on dollar now this is the stuff that saves you from having the cheat sheet uh next to you

or or looking up in some HTML documentation right this is what tools are supposed to do for you um if we pick add class uh then we can actually go to the definition of that guy and you see now we jump into the jQuery declaration file and you see here's domain interface for jQuery and it has an ad class in fact it has two overloads of of AD class um now if we go back let's say we pick one of the ones from jQuery UI like dragable for example example and let's say we go to

definition on that guy um you'll note that we jump into a different file that declares the same interface so in typescript interfaces are open-ended and multiple files can contribute to the same interface and that's how we model this notion that one module does something and then another module Builds on that first module by adding things to its types and and so we can model that in the type system and that's just uh super useful okay last thing I wanted to show is a really large project uh the typescript compiler itself uh let me try to

load that up here and we'll just pick one of the files out of the compiler the compiler is about 26,000 lines of uh typ of typescript code U here I loaded up the file that contains the abstract syntax tree class definitions um and I and as I said all of this is open source so it's it's stuff that you can just grabb and and and look at um we can navigate in here for example go to the definition of the case statement class which is a class that extends statement and so forth and so I

can navigate around the the entire compiler now you saw that at the top of this file I reference a file called typescript TTS if we go to the solution Explorer in in Visual Studio you see that we've actually inferred the entire project that I'm working on here from those references because if we go go to typescript TTS you'll see that that in turn references a whole bunch of other files and through these references the compiler can get the full picture and it almost doesn't matter which file you open we know the context and therefore we

can provide you all of the all of the appropriate uh information so in here in this this is the main uh file for the typescript compiler there's a class called typescript compiler not surprising uh typescript compiler instantiates a parser we can go to the definition of the parser the parser in turn instantiates a scanner we can go to the definition of that guy and and so you can sort of navigate around very easily and see how the the compiler is built what I wanted to show though is is um one of the really neat things

that you can do once you have static type information and that's things like refactorings and one of the refactorings we support is rename for example let's say that here in the scanner uh I have a um uh a field called called line number that I okay I forgot to rename that back to uh to line from the last demo I gave anyway there's a field called line number if I look at all the places that this guy is referenced if I do go to definition on this guy uh sorry go to find all references on

this guy you'll see that there are a bunch of references in the scanner itself and then there are some over in the parser that we can look at uh and here's one for example uh in the parser where we reference uh uh line now up here there's also a property called line okay so let me first go back to the scanner and try to rename here ah refactor rename and call this guy line instead okay now if I go back to the parser you see that it has now renamed line number over here to line

okay but now what's really interesting is now I have two things called line one coming from the scanner and then I have one coming from this line call thing that I'm that I'm using in here as a local right let's say that I now had to rename my scanner's line back to line number okay now if this was JavaScript code that would be insanely hard to do right because you have to look at every reference to line in all your source files and decide on the Fly is this the one or is that another one

um but this is what Ides do for for you know all day long right they because through static typing we know the difference so let me take this parser file here and actually put it down at the at the bottom and now let's try to actually show both of them here you see the one in my scanner here you see the one that isn't related to it let's go back and say refactor rename and now let's call this guy line number uh instead and you'll see that we renamed that guy but not that guy because

we understand the difference between the two so so here we go um this is again one of those things that just make tooling incred incredibly uh valuable when you're writing large applications okay final thing I wanted to show is just uh um compiling the compiler uh sorry there we go so in here is uh the source for all the compiler that we that we just took a look at now I'm going to try to compile the compiler I'm going to tell it to put the output in a file called ts. JS then I'm going to

tell it to all Al generate generate declarations and I'm going to compile typescript TTS so this is going to produce two files um first it's going to produce the compiler in a file called ts. JS and that's just going to be plain JavaScript then it's also going to produce a declaration file that represents the external interface of the compiler so if we look at what we what we uh sorry what we got here uh you'll see that there are there we we had two files uh produced uh ts. JS and then ts. d. TS and

that's the Declaration file for the compiler and now if I uh load that one up in the development environment here let's see edit uh ts. DTS here we go and then let's just get rid of the part and here you see basically the public abstract of all of the things declared in the compiler that someone using the compiler as a service could use and so now I can in a sense continue up the chain of my modu or development I can take my typescript compiler run it through my minifier do whatever it is that I

do my Opus Gator before I ship it and then I can continue on with the Declaration file and that really is what represents my external interface right and so you see how you can manually author declaration files for existing JavaScript but if you're writing in typescript we can make the Declaration files for you a automatically all right um I think that is as much as I have time for wanted to just Briefly summarize what's in what's included in typescript open source compiler written in typescript it itself um tooling uh there's a brows a hosted playground

that uses these services and because it's open source you anyone can build plugins to other editing environments we built one for visual studio that that we include um we include static typings of a bunch of the popular libraries out there like node.js and and jQuery and also lots of samples and a former language specification so as I started out saying application scale JavaScript development is hard uh I hope I've showed you here how typescript makes it easier and I'd love for you to go take a look at it yourself at typescript l.org at download to

play with it and let us know what you think thank you thanks