Tipos básicos - Manual do TypeScript Artigo

Conheça os cursos gratuitos do WebDevBr! - Inscreva-se!


Este artigo foi publicado a 11 meses, 3 semanas, 6 dias atrás.

Como era de se esperar, TypeScript suporta todos os tipos básicos de dados que o JavaScript, assim como um adicional para enumeração.

TypeScript também suporta tipagem da variável, forçando que ela aceite apenas o especificado, para isso seguimos a seguinte regra:

var nomeDaVariavel: tipo = valor;

Embora eu tenha usado a palavra-chave var, ela não é obrigatória, tem o conceito apenas de informar uma variável de escopo local, assim como acontece no JavaScript tradicionalmente.

Gostou deste artigo?

Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!

Os outros artigos desta série.

Boolean

O bom e velho true/false (verdadeiro e falso), comum no Javascript e em outras linguagens de programação (me arrisco a dizer todas?).

var isDeath:boolean = false;

Number

Assim como no Javascript, todos os números são pontos flutuantes (float).

var age:number = 21;

String

Valores do tipo texto, você pode usar aspas duplas ("meu texto") ou simples ('meu texto') para definir uma string.

var fullname: string = "Erik Figueiredo";

Array

Array ficou bem legal com TypeScript, ao especificar um array você pode informar o tipo dos elementos dentro dele. Existem duas formas de fazer isso:

Usando colchetes apos o tipo:

var persons: string[] = ['Erik', 'Fernanda'];

Usando a palavra-chave Array seguido do tipo entre maior e menor:

var persons: Array<string> = ['Erik', 'Fernanda'];

Claro que isso funciona com number, boolean...

Se você for usar vários tipos de valores dentro do array vai poder usar o tipo any, vou falar dele a logo mais.

var persons: any[] = ['Erik', 30, true];

Enum

Este é novo, digo, novo pra você que trabalha com Javascript, o tipo enum (enumeração) é ideal para trabalhar com listas, ele nada mais é que um objeto, mas com a chave dos elementos definida de forma mais amigável.

Por padrão ele trabalha com 0.

enum Color {Red, Green, Blue};
var c: Color = Color.Green;

console.log(c);

Isso deve retornar 1.

Mas você também pode indicar o valor inicial:

enum Color {Red=1, Green, Blue};
var c: Color = Color.Green;

console.log(c);

Agora teremos o valor 2 como retorno.

E ainda podemos pegar o valor inverso:

enum Color {Red = 1, Green, Blue};

var number: Color = Color.Green;
var name: string = Color[2];

console.log(name);
console.log(number);

Isso deve retornar Green e 2, nesta ordem.

Isso é possível porque o objeto Color guarda os dados das duas formas, ou seja, tanto com indice 2 e valor Green, quanto indice Green e valor 2, veja o retorno do Color:

Object {1: "Red", 2: "Green", 3: "Blue", Red: 1, Green: 2, Blue: 3}

Bem bacana, né.

Any

Muitas vezes não podemos forçar o tipo do dado, talvez ele venha do banco ou de uma api de terceiros. Qualquer que seja o motivo, você pode rotular sua variável com o tipo "any", assim ela vai aceitar qualquer coisa.

var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

Vale informar que o tipo any é ideal para você que vai transpor um Javascript existente para TypeScript e não quer se preocupar com os erros na compilação, assim você pode fazer isso de forma gradual.

Void

Ao contrário do "any" (qualquer tipo de dado), você pode especificar um tipo void (nenhum tipo de dado), ele é muito usado em funções, para informar que ela não retorna nada.

function warnUser(): void {
    alert("This is my warning message");
}

Retorno de dados

Como vimos no item anterior, também podemos informar um tipo para o retorno de funções, isso pode ser feito com qualquer um dos data types informados aqui.

function isChecked(): boolean {
    return true;
}

Mas ainda vou falar mais sobre funções em outro artigo.

Conclusão

Este é o primeiro artigo da série Manual do TypeScript, ele não vai abordar um projeto prático, mas serve como um guia de consulta rápida pra você que está começando ou que já trabalha com isso a algum tempo.


Cursos relacionados


* Parcelamento apenas cartão de crédito! Pode haver uma pequena variação no parcelamento em relação a simulações apresentadas!