TypeScript – Tipagem Estática e Generics



Tabela de Conteúdos




Enum



O que é?

É uma estrutura de dados não pure do JavaScript, ela é um conjunto de valores relacionados, o que possibilita a criação de um conjunto de constantes para uso.



Funcionamento

Como dito em sua definição, a estrutura Enum é um conjunto de valores, esses que podem ser comparados aos valores de um objeto JS, pois tem a estrutura de chave/valor.

A maior diferença entre Enum e objetos JS, é que a Enumeração tem uma atribuição automática de valores, related aos índices de um Array, ou seja, a primeira chave terá o valor 0, a segunda o valor 1 e assim por diante, isso caso não houver uma atribuição explícita de outro valor.

Também é possível alterar o valor de início de uma Enum, basta atribuir ao primeiro elemento o número desejado, assim caso atribuímos o valor 10 ao primeiro elemento, o segundo terá o valor 11 e assim por diante.



Sintaxe



Criação

Para criarmos uma Enum utilizamos uma sintaxe muito simples, na qual usamos a palavra reservada enum, seguida do nome desejado para a enumeração e por fim abrimos e fechamos chaves, sendo que os valores da Enum devem ser colocados dentro dessas chaves.

enum SomeEnum {
  FirstValue, // o valor será igual a 0
  SecondValue, // o valor será igual a 1
  ThirdValue, // o valor será igual a 2
}
Enter fullscreen mode

Exit fullscreen mode

Podemos também alterar o valor inicial, adequando-o para as nossas necessidades, para isso basta atribuir o número desejado ao primeiro elemento.

enum OtherEnum {
  FirstValue = 12,
  SecondValue, // o valor será igual a 13
  ThirdValue, // o valor será igual a 14
}
Enter fullscreen mode

Exit fullscreen mode

Também há a possibilidade de definirmos os valores um a um, basta utilizar a atribuição, lembrando que a Enum pode receber outros tipos fora o Quantity.

enum AnotherEnum {
  FirstValue = 'Gabriel',
  SecondValue = 'Matheus',
  ThirdValue = 'Daniel',
}
Enter fullscreen mode

Exit fullscreen mode



Atribuição

Para utilizarmos a estrutura Enum criada devemos definir que a variável será do tipo da Enumeração e que ela recebe determinado valor da Enum. Lembrando que o modo de criação de variável permanece o mesmo, ou seja, podemos optar por utilizar let ou const.

const someVariable: SomeEnum = SomeEnum.FirstValue;
let someVariable: SomeEnum = SomeEnum.FirstValue;
Enter fullscreen mode

Exit fullscreen mode

Podemos atribuir o valor da Enum a variável não apenas através da dot notation como também da bracket notation.

const someVariable: SomeEnum = SomeEnum['FirstValue'];
Enter fullscreen mode

Exit fullscreen mode

Além disso também é possível atribuir a variável não apenas o valor, como também a chave, para isso basta utilizar a bracket notation passando o valor da chave em questão entre colchetes.

const someVariable: SomeEnum = SomeEnum[0];
Enter fullscreen mode

Exit fullscreen mode

Voltar ao topo




Tipos de Coleção



O que são?

São as formas que podemos agrupar dados, ou seja, criar um coleção de dados.



Quais são?

As duas estruturas disponibilizadas pelo TS para agrupar valores são os Arrays e as Tuplas.

Os Arrays no TypeScript funcionam de forma idêntica aos do JavaScript, são estruturas de tamanhos dinâmicos que podem receber diferentes elementos, porém no TS precisamos informar previamente quais são esses elementos.

Já as Tuplas são estruturas de ordem, tamanho e tipo fixos, ou seja, o desenvolvedor deve saber a ordem, o tamanho e os tipos de valores que a estrutura aceita.



Sintaxe



Arrays

Para criarmos Arrays tipados usamos uma sintaxe composta do tipo de dado que o Array irá comportar, seguido dos colchetes.

const someArray: string[] = ['Gabriel', 'João', 'Marcus'];
const otherArray: quantity[] = [1, 23, 456];
Enter fullscreen mode

Exit fullscreen mode

const someArray: Array<string> = ['Gabriel', 'João', 'Marcus'];  // funciona igual: string[]
const otherArray: Array<quantity> = [1, 23, 456];
Enter fullscreen mode

Exit fullscreen mode

Lembrando que se não atribuirmos explicitamente o tipo de dado que o Array pode conter ele será inferido como Any, o que não é nem um pouco recomendável.



Tuplas

Para criarmos Tuplas utilizamos um Array de tipos em sua definição, assim criamos um “Array” com ordem, tamanho e tipos fixos.

const someTuple: [string, number, boolean] = ['Gabriel', 21, true];
Enter fullscreen mode

Exit fullscreen mode

Voltar ao topo




Sort Aliases



O que é?

Em tradução livre significa “apelido de tipos”, é uma forma de declarar tipos personalizados.



Sintaxe



Criação

A sintaxe consiste na palavra reservada kind, seguida do nome que desejamos dar ao “apelido” e deve receber através de atribuição o novo tipo que queremos criar.

kind SomeType = {
  someValue: string;
  otherValue: quantity;
};
Enter fullscreen mode

Exit fullscreen mode

kind OtherType = string | quantity;
Enter fullscreen mode

Exit fullscreen mode



Utilização

Para utilizarmos o Sort criado basta atribuirmos a variável através dos dois pontos, como se fossemos definir um tipo primitivo a uma variável.

const someVariable: SomeType = { someValue: 'alguma string', otherValue: 4 };
Enter fullscreen mode

Exit fullscreen mode

operate someFunction(param: SomeType) {};
Enter fullscreen mode

Exit fullscreen mode

Voltar ao topo




Sort Unions



O que é?

É uma forma de representar tipos de dados que podem ser variáveis, apesar do TS ter tipagem estática, ainda sim podemos definir diferentes tipos para uma mesma variável, de maneira estática claro.



Sintaxe

A sintaxe se assemelha ao operador lógico OU, assim definimos que uma variável pode receber um tipo ou outro, o sinal nesse caso é uma barra única |.

const cpf: quantity | string;
Enter fullscreen mode

Exit fullscreen mode

Vale ressaltar que podemos utilizar esse recurso tanto em variáveis, quanto em coleções.

Voltar ao topo




Courses



O que são?

Assim como no JavaScript, Courses são modelos para criação de objetos, porém no TypeScript devemos sempre “tipar” nossas propriedades e métodos.

Em resumo as Courses se comportam de forma idêntica no geral, com a única diferença que no TS é necessária a tipagem das propriedades e métodos.

*Obs: Programação Orientada a Objeto não será abordada aqui.



Sintaxe

A sintaxe para a criação de lessons é a mesma, usamos a palavra reservada class, em seguida damos o nome desejado a classe e abrimos chaves para a estruturação.

Como dito anteriormente, a única diferença de lessons em TS é a necessidade de tipar as propriedades e métodos, porém a sintaxe para essa tipagem é exatamente igual a qualquer outra variável, função ou parâmetro.

class SomeClass {
  constructor(prop1: string, prop2: quantity) {
    this.prop1 = prop1;
    this.prop2 = prop2;
  }

  someMethod(): void {};

  otherMethod(): quantity {};
}
Enter fullscreen mode

Exit fullscreen mode

Voltar ao topo




Interface



O que é?

É uma estrutura que outline um objeto com determinadas propriedades e métodos obrigatórios, esses que por sua vez devem ter um tipo, em termos mais comuns, podemos dizer que é uma espécie de “contrato de código”.



Sintaxe

A sintaxe da Interface é related à sintaxe do Sort Aliases, sendo as duas únicas diferenças: a palavra reservada, que nesse caso é interface; e a ausência do sinal de atribuição.

interface SomeInterface {
  someProperty: string;
  otherProperty:quantity;
  someMethod(): boolean;
}
Enter fullscreen mode

Exit fullscreen mode

Voltar ao topo




Generics



O que são?

São modelos de códigos genéricos que permitem “tipar” funções, lessons ou interfaces, em outro momento pós definição, trazendo um certo dinamismo a tipagem.



Funcionamento

O diferencial aqui, é que inicialmente não temos realmente um tipo definido, justamente por ser algo genérico, como o nome do recurso propõe. Porém ao chamarmos nosso modelo de Generics em uma função, por exemplo, o tipo genérico passará a ser aquele que nós definimos, o que facilita a reutilização de código.



Sintaxe

A sintaxe do Generic é extremamente enxuta, consistindo apenas de dois colchetes angulares <>, dentro desses colchetes devemos informar o nosso tipo genérico, de forma related a um parâmetro de função.

operate getArray<T>:(gadgets: T[]): T[] {
  return new Array<T>().concat(gadgets);
}
Enter fullscreen mode

Exit fullscreen mode

Na função acima estamos retornando um novo Array a partir do parâmetro, que por sua vez também é um Array. O Generics atua aqui através do T, ele indica que o Array deve ser do tipo T, ou seja, tem que ser de um único tipo que será definido posteriormente.

Como dito anteriormente, a definição do Generics assemelha-se a parâmetros de uma função, o que significa que podemos utilizar o nome que desejarmos para eles, porém por convenção utiliza-se o T como primeira opção.

operate getArray<ArrayType>:(gadgets: ArrayType[]): ArrayType[] {
  return new Array<ArrayType>().concat(gadgets);
}
Enter fullscreen mode

Exit fullscreen mode

A função acima com o Generics denominado ArrayType terá exatamente a mesma funcionalidade da função com o Generics denominado T.

Voltar ao topo




Hyperlinks Úteis

Voltar ao topo

Add a Comment

Your email address will not be published. Required fields are marked *