diff options
Diffstat (limited to 'typescript.html.markdown')
-rw-r--r-- | typescript.html.markdown | 133 |
1 files changed, 72 insertions, 61 deletions
diff --git a/typescript.html.markdown b/typescript.html.markdown index 9f04169a..27a1f71a 100644 --- a/typescript.html.markdown +++ b/typescript.html.markdown @@ -14,100 +14,111 @@ This article will focus only on TypeScript extra syntax, as oposed to [JavaScrip To test TypeScript's compiler, head to the [Playground] (http://www.typescriptlang.org/Playground) where you will be able to type code, have auto completion and directly see the emitted JavaScript. ```js -//There are 3 basic types in TypeScript +// There are 3 basic types in TypeScript var isDone: boolean = false; var lines: number = 42; var name: string = "Anders"; -//..When it's impossible to know, there is the "Any" type +// When it's impossible to know, there is the "Any" type var notSure: any = 4; notSure = "maybe a string instead"; notSure = false; // okay, definitely a boolean -//For collections, there are typed arrays and generic arrays +// For collections, there are typed arrays and generic arrays var list: number[] = [1, 2, 3]; -//Alternatively, using the generic array type +// Alternatively, using the generic array type var list: Array<number> = [1, 2, 3]; -//For enumerations: +// For enumerations: enum Color {Red, Green, Blue}; var c: Color = Color.Green; -//Lastly, "void" is used in the special case of a function not returning anything +// Lastly, "void" is used in the special case of a function returning nothing function bigHorribleAlert(): void { alert("I'm a little annoying box!"); } -//Functions are first class citizens, support the lambda "fat arrow" syntax and use type inference -//All examples are equivalent, the same signature will be infered by the compiler, and same JavaScript will be emitted -var f1 = function(i: number) : number { return i * i; } -var f2 = function(i: number) { return i * i; } //Return type infered -var f3 = (i : number) : number => { return i * i; } -var f4 = (i: number) => { return i * i; } //Return type infered -var f5 = (i: number) => i * i; //Return type infered, one-liner means no return keyword needed - -//Interfaces are structural, anything that has the properties is compliant with the interface +// Functions are first class citizens, support the lambda "fat arrow" syntax and +// use type inference + +// The following are equivalent, the same signature will be infered by the +// compiler, and same JavaScript will be emitted +var f1 = function(i: number): number { return i * i; } +// Return type inferred +var f2 = function(i: number) { return i * i; } +var f3 = (i: number): number => { return i * i; } +// Return type inferred +var f4 = (i: number) => { return i * i; } +// Return type inferred, one-liner means no return keyword needed +var f5 = (i: number) => i * i; + +// Interfaces are structural, anything that has the properties is compliant with +// the interface interface Person { name: string; - //Optional properties, marked with a "?" + // Optional properties, marked with a "?" age?: number; - //And of course functions + // And of course functions move(): void; } -//..Object that implements the "Person" interface -var p : Person = { name: "Bobby", move : () => {} }; //Can be treated as a Person since it has the name and age properties -//..Objects that have the optional property: -var validPerson : Person = { name: "Bobby", age: 42, move: () => {} }; -var invalidPerson : Person = { name: "Bobby", age: true }; //Is not a person because age is not a number +// Object that implements the "Person" interface +// Can be treated as a Person since it has the name and move properties +var p: Person = { name: "Bobby", move: () => {} }; +// Objects that have the optional property: +var validPerson: Person = { name: "Bobby", age: 42, move: () => {} }; +// Is not a person because age is not a number +var invalidPerson: Person = { name: "Bobby", age: true }; -//..Interfaces can also describe a function type +// Interfaces can also describe a function type interface SearchFunc { (source: string, subString: string): boolean; } -//..Only the parameters' types are important, names are not important. +// Only the parameters' types are important, names are not important. var mySearch: SearchFunc; mySearch = function(src: string, sub: string) { return src.search(sub) != -1; } -//Classes - members are public by default +// Classes - members are public by default class Point { - //Properties - x: number; - - //Constructor - the public/private keywords in this context will generate the boiler plate code - // for the property and the initialization in the constructor. - // In this example, "y" will be defined just like "x" is, but with less code - //Default values are also supported - constructor(x: number, public y: number = 0) { - this.x = x; - } - - //Functions - dist() { return Math.sqrt(this.x * this.x + this.y * this.y); } - - //Static members - static origin = new Point(0, 0); + // Properties + x: number; + + // Constructor - the public/private keywords in this context will generate + // the boiler plate code for the property and the initialization in the + // constructor. + // In this example, "y" will be defined just like "x" is, but with less code + // Default values are also supported + + constructor(x: number, public y: number = 0) { + this.x = x; + } + + // Functions + dist() { return Math.sqrt(this.x * this.x + this.y * this.y); } + + // Static members + static origin = new Point(0, 0); } var p1 = new Point(10 ,20); var p2 = new Point(25); //y will be 0 -//Inheritance +// Inheritance class Point3D extends Point { - constructor(x: number, y: number, public z: number = 0) { - super(x, y); //Explicit call to the super class constructor is mandatory - } - - //Overwrite - dist() { - var d = super.dist(); - return Math.sqrt(d * d + this.z * this.z); - } + constructor(x: number, y: number, public z: number = 0) { + super(x, y); // Explicit call to the super class constructor is mandatory + } + + // Overwrite + dist() { + var d = super.dist(); + return Math.sqrt(d * d + this.z * this.z); + } } -//Modules, "." can be used as separator for sub modules +// Modules, "." can be used as separator for sub modules module Geometry { export class Square { constructor(public sideLength: number = 0) { @@ -120,32 +131,32 @@ module Geometry { var s1 = new Geometry.Square(5); -//..Local alias for referencing a module +// Local alias for referencing a module import G = Geometry; var s2 = new G.Square(10); -//Generics -//..Classes +// Generics +// Classes class Tuple<T1, T2> { constructor(public item1: T1, public item2: T2) { } } -//..Interfaces +// Interfaces interface Pair<T> { - item1: T; - item2: T; + item1: T; + item2: T; } -//..And functions +// And functions var pairToTuple = function<T>(p: Pair<T>) { - return new Tuple(p.item1, p.item2); + return new Tuple(p.item1, p.item2); }; var tuple = pairToTuple({ item1:"hello", item2:"world"}); -//Including references to a definition file: +// Including references to a definition file: /// <reference path="jquery.d.ts" /> ``` |