Quem tem medo do TypeScript?

William Grasel

@willgmbr

Medo do TypeScript?

Mas por quê diabos querem tipar meu JavaScript???

"Já não tentaram fazer isso no ES4 e não deu certo!"

ECMAScript 4 tinha:

  • Sistema de Módulos
  • Generators e Iterators
  • Destructuring Assignment
  • Sistema de Tipos Estáticos Opcionais
  • Bugs e falhas de retrocompatibilidade

Novas tentativas de tipagem:

  • Google Closure Compiler + JSDocs
  • ECMAScript proposal: Typed Objects Proposal
  • Web Assembly + SIMD.js
  • Microsoft TypeScript
  • Facebook Flow
  • ECMAScript proposal: Types as Comments

TypeScript

JavaScript that scales

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Microsoft

❤️

Open Source

Typed Superset? O que é isso?

  • Todo JavaScript válido deve ser um TS válido
  • Promete se manter fiel ao futuro do ECMAScript
  • Todas as features extras são estritamente opcionais
  • Funciona como Transpiler e Bundler como Babel
  • Edita seu código o mínimo possível ao transpilar
  • Focado no ferramental e análise estática de código
  • Facilitando o refactor e crescimento de grandes bases de código 

Quem está usando?

  • Uma das 5 linguagens oficiais dentro do Google
  • Grandes empresas como Airbnb, Reddit, Paypal, Lyft
  • Frameworks Web: Angular, Ember, Vue, Aurelia, Cycle.js
  • Frameworks Mobile: Ionic, NativeScript
  • Desktop Apps: VS Code, Slack
  • Entre as linguagens mais amadas segundo Stack Overflow Survey desde a pesquisa de 2017 até hoje!

Mas por quê todo exemplo de TypScript que vejo parece

Java ou C#?

Porque eles querem te mostrar todas as features de uma só vez!

Vamos conhecer TypeScript por um caminho suave em

5 passos!

Passo 1: Purista

  • Use JavaScript / ECMAScript puro, sem tipar nada
  • Apenas como o Babel para transpiling / bundling
  • Não precisa usar a extensão .ts, pode ser .js, .jsx, .vue, etc...
  • Deixe o TypeScript te ajudar como ele puder
  • Sem precisar fazer ou aprender nada de novo!

Hã? Mas, o que eu ganho com isso?

IntelliSense e inferência de tipos

IntelliSense de qualquer lib ou framework!

npm install --save-dev @types/node

npm install --save-dev @types/jquery

npm install --save-dev @types/react

https://github.com/DefinitelyTyped

Passo 2: Introdutório

  • Comece a tipar algumas variáveis e entrada / saída de funções
  • Ajude o TypeScript a te ajudar (e te proteger), dando informações extras, pois nem sempre da para inferir tudo

Base Types 

// Boolean
let isDone: boolean;

// Número
let decimal: number;

// String
let color: string;

// Array
let list: number[] = [1, 2, 3];

// Tuple
let x: [string, number] = ["hello", 10];

// Null e Undefined
let myUndefined: undefined;
let myNull: null;

// Multiplas opções
let stringOrNull: string | null = null;

// Qualquer coisa
let notSure: any = 4;
let meuArray: any[] = [1, "texto", false];

// Enums
enum Color {Red, Green, Blue}
let myColor: Color = Color.Green;

// Sem valor
function exibirMensagem(): void {
  alert("Apenas uma mensagem");
}

// Classes
class MeuObjeto {}
let meuObj: MeuObjeto = new MeuObjeto

Veja a mágica acontecer:

Nem sempre vale a pena tipar...

// Não vale a pena:
const meuTexto = "meu longo texto";
let validForm = false;

// Pode valer a pena:
let semValorInicial: number;
let multitipo: boolean | string = false;

ESLint ao resgate!

no-inferrable-types

Passo 3: Intermediário

  • Comece a criar e implementar interfaces de dados
  • Ganhando ainda mais IntelliSense
  • Se protegendo de grandes estruturas de dados

Interface? Vixi, agora sim virou Java/C#...

Interfaces de Dados 

function printName(namedObj: { name: string }) {
  console.log(namedObj.name);
}

let myObj = {size: 10, name: "Size 10 Object"};
printName(myObj);
interface NamedValue {
  name: string;
}

function printName(namedObj: NamedValue) {
  console.log(namedObj.name);
}

let myObj = {size: 10, name: "Size 10 Object"};
printName(myObj);

Modificadores

interface MinhaInterface {
  user?: string; // opicional
  readonly endereco: string; // apenas leitura
  [index: number]: string; // definindo indices de acesso
}

interface SearchFunc {
  (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;

Commit sem medo

Passo 4: Avançado

  • Comece a navegar por features mais avançadas
  • Entenda e aproveite ao máximo tipos "genéricos"
  • Conheça o conteúdo de um Array, Promisse ou um Observer antes mesmo deles executarem

Array de que?

let list: number[] = [1, 2, 3];

let list: Array<number> = [1, 2, 3];

Promise do que?

class UserService {
  getAllUsers() {
    return fetch('/users');
  }
}
interface User {
  id: number;
  name: string;
  age?: number;
}

class UserService {
  getUsers(): Promise<User> {
    return fetch('/user');
  }
}

Criando funções genéricas

function identity(arg: number): number {
  return arg;
}
function identity(arg: any): any {
  return arg;
}
function identity<T>(arg: T): T {
  return arg;
}

Passo 5: GodMod

  • Ative todas as flags de segurança disponíveis
  • Seja o cara mais seguro e protegido do mundo, ainda mais que no Java, C# ou qualquer outra linguagem fortemente tipada!

Exemplos

  • --noImplicitAny: Exibe um erro toda vez que o compilador não conseguir inferir um dado que não foi explicitamente tipado
  • --noImplicitReturns: Exibe um erro em toda função que não retorne o mesmo dado para cada possível fim
  • --noImplicitThis: Exibe um erro em toda manipulação de contexto onde o valor do 'this' for incerto
  • --strictNullChecks: Valores nulos não podem ser propagados
  • --strict: Ativa todas as de cima e algumas outras

Claro que ainda existem várias outras features...

Todas são opcionais!

Nada que não de para aprender no dia a dia!

A maioria delas você provavelmente nunca vai precisar usar...

Quem ainda tem medo do TypeScript?

Referências

Perguntas?

Obrigado! =)

@willgmbr

Quem tem medo do TypeScript?

By William Grasel

Quem tem medo do TypeScript?

Typescript tem feito um grande barulho na comunidade! A vários anos como uma das linguagens de programação mais amadas em todas as pesquisas, tudo isso depois de anos sendo odiado por boa parte da comunidade FrontEnd. Qual é a mágica que fez toda uma geração de devs em volta de uma linguagem de programação dinâmica, resolver tipar todos os seus projetos? Se você ainda tem medo de TypeScript, ainda não entendeu o que está realmente acontecendo por trás desse movimento, ou simplesmente quer saber como o TypeScript pode ou não ajudar no seu projeto, essa palestra é para você!

  • 4,362

More from William Grasel