All you need to know about TypeScript (NDC Oslo 2013)

Video of the presentation is available at http://vimeo.com/68236434

[Link to code will be provided soon.]

There have been several attempts at patching static typing into JavaScript, but none have had notable success. TypeScript is different. Aligning with the EcmaScript 6 standard, it is a simple superset of JavaScript that’s easy and intuitive to learn — especially for those who know JavaScript. In this talk you will learn what TypeScript is, what’s new, how it differs from JavaScript, what to be aware of and where I think TypeScript is heading.

TypeScript’s static typing opens up a whole new dimension for large-scale applications. It enables language analysis, gives type safety, refactoring support in IDEs as well as other features that are hard to achieve in JavaScript. Additionally, typing is optional, so you can add typing step by step in your existing application.

This presentation will be loaded with code examples. I will give a quick comparison to some related languages like Dart and CoffeeScript, just to show you the difference and explain when TypeScript might be a safer bet.

Transcript

1. ALL YOU NEED TO KNOW ABOUT Torstein Nicolaysen @tnicolaysen NDC 2013, Oslo June 12th 2013
2. @tnicolaysen I KNOW WHY YOU’RE HERE You want to learn more about TypeScript
3. @tnicolaysen A trip down memory lane http://mrg.bz/mVH3Ye
4. @tnicolaysen sxc.hu/photo/937567
5. @tnicolaysen flickr.com/photos/rinux/317879448
6. flickr.com/photos/chrish_99/8524906705
7. @tnicolaysen WHAT CAN TYPESCRIPT DO TO HELP?
8. @tnicolaysen Agenda • Overview of TypeScript • Dive into new features • Live coding • Ecosystem • Recap and final thoughts
9. @tnicolaysen WHAT IS THIS TYPESCRIPT YOU’RE TALKING ABOUT? Let’s meet TypeScript
10. @tnicolaysen Superset of JavaScript http://mrg.bz/6k2Omx
11. @tnicolaysen Superset of JavaScript http://mrg.bz/6k2Omx
12. @tnicolaysen Compiles* to JavaScript • Compile time checking • Node Package • VS2012 add-in * = It transpiles (source-to-source) > npm install typescript
13. @tnicolaysen Official OSI logo
14. @tnicolaysen Anders Hejlsberg Lead architect of C# flickr.com/photos/9438069
15. @tnicolaysen EcmaScript6 Aligned with ES6
16. @tnicolaysen NEW FEATURES IN TYPESCRIPT Let’s dive into it! :)
17. @tnicolaysen Overview of main features • Type annotations and compile-time type checking • Classes • Interfaces • Modules • Arrow functions (Lambda functions)
18. @tnicolaysen TYPES
19. @tnicolaysen Primitive types string number bool any void* * = Not really a type, but JS does not have this concept Fallback type
20. @tnicolaysen Optional types • Gradually migrate into using types • Use types where needed • Flexiblility
21. @tnicolaysen TypeScript Syntax var name; // Type is 'any'
22. @tnicolaysen TypeScript Syntax var name; // Type is 'any' name = 42;
23. @tnicolaysen TypeScript Syntax var name; // Type is 'any' name = 42; name = "Zaphod";
24. @tnicolaysen TypeScript Syntax var name; // Type is 'any' name = 42; name = "Zaphod"; name = { first: "Zaphod", last: "Beeblebrox" };
25. @tnicolaysen Static typing var name: string; TypeScript
26. @tnicolaysen Static typing var name: string; TypeScript
27. @tnicolaysen Static typing var name: string; name = 42; // Compiler complaints TypeScript
28. @tnicolaysen Static typing var name: string; name = 42; // Compiler complaints name = "Zaphod"; TypeScript
29. @tnicolaysen Type inferece var name = "Arthur"; TypeScript
30. @tnicolaysen Type inferece var name = "Arthur"; // Infers that type is 'string' TypeScript
31. @tnicolaysen Type inferece var name = "Arthur"; // Infers that type is 'string' name = 42; // Compiler complaints TypeScript
32. @tnicolaysen Type inferece var name = "Arthur"; // Infers that type is 'string' name = 42; // Compiler complaints name = "Marvin"; TypeScript
33. @tnicolaysen DEMO: TYPE ANNOTATION
34. @tnicolaysen INTERFACES
35. @tnicolaysen Syntax interface ISlide { title: string; content: any; footer?: string; next(): void; prev(): void; } Means that it’s optional
36. @tnicolaysen Common usage • Ensure that class implement certain members – class Beer implements IBrew Interface
37. @tnicolaysen Common usage • Ensure that class implement certain members – class Beer implements IBrew • Ensure parameters has certain members – function calculateSurface(shape: IShape): number Interface Interface
38. @tnicolaysen CLASSES ES6
39. @tnicolaysen Syntax • Can contain: – Constructors – Fields – Functions – Properties class Particpant { name: string; constructor (name: string) { this.name = name; } screamName() { alert(this.name.toUpperCase()); } } TypeScript
40. @tnicolaysen Syntax • Can contain: – Constructors – Fields – Functions – Properties class Particpant { name: string; constructor (name: string) { this.name = name; } screamName() { alert(this.name.toUpperCase()); } } TypeScript
41. @tnicolaysen Syntax • Can contain: – Constructors – Fields – Functions – Properties class Particpant { name: string; constructor (name: string) { this.name = name; } screamName() { alert(this.name.toUpperCase()); } } TypeScript
42. @tnicolaysen Syntax • Can contain: – Constructors – Fields – Functions – Properties class Particpant { name: string; constructor (name: string) { this.name = name; } screamName() { alert(this.name.toUpperCase()); } } TypeScript
43. @tnicolaysen DEMO: CLASSES Because it’s better than slides
44. @tnicolaysen ARROW FUNCTIONS ES6
45. @tnicolaysen Arrow functions in a nutshell • Also known as «lambda functions» in other languages • Simply: A shorthand for writing functions • Binds the this keyword lexically
46. @tnicolaysen Syntax () => alert("I'm a lambda"); TypeScript
47. @tnicolaysen Syntax () => alert("I'm a lambda"); function () { return alert("I'm a lambda"); } TypeScript JavaScript
48. @tnicolaysen Syntax () => alert("I'm a lambda"); function () { return alert("I'm a lambda"); } TypeScript JavaScript
49. @tnicolaysen Syntax () => alert("I'm a lambda"); function () { return alert("I'm a lambda"); } TypeScript JavaScript
50. @tnicolaysen Syntax var sin = (x) => Math.sin(x); sin(/2); // > 1 TypeScript
51. @tnicolaysen Syntax var sin = (x) => Math.sin(x); sin(/2); // > 1 var sin = function (x) { return Math.sin(x); }; TypeScript JavaScript
52. @tnicolaysen Syntax var sin = (x) => Math.sin(x); sin(/2); // > 1 var sin = function (x) { return Math.sin(x); }; TypeScript JavaScript
53. @tnicolaysen Syntax var sin = (x) => Math.sin(x); sin(/2); // > 1 var sin = function (x) { return Math.sin(x); }; TypeScript JavaScript
54. @tnicolaysen Syntax var sin = (x) => Math.sin(x); sin(/2); // > 1 var sin = function (x) { return Math.sin(x); }; TypeScript JavaScript
55. @tnicolaysen Common usage • Working with callbacks – UI – WebSocket – Events • Writing code with functional style
56. @tnicolaysen DEMO: ARROW FUNCTIONS More details and example of lexical scoping
57. @tnicolaysen MODULES ES6
58. @tnicolaysen Modules in a nutshell • Similar to: – «namespaces» in C# – «packages» in Java • Encapsulation • Code reuse • Compile for CommonJS or AMD
59. @tnicolaysen Syntax module ActionHeroes { }
60. @tnicolaysen Syntax module ActionHeroes { export class Ninja { } export function createChuckNorris { } export var SpecialNumber: number = 42; }
61. @tnicolaysen Syntax module ActionHeroes { export class Ninja { } export function createChuckNorris { } export var SpecialNumber: number = 42; }
62. @tnicolaysen Modules in the real world • «Internal» modules – Load files in <script> tags – Must reference files • «External» modules – Module across files – Script loader (e.g. require.js) /// <reference path="ndc-types.ts" />
63. @tnicolaysen DEMO: ADVANCED MODULES Skipping basics and showing existing code
64. @tnicolaysen PARAMETERS ES6
65. @tnicolaysen Default parameter function render(debug: bool = false) { }
66. @tnicolaysen Default parameter function render(debug: bool = false) { } render();
67. @tnicolaysen Default parameter function render(debug: bool = false) { } render(); render(true);
68. @tnicolaysen Optional parameters function startTask(options?: any) { }
69. @tnicolaysen Optional parameters function startTask(options?: any) { } startTask();
70. @tnicolaysen Optional parameters function startTask(options?: any) { } startTask(); startTask({ warmUp: true, logging: false });
71. @tnicolaysen Rest parameter function announce(winner: string, ... theRest:string[]) { }
72. @tnicolaysen Rest parameter function announce(winner: string, ... theRest:string[]) { } announce("Norway", "Sweeden", "Denmark", "Iceland");
73. @tnicolaysen Rest parameter function announce(winner: string, ... theRest:string[]) { } announce("Norway", "Sweeden", "Denmark", "Iceland"); // theRest = ["Sweeden", "Denmark", "Iceland"]
74. @tnicolaysen TYPE DEFINITION FILES
75. @tnicolaysen Ambient declarations declare var $: JQuery; • Tell TypeScript: «Chill! I know that this variable is declared somewhere.»
76. @tnicolaysen Ambient declarations declare var $: JQuery; • Tell TypeScript: «Chill! I know that this variable is declared somewhere.»
77. @tnicolaysen • *.d.ts = Type Definition Files – Get types on your existing JS files (e.g. jQuery) • Ambient Declarations • Give your 3rd party libraries type safety • DefinitelyTyped: http://goo.gl/ekUjl
78. @tnicolaysen QUICK DEMO: TYPE DEFINITION FILES
79. @tnicolaysen TOOLING
80. @tnicolaysen IDE support
81. @tnicolaysen Community tools • TypeScript definition package manager • WebEssantials – A must have for VS2012
82. @tnicolaysen COMPARING TYPESCRIPT CoffeeScript and Google’s Dart
83. @tnicolaysen Compared to CoffeeScript • Higher abstraction • Lends style from Ruby and Python • More functional • Provides a simple class concept • Does not hande file loading and modules
84. @tnicolaysen Compared to Google’s Dart • Completely new langauge – Reduced reuse of your JS skills • Tries to solve JS’s many problems • Many of the same language constructs as TS • Potential vendor lock-in • Criticism from Brendan Eich and Douglas Crockford
85. JAVASCRIPT IS GETTING THERE... ... but it will take some time sxc.hu/photo/994583
86. @tnicolaysen The future of TypeScript sxc.hu/photo/1212906
87. @tnicolaysen HERE BE DRAGONS! But they’re not that dangerous http://mrg.bz/qkUaxM
88. @tnicolaysen JS frameworks • JS design != TS design • Mismatch • Tip: Look for dedicated TS frameworks
89. @tnicolaysen Cluttering syntax • Can be messy if used without caution • Inline type-specification/interfaces • Shorthand constructors • Deeply nested modules • Complex arrow-functions
90. @tnicolaysen Still a preview • Protected accessability is not yet implemented – Is planned! • There are a few bugs – Check issue tracker on Codeplex • Still features that need improvement
91. @tnicolaysen LET’S LOOK BACK AT OUR JOURNEY What you’ve learned http://mrg.bz/Tir9bY
92. @tnicolaysen • What TypeScript is • Taken a deep-dive into the new features • Looked at some features for the real world • Compared it to other languages • Seen what’s happening now http://mrg.bz/Tir9bY
93. @tnicolaysen • Compiler • Strong typing • Encapsulation • Dependency mangement • IDE support • Lowers the threshold
94. @tnicolaysen For large-scale* apps • More robust apps • Enforce design • Maintainability • Easier to get/train developers * Long-lived applications that need to be maintained
95. @tnicolaysen For small-scale apps • Simplified build-process • Less bootstrapping • Help with syntax for new frameworks – I can’t count the number of times I’ve looked up the documentation for underscore.js
96. @tnicolaysen QUESTIONS? Feel free to get a hold of me later! I’d love to discuss JS and TypeScript sxc.hu/photo/860327
97. THANK YOU FOR YOUR ATTENTION Torstein Nicolaysen torstein.nicolaysen@bekk.no @tnicolaysen