typescript: what to do with types in javascript
DESCRIPTION
JavaScript is the assembly language of the web. There are languages that transcompile to JavaScript such as TypeScript, CoffeScript and many more. This is introduction to TypeScript with comparison CoffeScript and plain old JavaScript. It shows how to address some JavaScript specific challenges.TRANSCRIPT
![Page 1: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/1.jpg)
What to do with types in JavaScript
about:TypeScript
![Page 2: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/2.jpg)
Who‘s talkin to you
• Vedran Maršić AKA Fosna
– dev at http://axilis.hr/
– organizing programming workshops for kids
• Logo, Scratch, HTML, CSS, JavaScript
![Page 3: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/3.jpg)
JavaScript is the assembly language of the web!
Author unknown, mentined at:
The Birth & Death of JavaScriptA talk by Gary Bernhardt from PyCon 2014 bit.ly/RtLaCe
![Page 4: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/4.jpg)
JavaScript alternatives
• CoffeScript
• Dart
• GWT
• Script#
• TypeScript• ...
![Page 5: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/5.jpg)
Folks rail against static typing but they don't complain about JSLint. TypeScript offers optional type annotations - it's hardly a
perversion of JavaScript.
Why does TypeScript have to be the answer to anything?
by Scott Hanselman
http://bit.ly/U1dHQR
![Page 6: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/6.jpg)
TypeScript overview
Super set of JavaScript
Optional static typing
Static type checking at compile time• smarter rename, refactor
• go to definition, declaration
• call hierarchy
Code sugar for classical OOP
Produces idiomatic JavaScript
![Page 7: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/7.jpg)
by Anders Hejlsburg
Original author of Turbo Pascal
Chief architect of Delphi
Lead architect of C#
Anounced in Oct 2012
v 1.0 in Apr 2014
Open Source @ http://typescript.codeplex.com/
![Page 8: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/8.jpg)
TypeScript trans(com)piler writen in TypeScript
Editor support:
Visual Studio 2012+,
SublimeText, Vi, Emacs, your favorite browser
http://www.typescriptlang.org/Playground
![Page 9: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/9.jpg)
TypeScript language features
classes, modules, function expressions
type annotations, type inference
interfaces, generics
enums
![Page 10: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/10.jpg)
Nicked with author approval. Thank you Vlad!
https://speakerdeck.com/vladiliescu/typescript-vs-coffeescript
![Page 11: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/11.jpg)
![Page 12: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/12.jpg)
![Page 13: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/13.jpg)
CLASSES, INHERITANCECode sugar for classical OOP
![Page 14: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/14.jpg)
![Page 15: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/15.jpg)
![Page 16: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/16.jpg)
![Page 17: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/17.jpg)
![Page 18: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/18.jpg)
MODULESPesky global scope management, actually.
![Page 19: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/19.jpg)
![Page 20: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/20.jpg)
![Page 21: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/21.jpg)
Going external
![Page 22: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/22.jpg)
FUNCTION EXPRESSIONS
Fix this. Like lambda expressions.
![Page 23: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/23.jpg)
![Page 24: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/24.jpg)
![Page 25: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/25.jpg)
![Page 26: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/26.jpg)
INTERFACESWith type annotations.
![Page 27: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/27.jpg)
![Page 29: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/29.jpg)
What impressed me the most is what TypeScript doesn’t do. It doesn’t output type checking into your JavaScript code.
Thoughts on TypeScript
by Nicholas C. Zakas
http://bit.ly/SkGe2y
![Page 30: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/30.jpg)
Type definition files
Like header files in C, C++
* JQuery declaration for demo. Real declarations are verbose.
Definitely Typed
https://github.com/borisyankov/DefinitelyTyped
![Page 31: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/31.jpg)
Of course, all valid Javascript is valid Typescript so you can just change the file extension and be compiling it but if you
want all the benefits you will want to take advantage of some type annotations and
that's the manual part.
Typescript - a real world story of adoption in TFS
by Brian Harry
http://bit.ly/SkGe2y
![Page 32: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/32.jpg)
COFFESCRIPT CLOSURE
CoffeScript has more code sugar to be fair.Check out if interested:CoffeScript the Good Parts
by Bruno Devićhttp://slides.com/brunodevic/coffeescript-the-good-parts
![Page 33: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/33.jpg)
DEMO
https://github.com/Fosna/TypeBoxes
![Page 34: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/34.jpg)
Object model
![Page 35: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/35.jpg)
FINAL THOUGHTSInteresting quotes
![Page 36: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/36.jpg)
Microsoft's TypeScript may be the best of the many JavaScript front ends. It seems to
generate the most attractive code.
post on Google+
by Douglas Crockford
bit.ly/SnJzw5
![Page 37: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/37.jpg)
And I think it should take pressure off of the ECMAScript Standard for new features like type declarations and classes. Anders
has shown that these can be provided nicely by a preprocessor, so there is no need to
change the underlying language.
same post on Google+
by Douglas Crockford
bit.ly/SnJzw5
![Page 38: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/38.jpg)
I think that JavaScript's loose typing is one of its best features and that type checking is way overrated. TypeScript adds sweetness, but at
a price. It is not a price I am willing to pay.
same post on Google+
by Douglas Crockford
bit.ly/SnJzw5
![Page 39: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/39.jpg)
TypeScript feature that suprised me the most, the quality of the JavaScript generated by the
TypeScript transcompiler and the transcompiler itself as a tool to learn JavaScript best
practices.
Learn TypeScript to Improve Your JavaScript
by Jaime González García
http://bit.ly/1ojyhVJ
![Page 40: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/40.jpg)
References
Spread throughout the presentation.
![Page 41: TypeScript: What to do with types in JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022052522/554f5754b4c905423f8b5685/html5/thumbnails/41.jpg)