Carregado porRodrigo Kono
TypeScript: turbinando os poderes do desenvolvedor javascript
O documento apresenta o TypeScript, uma linguagem de programação que adiciona tipagem estática e outras funcionalidades ao JavaScript. TypeScript pode transpilar código para JavaScript compatível com ES5 e ES6. Angular 2 é construído com TypeScript para fornecer tipos, classes e outros recursos ao framework. Links e recursos são fornecidos para aprender mais sobre TypeScript.
TypeScript: turbinando os poderes do desenvolvedor javascript
- 2. • MVP Microsoft •MCP – MCTS – MCPD – MCT • Especialista em desenvolvimento web • Arquiteto de Soluções / Consultor Independente • Há 14 anos de comunidade .NET • @rodrigokono • www.rodrigokono.net • youtube.com/rodrigokono Rodrigo Kono h t t p : / / a b o u t . m e / r k o n o
- 3. Antes de iniciarmos... ...omindset mudou
- 10. Entendendo um poucomais… Desenvolvido pela Microsoft Feito em TypeScript Superset do ES6 que pode transpilar para rodar dentro do ES5
- 12. TypeScript • Começa comJavaScript • Tipos estáticos opcionais, classes e modulos • Termina com JavaScript
- 14. Alternativas Script# scriptsharp.com C# S# Dart dartlang.org custom lang by Google CoffeeScript coffeescript.org customlang. Clojurescript github.com/clojure/clo jurescript custom lang.
- 15. JavaScript keywords • break •case • catch • continue • debugger • default • delete • else • finally • for • function • if • in • instanceof • new • return • switch • this • throw • try • typeof • var • while • with
- 16. ES6 keywords • break •case • class • catch • const • continue • debugger • default • delete • do • else • export • extends • finally • for • function • if • import • in • instanceof • let • new • return • super • switch • this • throw • try • typeof • var • void • while • with • yield
- 17.
- 18. ES6 é realcom TypeScript Fortemente tipado Classes Interfaces Generics Modulos Definições de Tipo Transpila para JavaScript Funcionalidades do EcmaScript 6
- 20. jogador = newJogador(1, ‘Rodrigo’, ‘Kono’)
- 21. Com JavaScript function Jogador(id,nome, sobrenome) { this.id = id; this.nome = nome; this.sobrenome = sobrenome; } Jogador.prototype = { obtemId: function() { return this.id; }, obtemNome: function() { return this.nome; }, obtemSobrenome: function() { return this.sobrenome; }, defineNome: function(nome) { this.nome = nome; }, defineSobrenome: function(sobrenome) { this.sobrenome = sobrenome; } };
- 22. Com TypeScript class Jogador{ private id: number; private nome: string; private sobrenome: string; constructor(id: number, nome: string, sobrenome: string) { this.id = id; this.nome = nome; this.sobrenome = sobrenome; } obtemId() { return this.id; } obtemNome(): string { return this.nome; } defineNome(nome: string) { this.nome = nome; } obtemSobrenome(): string { return this.sobrenome; } defineSobrenome(sobrenome: string) : void { this.sobrenome = sobrenome; } }
- 23. Funcionalidades base doTypeScript
- 25.
- 26. Angular 2: feitoem TypeScript • http://blogs.msdn.com/b/typescript/archive/2015/03/05/angular-2-0-built-on-typescript.aspx • http://blogs.msdn.com/b/visualstudio/archive/2015/03/12/a-preview-of-angular-2-and-typescript-in-visual-studio.aspx
- 27. https://youtu.be/QHulaj5ZxbI?t=20m53s Angular 2 comTypeScript no ng-conf 2015
- 28.
- 29.
- 30.
- 31.