TypeScript em Aplicações
Modernas
Agenda
 Apresentação
 História do JavaScript
 Características do JavaScript
 ES6 Funcionalidades
 Como usar ES6 hoje?
 JS prós e contras
 História do TypeScript
 Características do Typescript
 Typescript Funcionalidades
 TypeScript prós e contras
 Demo
@ntakashics
/ntakashii
Nicolas Takashi
nicolas.tcs@hotmail.com
ntakashi.net
História do JavaScript
 Desenvolvido pela Brendan Eich em 1995
 Nomes anteriores Mocha, LiveScript
 Suportado pelo Netscape em 1996
 Microsoft criou JScript em 1996
 Novembro de 1996 surgiu o ECMAScript
 Atualmente temos 6 versões do ECMAScript
Características do JavaScript
 Paradigma Imperativo e Estruturado
 Suporte a sintaxe de programação estruturada da linguagem C
 Dinâmica
 Tipagem dinâmica
 Baseados em objetos
 Avaliação em tempo de execução
Características do JavaScript
 Funcional
 Funções de primeira classe
 Funções aninhadas
 Baseada em protótipos
 Protótipos: JS usa protótipos ao invés de classes para herança
 Funções e métodos: Não existe distinção entre funções e métodos no JavaScript
ES6 Funcionalidades
Constants Scoping
Arrow Functions Extend Parameter Handling
Template Literals Enhanced Regular Expression
Enhanced Object Properties Destructuring Assignment
Modules Classes
Symbol Type Iterators
Generators Map/Set & WeakMap/WeakSet
Typed Arrays Promises
Meta Programing Internationalization & Localization
Como usar ES6 hoje?
 Shim
 Se desejamos usar apenas apenas novos objetos do ES6 tais como Promises, novas
funções de string ou math, podemos utilizar Shim.
 Basta adicionar o script ES6-Shim antes de seus scripts
 Transpilers
 Quando desejamos usar novas keywords, funções e objetos precisamos seguir o
caminho dos transpilers:
 Traceur
 Babel
 ShiftJS
 TypeScript
JS prós e contras
 Prós
 Está presente em todos os lugares
 Existe um numero incontável de bibliotecas
 Flexível
 Comunidade ativa e forte
 Muito conteúdo de aprendizagem
JS prós e contras
 Contras
 Checagem em tempo de execução
 Alto custo de manutenabilidade
 Escopos só podem ser criados por funções
 Conversão implícita
 Prototypes – (Apenas confuso)
História do TypeScript
 Criada por Anders Hejlsber – Criador do C#, Delphi e Turbo Pascal
 Primeira vez visto em outubro de 2012
 2 anos depois foi elogiada pelo Miguel de Icaza
 A partir de 2013 teve suporte em outras IDE’s e editores de texto
 Eclipse
 Emacs
 VIM
 Sublime
História do TypeScript
 2013 teve a versão 0.9 com suporte a genéricos
 2014 sai a versão 1.0 junto com Visual Studio 2013 Update 2
 Utilizado em aplicações de larga escala
Características do TypeScript
 Paradigmas
 OOP
 Estruturado
 Imperativo
 Funcional
 Open source
TypeScript Funcionalidades
Type annotations Compile time type checking
Type inference Type erasure
Interfaces Enumeraded Type
Mixin Generic
Namespaces Tuple
Async / Await Classes
Module Arrow function
Optional Parameters Default Parameters
TypeScript prós e contras
 Prós
 Checagem de tipo
 Auxilio da IDE para refatoração
 Baixo custo de manutenção
 Fácil aprendizado para profissionais de linguagens estáticas
TypeScript prós e contras
 Contras
 Adição de mais um processo no desenvolvimento
 Risco do desenvolvedor não estudar JavaScript
 Typings
Dúvidas?
Obrigado
Twitter: @ntakashics
E-mail: nicolas.tcs@hotmail.com
Site: ntakashi.net

TypeScript em Aplicações Modernas

  • 1.
  • 2.
    Agenda  Apresentação  Históriado JavaScript  Características do JavaScript  ES6 Funcionalidades  Como usar ES6 hoje?  JS prós e contras  História do TypeScript  Características do Typescript  Typescript Funcionalidades  TypeScript prós e contras  Demo
  • 3.
  • 4.
    História do JavaScript Desenvolvido pela Brendan Eich em 1995  Nomes anteriores Mocha, LiveScript  Suportado pelo Netscape em 1996  Microsoft criou JScript em 1996  Novembro de 1996 surgiu o ECMAScript  Atualmente temos 6 versões do ECMAScript
  • 5.
    Características do JavaScript Paradigma Imperativo e Estruturado  Suporte a sintaxe de programação estruturada da linguagem C  Dinâmica  Tipagem dinâmica  Baseados em objetos  Avaliação em tempo de execução
  • 6.
    Características do JavaScript Funcional  Funções de primeira classe  Funções aninhadas  Baseada em protótipos  Protótipos: JS usa protótipos ao invés de classes para herança  Funções e métodos: Não existe distinção entre funções e métodos no JavaScript
  • 7.
    ES6 Funcionalidades Constants Scoping ArrowFunctions Extend Parameter Handling Template Literals Enhanced Regular Expression Enhanced Object Properties Destructuring Assignment Modules Classes Symbol Type Iterators Generators Map/Set & WeakMap/WeakSet Typed Arrays Promises Meta Programing Internationalization & Localization
  • 8.
    Como usar ES6hoje?  Shim  Se desejamos usar apenas apenas novos objetos do ES6 tais como Promises, novas funções de string ou math, podemos utilizar Shim.  Basta adicionar o script ES6-Shim antes de seus scripts  Transpilers  Quando desejamos usar novas keywords, funções e objetos precisamos seguir o caminho dos transpilers:  Traceur  Babel  ShiftJS  TypeScript
  • 9.
    JS prós econtras  Prós  Está presente em todos os lugares  Existe um numero incontável de bibliotecas  Flexível  Comunidade ativa e forte  Muito conteúdo de aprendizagem
  • 10.
    JS prós econtras  Contras  Checagem em tempo de execução  Alto custo de manutenabilidade  Escopos só podem ser criados por funções  Conversão implícita  Prototypes – (Apenas confuso)
  • 11.
    História do TypeScript Criada por Anders Hejlsber – Criador do C#, Delphi e Turbo Pascal  Primeira vez visto em outubro de 2012  2 anos depois foi elogiada pelo Miguel de Icaza  A partir de 2013 teve suporte em outras IDE’s e editores de texto  Eclipse  Emacs  VIM  Sublime
  • 12.
    História do TypeScript 2013 teve a versão 0.9 com suporte a genéricos  2014 sai a versão 1.0 junto com Visual Studio 2013 Update 2  Utilizado em aplicações de larga escala
  • 13.
    Características do TypeScript Paradigmas  OOP  Estruturado  Imperativo  Funcional  Open source
  • 14.
    TypeScript Funcionalidades Type annotationsCompile time type checking Type inference Type erasure Interfaces Enumeraded Type Mixin Generic Namespaces Tuple Async / Await Classes Module Arrow function Optional Parameters Default Parameters
  • 15.
    TypeScript prós econtras  Prós  Checagem de tipo  Auxilio da IDE para refatoração  Baixo custo de manutenção  Fácil aprendizado para profissionais de linguagens estáticas
  • 16.
    TypeScript prós econtras  Contras  Adição de mais um processo no desenvolvimento  Risco do desenvolvedor não estudar JavaScript  Typings
  • 17.
  • 18.