TypeScript for dummies?                Ing. Santiago Aguiar                saguiar@infragistics.com
¿Qué es TypeScript?• Un lenguaje + compilador que genera Javascript• Desarrollado por Microsoft y diseñado por Anders  Hej...
Qué aporta….?• Superset de JavaScript   o Todo código JS es código TS válido ...casi• Compile-time type checking, opcional...
Cross-platform?• Compilador y language services escritos en  TypeScript• Plugin de node.js ejecutable desde shell:  > tsc ...
Tooling fuera de VSACE EditorTypeScript Playground...Vim / Emacs / Sublime 2?
El lenguaje• Declaración de Tipos• Clases y herencia• Interfaces & Structural Typing• Módulos• Lambdas (arrow expressions)...
var name: string;name = 0;name = "foo";var point: { x: number; y: number; z?: number; };                                  ...
Clasesclass User {                                                    var User = (function () { constructor(public name: s...
class Meetup {    static Version = "1.0";    private _date: Date;    constructor(date?: Date) {        this._date = date |...
Interfaces &                          Structural Typinginterface Point {    x: number;    y: number;}function move(point: ...
MódulosModuleA.ts                                                            define(["require", "exports"],export function...
LambdasTypeScriptthis._participants.forEach(p => this.invite(p));this._participants.forEach(p => this.invite(p));Javascrip...
Una library en JS: external.jsAnUglyGlobal = function (value) {          JS Libraries    this.field = value;} // a constru...
Muy lindo, pero ya existe…• CoffeeScript  o No es JS. No hay type checking.• Closure  o Anotaciones en la documentación. A...
Type Checking?Douglas Crockford: Microsofts TypeScript may be the best of the many JavaScript front ends. (…) it seems to ...
Por qué lo elegimos?• Implementado un diseño OO existente.• No queríamos tener que inventar nuestra propia  forma de defin...
Links•   TypeScript source code (http://typescript.codeplex.com/)•   TypeScript Playground (http://www.typescriptlang.org/...
Upcoming SlideShare
Loading in …5
×

Type script, for dummies

498 views
358 views

Published on

Presentación sobre TypeScript para la JSMeetup del 2013-4-4 (http://www.meetup.com/mvd-js/events/103587282/)

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

  • Be the first to like this

No Downloads
Views
Total views
498
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Presentaremoslasprincipalescaracterísticas de TypeScript, quecosasnuevastrae al mundo de Javascript, mostraremosconstrucciones y sintaxis del lenguaje y luegodiscutiremossuutilidadcomoherramientapara el desarrollo de aplicaciones web.
  • Type script, for dummies

    1. 1. TypeScript for dummies? Ing. Santiago Aguiar saguiar@infragistics.com
    2. 2. ¿Qué es TypeScript?• Un lenguaje + compilador que genera Javascript• Desarrollado por Microsoft y diseñado por Anders Hejlsberg (Pascal, Delphi, C#) Microsoft?! “I fully expect to find their grandmother under the bus along with Silverlight! ”, someone@google+ Open Source Compiler + Tooling: Apache 2.0 License Especificación: OWF http://typescript.codeplex.com/
    3. 3. Qué aporta….?• Superset de JavaScript o Todo código JS es código TS válido ...casi• Compile-time type checking, opcional ...casi• Construcciones de ECMAScript 6: o Módulos o Clases y OOP o Lambdas o No mucho más…• Tooling: completion, refactoring, navigation.
    4. 4. Cross-platform?• Compilador y language services escritos en TypeScript• Plugin de node.js ejecutable desde shell: > tsc file.ts• Reusable desde cualquier entorno donde pueda ejecutar Javascript
    5. 5. Tooling fuera de VSACE EditorTypeScript Playground...Vim / Emacs / Sublime 2?
    6. 6. El lenguaje• Declaración de Tipos• Clases y herencia• Interfaces & Structural Typing• Módulos• Lambdas (arrow expressions)• Integración con librerías de JS• Futuro: generics & constant overloads
    7. 7. var name: string;name = 0;name = "foo";var point: { x: number; y: number; z?: number; }; Tipospoint = { x: "0", z: 1};point = { x: 1, y: 2};function move(point: { x: number; y: number; }, delta: number) { return { x: point.x + delta, y: point.y + delta };}point = move(point, 5);var names: string[] = [];names.push(1);names.push("foo");// contextual typingvar alias: (point: { x: number; y: number; }, delta: number) => any;alias = moveIt;alias = (point, delta) => point.x;
    8. 8. Clasesclass User { var User = (function () { constructor(public name: string) { function User(name) { } this.name = name;} } Javascript return User; TypeScript })();class Participant extends User { var Participant = (function (_super){ invited: bool; __extends(Participant, _super); constructor(name: string) { function Participant(name) { super(name); _super.call(this, name); } }} return Participant; })(User);
    9. 9. class Meetup { static Version = "1.0"; private _date: Date; constructor(date?: Date) { this._date = date || new Date(); Miembros } get date() { return this._date; } set date(newDate: Date) { return this._date = newDate; } postpone(date: Date); postpone(day: number, month: number); postpone() { if (arguments.length === 1) { this.date = arguments[0]; } else { this.date.setDate(arguments[0]); this.date.setMonth(arguments[1] - 1); } this.notifyPostponed(); } private notifyPostponed() { alert(Postponed!); }}
    10. 10. Interfaces & Structural Typinginterface Point { x: number; y: number;}function move(point: Point, delta: number) { return new MyPoint(point.x + delta, point.y + delta);}class MyPoint implements Point { constructor(x: number, y: number);}var implicitPoint = move({ x: 1, y: 1 }, 5); // structural typingvar point = move(new MyPoint(1, 1), 5);
    11. 11. MódulosModuleA.ts define(["require", "exports"],export function DoTheA() { function(require, exports) { return AAAA!; function DoTheA() {} return AAAA!; } Implementado por exports.DoTheA = DoTheA;function DoThePrivateA() { RequireJS / Javascript TypeScript function DoThePrivateA() { return (aaaa); CommonJS return (aaaa); }} })ModuleB.ts define(["require", "exports", ModuleA], function(require, exports, __a__) {import a = module(ModuleA); var a = __a__;export function DoTheBA() { function DoTheBA() { return BBBB + a.DoTheA(); return BBBB + a.DoTheA(); }} exports.DoTheBA = DoTheBA; })
    12. 12. LambdasTypeScriptthis._participants.forEach(p => this.invite(p));this._participants.forEach(p => this.invite(p));Javascriptvar _this = this;this._participants.forEach(function (p) { return _this.invite(p);})
    13. 13. Una library en JS: external.jsAnUglyGlobal = function (value) { JS Libraries this.field = value;} // a constructorAnUglyGlobal.prototype.doIt = function(x) { return this.field + x; DefinitelyTyped} // a method define los tipos de más de 130 librariesLa declaración de la library para TS: external.d.tsinterface UglyGlobal { Angular, underscore, field: string; Jquery, ember, doIt(value: string); Knockout, etc..} https://github.com/borisyankdeclare var AnUglyGlobal : UglyGlobal; ov/DefinitelyTypedEl código TS que usa la library: uses_external.ts /// <reference path="external.d.ts"/> AnUglyGlobal.doIt("foo");
    14. 14. Muy lindo, pero ya existe…• CoffeeScript o No es JS. No hay type checking.• Closure o Anotaciones en la documentación. Algo más ‘verboso’. Optimizador.• Traceur o Diseñado para experimentar con construcciones futuras de ES. o No hay type checking. o Pocas consideraciones sobre el código generado• Dart o Require un runtime, más ambicioso y menos JS.
    15. 15. Type Checking?Douglas Crockford: Microsofts TypeScript may be the best of the many JavaScript front ends. (…) it seems to generate the most attractive code. (…) it should take pressure off of the ECMAScript Standard for new features like type declarations and classes. (…) these can be provided nicely by a preprocessor, so there is no need to change the underlying language. I think that JavaScripts loose typing is one of its best features and that type checking is way overrated. TypeScript adds sweetness, but at a price. It is not a price I am willing to pay.
    16. 16. Por qué lo elegimos?• Implementado un diseño OO existente.• No queríamos tener que inventar nuestra propia forma de definir clases, herencia, o de definición de módulos.• Dispuestos a aceptar mejoras sobre JS poco intrusivas (opt-out), que se integren bien con nuestro entorno actual.• No queríamos que todo el equipo aprendiera un nuevo lenguaje, preferíamos algo familiar.• Type Checking :)
    17. 17. Links• TypeScript source code (http://typescript.codeplex.com/)• TypeScript Playground (http://www.typescriptlang.org/Playground/)• Ace editor (http://ace.ajax.org/, https://github.com/hi104/typescript- playground-on-ace)• CofeeScript: http://coffeescript.org/• Closure: https://developers.google.com/closure/compiler/• Traceur: https://code.google.com/p/traceur-compiler/, http://traceur- compiler.googlecode.com/git/demo/repl.html• Me: saguiar@infragistics.com

    ×