
Typescript One Page Guide
Olá Pessoal,
Gostaria de compartilhar com voces dicas rápidas sobre Typescript que poderão ajudar naqueles momentos “como é que eu fazia isso mesmo?”
Sim, este é um guia que certamente devo usar bastante também rs
Declaração de classes:
class Xablau{ }
Para definir um novo construtor da classe, utilize o método constructor:
class Xablau{ constructor(data : Date, quantidade : number, valor : number){ } }
É possível definir acessos os modelos de acesso para as propriedades e métodos da minha classe, da mesma forma como temos no C#. A diferença é que no Typescript o modifier public é implícito.
Temos os seguintes modificadores disponíveis:
- Public
- Private
- Protected
E podem ser utilizados da seguinte forma:
class Person { protected name: string; constructor(name: string) { this.name = name; } } class Employee extends Person { private department: string; constructor(name: string, department: string) { this.department = department; } public getElevatorPitch() { return `Hello, my name is ${this.name} and I work in ${this.department}.`; } }
Como vimos implicitamente no exemplo acima (rs) é possível utilizar herança através do uso do extends na definição da classe, como:
class Animal { move(distanceInMeters: number = 0) { console.log(`Animal moved ${distanceInMeters}m.`); } } class Dog extends Animal { bark() { console.log('Woof! Woof!'); } }
Quando o tipo any (implícito) não está habilitado (como fizemos no artigo anterior do blog), é necessário declarar a tipagem no momento da definição da property:
quantidade: Array<Number> = [1, 2, 3];
No caso de Arrays é possível criar tipos genéricos (neste exemplo não estamos considerando o tipo any), como:
class Xablau { private myObjects: Array<T> = []; }
O ECMA 6 (2015) também suporta a definição de template strings (ou template literals), e isso ajuda muito deixando as views mais limpas. Exemplo:
let letras: string[] = ['a', 'b', 'c', 'd']; let template = ` <ul> ${ letras.map(letra => ` <li>${letra.toUpperCase()}</li> ` ).join('') } </ul> `; console.log(template);
O Typescript também oferece o suporte a utilização de Namespace, que facilita a organização de código. Podemos fazê-lo da seguinte forma:
namespace Views { abstract class View<T> { // class content ... } }
No entanto o uso de namespaces por si só não resolve um dos problemas do Javascript que é a ordem de execução de código. Neste contexto podemos utilizar o conceito de módulos do do ECMA 2015:
export abstract class View<T> { // class content ... }
E onde necessário posso fazer diretamente o uso de imports:
import { View } from './View'; import { Xablau } from '../models/Xablau';
Com meu código modularizado, posso utilizar um loader responsável por carregar meu código em ordem correta sem a necessidade da inclusão de milhares de tags script desnecessariamente.
Para isso podemos fazer o download da lib através do link abaixo:
https://github.com/systemjs/systemjs/blob/master/dist/system.min.js
Considerando que a lib estará disponível no diretório “lib”, devemos incluir a property “module” dentro do nosso ts.config:
{ "compilerOptions": { "target": "es6", // define o target do ECMA Script "outDir": "app/js", // define o output path dos arquivos JS "noEmitOnError": true, // nao gera output em caso de erros "noImplicitAny": true, // nao define a tipagem como 'any' implicitamente "module": "system" // define meu loader }, "include": [ "app/ts/**/*" // define o input path para gerar js ] }
Agora ao invés de carregar vários script linha a linha, ou me preocupando com carregamento síncrono, etc, eu posso carregá-los simplesmente de maneira unificada referenciando o loader system. Neste exemplo abaixo estou considerando que eu tenho um app.js que implementa o carregamento de controller e referencia os listeners necessários para o DOM que está sendo carregado:
<script src="lib/system.js"></script> <script> System.defaultJSExtensions = true; System.import('js/app.js').catch(err => console.error(err)); </script>
O resto fica por conta do loader!
É possível fazer o casting utilizando o modelo abaixo do return:
MeuMetodo(): MeuTipo[] { return ([] as MeuTipo[]).concat(this._meuObjArray); }
Posso fazer com que minhas funções retornem mais de um tipo, como o exemplo abaixo (muito util com o strict null check habilitado)
function minhaFuncao(flag: boolean): boolean | null{ }
Bom, por hora é só tudo isso, com o tempo irei complementando este post com mais informações =]
Última atualização em 29/01/2019
Este post reflete apenas a opinião do autor sobre o assunto, e não fornece garantias ou responsabilidade sobre qualquer problema decorrente de sua utilização.