Tutorial on classes and functions added

TODO: more on indexers, check the comment emitted twice for f2 function
This commit is contained in:
Philippe 2014-08-14 15:40:21 +02:00
parent fda947d939
commit 7f2256b2e6

View File

@ -6,11 +6,11 @@ contributors:
TypeScript is a language that aims at easing development of large scale applications written in JavaScript. TypeScript is a language that aims at easing development of large scale applications written in JavaScript.
TypeScript adds common concepts such as classes, modules, interfaces, generics and (optional) static typing to JavaScript. TypeScript adds common concepts such as classes, modules, interfaces, generics and (optional) static typing to JavaScript.
It is a superset of JavaScript: all JavaScript code is valid TypeScript code so it can be added seamlessly to any project. In turn, the TypeScript compiler transform the code to JavaScript. It is a superset of JavaScript: all JavaScript code is valid TypeScript code so it can be added seamlessly to any project. The TypeScript compiler emitts JavaScript.
This article will focus only on TypeScript added syntax, everything else is plain [JavaScript] (../javascript/). This article will focus only on TypeScript extra syntax, as oposed to [JavaScript] (../javascript/).
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 resulting JavaScript. 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.
```ts ```ts
//There are 3 basic types in TypeScript //There are 3 basic types in TypeScript
@ -25,10 +25,10 @@ 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]; var list: number[] = [1, 2, 3];
//Or, using the generic array type //Alternatively, using the generic array type
var list: Array<number> = [1, 2, 3]; var list: Array<number> = [1, 2, 3];
//For enumerations //For enumerations:
enum Color {Red, Green, Blue}; enum Color {Red, Green, Blue};
var c: Color = Color.Green; var c: Color = Color.Green;
@ -37,40 +37,76 @@ function bigHorribleAlert(): void {
alert("I'm a little annoying box!"); alert("I'm a little annoying box!");
} }
//Interfaces are structural, anything that has the properties is compliant with the interface. //Functions are first class citizens, have a shortened definition and can leverage the strong type inference
//In the bellow example, any object that has a name which is a string and an age which is a number is a Person. //All examples are equivalent, the same signature will be infered by the compiler and the same JavaScript will be emitted
//This is called "duck typing". var f1 = function(i: number) : number { return i * i; }
var f2 = function(i: number) { return i * i; } //Return type infered #TODO bug!
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 (duck typing)
interface Person { interface Person {
name: string; name: string;
age: number; //Optional properties, marked with a "?"
age?: number;
//Interfaces also support optional properties }
phone?: number; //Object that implements the "Person" interface
var p : Person = { name: "Bobby" }; //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 };
var invalidPerson : Person = { name: "Bobby", age: true }; //Is not a person because age is not a number
//Interfaces can also define method signatures:
interface PersonWhoCanTalk {
sayHello(otherPersonsName: string): void;
} }
//Interfaces can also describe a function type, to describe a function signature //And also indexers, both with number and string
interface PersonWhoCanBeIndexed {
[index: number]: string;
}
//TODO
//Interfaces can also describe a function type
interface SearchFunc { interface SearchFunc {
(source: string, subString: string): boolean; (source: string, subString: string): boolean;
} }
//The type can then be used for functions, and the compiler will be able to check that types are compliants //Only the parameters' types are important, names are not important.
//Note that only the parameters' types are important, names are not important.
var mySearch: SearchFunc; var mySearch: SearchFunc;
mySearch = function(src: string, sub: string) { mySearch = function(src: string, sub: string) {
var result = source.search(subString); return src.search(sub) != -1;
if (result == -1) {
return false;
}
else {
return true;
}
} }
//Classes
class Point {
//Properties
x: number;
//Constructor - the public keyword is a shortcut to generate the code for a property and it's initialization, equivalent to "x" in this case
constructor(x: number, public y: number) {
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 p = new Point(10 ,20);
//Generics
//Including references to a definition file
/// <reference path="jquery.d.ts" />
``` ```
## Further Reading ## Further Reading
* [TypeScript Official website] (http://www.typescriptlang.org/) * [TypeScript Official website] (http://www.typescriptlang.org/)
* [TypeScript language specifications (pdf)] (http://go.microsoft.com/fwlink/?LinkId=267238) * [TypeScript language specifications (pdf)] (http://go.microsoft.com/fwlink/?LinkId=267238)
* [Anders Hejlsberg - Introducing TypeScript on Channel 9] (http://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript) * [Anders Hejlsberg - Introducing TypeScript on Channel 9] (http://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript)
* [Source Code on GitHub] (https://github.com/Microsoft/TypeScript)
* [Definitely Typed - repository for type definitions] (http://definitelytyped.org/)