HItchhickers Guide to TypeScript

967 views

Published on

A talk describing how TypeScript works and how you can use it to build large scale JavaScript applications

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
967
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Reliability and CorrectnessAs a community, we’ve grown quickly.  There are now dozens of large applications written by teams in Microsoft, including Bing, Xbox, TFS, So.cl, as well as in projects such as Adobe Digital Publishing Suite for Windows 8.1, Zud.io, Away3D, and Turbulenz.  Millions of lines of code are now active in the wild, which reflects a serious indication of the level of commitment and energy that that the community is investing in TypeScript. 
  • TSC – CommandlineTSC on a Mac
  • An ordinary function in JavaScript.This look odd. We are putting a property on xand then trying to add it. TypeScript in thisinstance will assume that x is of type any.
  • If I annotate x as a string things start to light up In sublime. You will nottice errors being thrown in the code below it is saying that a string can't have a name property.
  • http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx
  • So If I change the x to a number. Then the product of x+x will be a number. So v is inferred to be a number
  • Lastly we will add the last primitive type Boolean, this will error since you can't add two Booleans together.
  • You can have an array of string. This means IDEs and Text editors can add statement completion to an array
  • You can state that x is a function That returns a string. If you call x the result will be a string.
  • You can state that x is a function you can describe the shape of an object so in this instance a will have a string propert called a and a b property of type number.
  • If you add an interface you can use that as a type.
  • You can define you own types using interfaces. Thing describes the object literal with an (a) number property and a (b) string property. Even though the process function doesn't return a type we have given the compiler enough information to infer that (n) will be of type number.
  • If we introduce a property (c) but then do not provide it when we initialise the process function. We will encouter a complie time error.
  • Interfaces can model all sorts of JavaScript objects, You can add a function signature simply. foo accepts a string and a number and returns a string
  • You can have overloads. You can see here that foo is declared twice with two different signatures on line 4 and 5. When we call the function our editor can alert us that there are overloads.
  • Modeling Real world JavaScript objects can be complex. Here we have added the overloads with a slightly different syntax, and have added a data object to foo.
  • You can model constructors, You can model what happen when someone indexes the (thing) telling TypeScript to return a date.
  • You can add an interface to an object so the miss spelling of clear() is picked up and the app will not compile.
  • (and no, not those private parts) The final thing I want to discuss regarding JavaScript objects is private properties and functions. One of the key tenants of object oriented programming is the ability of objects to hide state and logic in order to exposure a simple interface. Most object oriented languages have access modifiers which allow you to make methods, properties or variables private (or protected). JavaScript does not have a first-class language feature that supports information hiding in the context of object creation.
  • You Will notice that on the constructor
  • You Will notice that on the constructor
  • def·i·nite·ly [ déffənitlee ]   certainly: without a doubtfinally and unchangeably: as a conclusion after some thought or hesitationexactly: in a precise way
  • HItchhickers Guide to TypeScript

    1. 1. The HITCHH GUIDE TO TYPESCRIPT Martin Beeby - @thebeebs – Slides: https://bit.ly/londonjs-thebeebs
    2. 2. JAVASCRIPT ;
    3. 3. JAVA IS TO JAVASCRIPT AS CAR IS TO CARPET
    4. 4. http://bit.ly/vsonline VISUAL STUDIO
    5. 5. TYPESCRIPT – ALL OPEN SOUCE TO HELP BUILDING LARGE SCALE JAVASCRIPT APPLICATIOJNS
    6. 6. TYPESCRIPT WORKS IN ANY BROWSER AND IN ANY HOST. IT’S ONLY DEPENDENCY IS JAVASCRIPT
    7. 7. BABEL FISH
    8. 8. http://www.typescriptlang.org npm install -g typescript > tsc yourfile.ts INSTALL WITH NODE
    9. 9. >> TSC greeter.ts SIDE BY SIDE
    10. 10. https://gist.github.com/thebeebs/8960828 function process(x){ x.name = "foo"; var v = x + x; alert(v); } VANILLA JS
    11. 11. https://gist.github.com/thebeebs/8961828 function process(x: string){ x.name = "foo"; var v = x + x; alert(v); } INTRODUCE
    12. 12. EDITORS/ID ES Compiler is Open Source Sublime/Vim/Emacs Visual Studio/Online
    13. 13. https://gist.github.com/thebeebs/8962419 function process(x : number){ var v = x + x; alert(v); } NUMBER
    14. 14. https://gist.github.com/thebeebs/8962676 function process(x: boolean){ var v = x + x; } BOOLEAN
    15. 15. https://gist.github.com/thebeebs/8962940 STRING ARRAY
    16. 16. https://gist.github.com/thebeebs/8963929 function process(x: () => string){ x().toLowerCase(); } PASS A FUNCTIONS
    17. 17. https://gist.github.com/thebeebs/8964006 function process(x: {a: string; b: number}){ return x.a.length; } OBJECT LITERAL
    18. 18. https://gist.github.com/thebeebs/8964110 interface Thing { a: number; b: string; } function process(x: Thing){ return x.b.length; } INTERFACE
    19. 19. https://gist.github.com/thebeebs/8964579 interface Thing { a: number; b: string; } function process(x: Thing){ return x.a; } var n = process({a: 10, b:'Beeby'}) n.toFixed(0.0); TYPE INFERENCE
    20. 20. https://gist.github.com/thebeebs/8964673 interface Thing { a: number; b: string; c: boolean; } function process(x: Thing){ return x.a; } var n = process({a: 10, b:'Beeby'}); n.toFixed(0.0); INTERFACE – COMPILE
    21. 21. https://gist.github.com/thebeebs/8964846 interface Thing { a: number; b: string; c?: boolean; } function process(x: Thing){ return x.a; } var n = process({a: 10, b:'Beeby', c:'fail' }); n.toFixed(0.0); OPTIONAL MEMBERS
    22. 22. https://gist.github.com/thebeebs/8964901 interface Thing { a: number; b: string; foo(x: string, n: number): string; } function process(x: Thing){ return x.foo("string",10); } FUNCTIONS ON
    23. 23. https://gist.github.com/thebeebs/8965003 interface Thing { a: number; b: string; foo(x: string, n?: number): string; } function process(x: Thing){ return x.foo("string"); } FUNCTION OPTIONAL
    24. 24. https://gist.github.com/thebeebs/8965079 OVERLOADS
    25. 25. https://gist.github.com/thebeebs/8965150 interface Thing { a: number; b: string; foo: { (x: string): string; (x: number): number; data: any; }; } function process(x: Thing){ return x.foo(2) } MODELING REAL
    26. 26. https://gist.github.com/thebeebs/8965207 interface Thing { a: number; b: string; foo: { (x: string): string; (x: number): number; data: any; }; new (s: string): Element; [index: number]: Date; } function process(x: Thing){ var date = x[0].getDate(); var el = new x("blah").clientWidth; return date; } MODEL
    27. 27. https://gist.github.com/thebeebs/8965565 interface Rapper { say(x: string): void; clear(): void; speak(): string; } function makeRapper(): Rapper{ var words; return { say: function (x: string){ words = x; }, clearSpeltWrong: function (){ words = '';}, speak: function(){return words;} }; } makeRapper(); FUNCTION
    28. 28. https://gist.github.com/thebeebs/8965565 ERRORS IN SUBLIME
    29. 29. https://gist.github.com/thebeebs/8966140 DEFINITION FILES
    30. 30. FAT ARROWS =>
    31. 31. http://www.typescriptlang.com/playground var Greeter =( function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })(); var greeter = new Greeter("world"); CLASSES
    32. 32. TYPESCRIPT class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } var greeter = new Greeter("world"); CLASSES
    33. 33. http://www.typescriptlang.com/playground interface Shape { name: string; width: number; height: number; color?: string; } function area(shape : Shape) { var area = shape.width * shape.height; return "I'm " + shape.name + " with area " + area + " cm squared"; } INTERFACES
    34. 34. PRIVATES
    35. 35. TYPESCRIPT class Animal { constructor(public name: string) { } move(meters: number) { alert(this.name + " moved " + meters + "m."); } } class Horse extends Animal { constructor(name: string) { super(name); } move() { alert("Galloping..."); super.move(45); } } INHERITENCE
    36. 36. http://www.typescriptlang.com/playground class Greeter<T> { greeting: T; constructor(message: T) { this.greeting = message; } greet() { return this.greeting; } } var greeter = new Greeter<string>("Hello World"); var button = document.createElement('button'); button.textContent = "Say Hello"; button.onclick = function () { alert(greeter.greet()); } document.body.appendChild(button); GENERICS
    37. 37. https://github.com/DefinitelyTyped RD 3 PARTY LIBS
    38. 38. SO LONG AND THANKS FOR ALL THE FUNCTIONS
    39. 39. CONTACT MARTIN BEEBY @thebeebs http://www.thebeebs.co.uk martin.beeby@microsoft.com

    ×