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.