Tipos em Typescript

Pq usar Typescript??

Antes de entrar nos tipos básicos de typescript é importante saber o por que estamos fanzendo isso. Eu msm não era muito fã de acrescentar tipos no frontend por exemplo, porém depois de uma introdução curta vi que o superset do javascript poderia diminuir meus problemas tanto com troca de nome de propriedades quanto de prever partes do código que eu posso estar recebendo algo nulo e como iniciante eu achei isso realmente incrível.

Ps: Provavelmente deve haver outros fantásticos benefícios de se usar typescript, mas estou aplicando o learning public nesse texto então se houver mais descobriremos juntos.

Tipos do Typescript

Vamos começar pelos tipos primitivos que são os basicos e comuns do ecossistema.

Boolean

É o mais básico dos tipos, compreende somente os valores true e false.

const yes: boolean = true
const no: boolean =  false

Number e BigInt

Os dois tipos são para variáveis que vão receber números, porém o tipo number pode ser para qualquer número e o bigint só para números inteiros.

const BigNum1:bigint = 100n;           //ok
const BigNum2:bigint = 100.20n;        //error

const Num1:number = 100;               //ok
const Num2:number = 100.20;            //ok

Vc pode se perguntar por que?? Até pq eu me perguntei. E a resposta para existir dois tipos para números msm o tipo number aceitando todos é que o bitint consegue lidar melhor com números muito grandes.

String

Outro tipo que desenvolvedores javascript estão acostumados, é aplicado a variáveis que recebem cadeias de caracteres entre aspas assim como no javascript.

const firstName:string = "João";     //ok
const age:string = 19;              //error

Void, Null e Undefined

Muitas vezes null e undefined são confundidos pois a diferença é realmente bem sutil.Usando a inferência de tipo do typescript podemos ter uma ideia da diferença.

let a
let b=null
console.log(typeof(a))   //undefined
console.log(typeof(b))   //object

Undefined significa que o valor não foi atribuído e você não sabe seu valor . É uma ausência não intencional de valor . Isso significa que uma variável foi declarada, mas ainda não recebeu um valor.
Null indica que você sabe que o campo não possui um valor . É uma ausência intencional de valor. O console.log no exemplo retorna object por um bug conhecido no javascript.

E o void ?? Void é um tipo especifico para retorno de de funções que não retornam nada.

function fn1 ():void {
 console.log('Não retorna nd')      //ok
}
function fn2 (args:number):void {
 return args                       //error
}

Saindo dos tipos primitivos vamos conhecer algumas novidades que o typescript trouxe.

Date

Se vc usar o typeof com o construtor new Date no javascript vc verá [object object] no console. O typescript trouxe esse tipo que nos permite digitar variáveis ​​de data com força e obter intellisense útil no objeto Date.

const date = new Date(1990, 4, 7)
console.log(typeof date)         //Date

Array

É um tipo genérico onde vc especifica que tipo de dado vai ser guardado pelo array. E há duas formas de usar esse genérico.

const numbers: Array<number> = [1, 2, 3]; // ok
const numbers: Array<number> = [1, 'two', 3]; // error

const numbers: number[] = [1, 2, 3]; // ok
const numbers: number[] = [1, 'two', 3]; // error

Tuple

São uma forma de tipar cada valor de um array.

const tomScore: [string, number] = ["Tom", 70];

Tbm podemos ultilizar o spread operator para esse tipo mais dinamico.

const tomScore: [string, ...number[]] = ["Tom", 70, 60, 80]];

Never

É um tipo que indica que uma função nunca deve retornar algo e é diferente do tipo void. Void consegue receber null e undefined já never não.

const something: void = null     //ok
const nothing: never = null      //error

Por esse rigor do tipo never normalmente se usa em funções que sempre geram um erro.

function fn(a: string | number): boolean {
  if (typeof a === "string") {
    return true;
  } else if (typeof a === "number") {
    return false;
  }  
  return neverOccur('Houve um erro');
}

function neverOccur (message: string) : never {
   throw new Error(message);
} 

Unknown e Any

Lendo a documentação e conversando com desenvolvedores se acha algo que é consenso (se vc participa da bolha dev no twitter vc sabe o quanto é difícil): Não use any!! Óbvio que é um exagero a questão é tentar ao máximo não usar any e pq? Por que any desativa toda a checagem de tipos do seu código e isso ruim pq o typescript surge exatamente para garantir o type checking.
Por isso é preferível usar unknown e ultilizar de if para garantir a tipagem .
Não muito seguro

let something
something = "Bob";
something = 33;
something = false;
something = new Date(2019, 5, 8);

Seguro

function add(a: unknown, b: unknown) {
  if (typeof a === "number" && typeof b === "number") {
    return a + b;
  }
  return 0;
}

Espero que tenha ficado claro. Qualquer crítica, sugestão ou dúvida minha dm do twitter está aberta.