Papel do TypeScript em aplicações modernas

• MTAC • Web Developer desde 2010• http://ntakashi.net/• nicolas.tcs@hotmail.com• @ntakashics

Nicolas Takashi

Agenda• 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

História do JavaScript

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

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

ES6 FuncionalidadesConstants 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?

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

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

Hitó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

Hitó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

Características do TypeScript• Paradigmas• OOP• Estruturado• Imperativo• Funcional

• Open source

TypeScript Funcionalidades

TypeScript FuncionalidadesType 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

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

DEMO

Obrigado!E-mail: contato@lab1024.com.brSite: http://lab1024.com.br/Twitter: http://twitter.com/lab1024Facebook: http://fb.com/lab-1024