TypeScript is a language for application-scale JavaScript development.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.
TypeScript is a language for application-scale JavaScript development.
function Greeter(greeting: string){
this.greeting = greeting;
}
Greeter.prototype.greet = function() {
return "Hello, " + this.greeting;
}
var greeter = new Greeter("world");
var button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() { alert(greeter.greet()); };
document.body.appendChild(button);
function Greeter(greeting) {
this.greeting = greeting;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
var greeter = new Greeter("world");
var button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function () {
alert(greeter.greet());
};
document.body.appendChild(button);
$ sudo npm install typescript -g
$tsc source.ts
function ( a:string, b:number, c:boolean, d:string[], e:CustomType )
// normal declaration
var typedStringArray:string[] = [];
var typedNumberArray:number[] = [];
// Alternate declaration
var typedNumberArray:Array<number> = new Array<number>();
// Multiple dimensional Arrays
var multiDimensionalArray:number[][];
var multiDimensionalArray:CustomType[][];
// Inline declaration
var callBack:()=>void;
function asyncLoad( cb:( data:any, error:string )=>void ):void { ... }
// Interface declaration
interface ICallBack{ ( data:any, error:string ):void }
function asyncLoad( cb:ICallBack ):void { ... }
var typedDict:{ [name:string]:string } = [];
typedDict['test'] = "Hello"; // Pass
typedDict['test'] = 10; // Fail
var typedDict:{ [name:string]:CustomClass } = [];
interface ITypedDict{ [name:string]:CustomClass; }
var typedDict:ITypedDict = [];
var c = ( e ) =>{ return e*e }
var c = e => e*e;
class A
{
data:number = 10;
c:(e)=>void = (e) =>{ e*e* this.data }
}
var c = function (e) {
return e * e;
};
var c = function (e) {
return e * e;
};
var A = (function () {
function A() {
var _this = this;
this.data = 10;
this.c = function (e) {
e * e * _this.data;
};
}
return A;
})();
interface ILogger {}
class Logger {}
var loggerA: ILogger;
var loggerB: Logger;
interface IJSONResult {
result:string;
code:number;
}
var result: IJSONResult = { result:"World", code:200 } // Pass var result: IJSONResult = { result:"World", code:"200" } // Fail
interface A
{
methodA();
}
interface B extends A
{
methodB();
}
class C implements A, B
{
methodA(){}
methodB(){}
}
interface A
{
method();
method(total:number);
method(total:string, sum?:number );
}
interface I { foo(x: number): void; foo(x: string): void; }
interface I { foo(x: Date): void; foo(x: {abc: string}): void; }
interface I {
foo(x: Date): void;
foo(x: {abc: string}): void;
foo(x: number): void;
foo(x: string): void;
}
class Greeter
{
constructor() { ... }
... }
constructor( message: string ){}
constructor( public message: string, private text:string ){}
method( optionalParam?:string ){}
method( defaultValue:number = 100 ){}
class Greeter {
greeting: string;
public greeting:string;
private _greeting:string;
public static EVENT:string = "event";
public private EVENT:string = "event";
}
...
method():void{}
public method():boolean{ return false; }
private method():boolean{ return false; }
public static method():boolean{ return false; }
private static method():boolean{ return false; }
...
class A { constructor(){ console.log('SUPER CONSTRUCTOR'); } methodA(){ console.log('SUPER METHOD A'); } }
class B extends A { constructor() { super(); // must first call super console.log('DERIVED CONSTRUCTOR'); ... } methodB(){} }
class A { methodA( c:string ) methodA( c:number ) methodA( c:string[] ) { // Debemos de comprobar nosotros los tipos
}
}
var canv = document.createElement('canvas');
canv.getContext('2d');
var canv:HTMLCanvasElement = <HTMLCanvasElement>document.createElement('canvas');
canv.getContext('2d');
interface Document {
createElement(tagName: string): HTMLElement;
createElement(tagName: 'canvas'): HTMLCanvasElement;
createElement(tagName: 'div'): HTMLDivElement;
createElement(tagName: 'span'): HTMLSpanElement;
// + 100 more
}
var canv:HTMLCanvasElement = /*infered*/document.createElement('canvas');
canv.getContext('2d');
interface ICustomType {
....
select(tag:string):HTMLElement;
select(tag:'canvas'):HTMLCanvasElement;
select(tag:'image'):HTMLImageElement;
select(tag:'custom'):CustomElement;
....
}
enum Style
{
NONE = 0,
BOLD = 1,
ITALIC = 2,
UNDERLINE = 4,
EMPHASIS = Style.BOLD | Style.ITALIC,
HYPERLINK = Style.BOLD | Style.UNDERLINE
}
enum Status
{
New,
Active,
Disabled
}
enum TShirtSize
{
Small,
Medium,
Large
}
// get enum value
var c:number = TShirtSize.Small; // 0
var d:string = TShirtSize[TShirtSize.Small]; // Small
module x
{
module y
{
module z
{
}
}
}
module x.y.z
{
}
function cast<T>( obj:any ):T
{
return <T>obj;
}
interface A { method(); }
class B implements A { method(){} } class C{ } function cast<T extends A>
( obj:any ):T { return <T> obj; } var a:B = cast( new B() ); // OK var b:B = cast ( new C() ); // Fail
interface Array<T>{
...
map<U>(callbackfn: (value: T, index: number, array: T[]) => U): U[];
...
}
export class Pool<T>
{
private pool:Array<T>;
private counter:number;
constructor(type:any, len:number)
{
this.pool = [];
this.counter = len;
var i:number = len;
while (--i > -1)
this.pool[i] = new type();
return this;
}
public pop():T
{
if (this.counter > 0)
return this.pool[--this.counter];
else
throw new Error("You exhausted the pool!");
}
public push(s:T):void { this.pool[this.counter++] = s; }
public getPool():Array { return this.pool; }
}