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.

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...
...o mindset mudou

10. Entendendo um pouco mais…
Desenvolvido pela Microsoft
Feito em TypeScript
Superset do ES6 que pode transpilar para rodar dentro do ES5

12. TypeScript
• Começa com JavaScript
• 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
custom lang.
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. ES6 Features
https://github.com/lukehoban/es6features

18. ES6 é real com TypeScript
Fortemente
tipado
Classes Interfaces
Generics Modulos
Definições de
Tipo
Transpila para
JavaScript
Funcionalidades
do EcmaScript 6

20. jogador = new Jogador(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 do TypeScript

25. TypeScript na comunidade

26. Angular 2: feito em 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 com TypeScript no ng-conf 2015

28. https://angular.io/docs/ts/latest/quickstart.html

29. Concluindo

30. Recursos para estudos
http://www.typescriptlang.org
http://www.typescriptlang.org/Playground
https://github.com/borisyankov/DefinitelyTyped
https://github.com/Microsoft/TypeScript
https://angular.io/docs/ts/latest/quickstart.html
https://channel9.msdn.com/Search?term=typescript

31. contato@rodrigokono.net
about.me/rkono