Typescript

Status: Concluído ✅

O Typescript é uma linguagem open source desenvolvida com base no Javascript. Foi criada pela Microsoft com o intuito de melhorar e adicionar novas funcionalidades ao Js, os quais são o que caracteriza o Typescript.

Documentação Oficial do Typescript

Link para a documentação do Typescript.

Características

Uma das características que mais diferencia o Typescript do Javascript, é a tipagem. O Js utiliza a tipagem dinâmica, e o Ts utiliza a tipagem estática, ou seja, na hora da declaração da variável, podemos atribuir um tipo padrão para ela.
Ex:

let numeroQualquer: number;
valor = 10.5;

Por causa dessa segurança que a forte tipagem passa para o código, usamos essa linguagem no projeto Obra Play, além de produtividade e maior performance.

Perceba que em Javascript podemos definir uma variável, let numero = 5; e depois mudar seu tipo numero = 'uma string qualquer';. Se fizessemos isso usando TypeScript, o programa nos mostraria um erro, pois inicialmente a variável numero foi tipada de forma implícita como number, e não se pode atribuir uma string à um number.

Instalação

Para instalar e usar o Typescript em sua máquina, você deve ter o NodeJs e o NPM instalados. Para instalar o Typescript globalmente em sua máquina, use o comando:

npm install -g typescript

ou para instalar usando o yarn, digite o comando:

yarn global add typescript

JSX e TSX

O obra play utiliza uma biblioteca Javascript bem famosa, o React. O React pode ser escrito em arquivos com extensões .js ou .jsx. O JSX é uma forma alternativa de sintaxe para o Js, que mescla o HTML e Javascript com intuito de facilitar a vida do programador.

No entanto, o projeto Obra Play é escrito em Typescript, que é um superset do Javascript com mais ferramentas. Então os arquivos React são escritos com a extensão .tsx, que também é uma forma alternativa de sintaxe para o Typescript, que mescla HTML e Typescript.

Tipos comuns do Javascript/Typescript

Os tipos comuns do Typescript são:

• Number:

// numeros
let num: number = 17;

• String:

// caracteres
let frase: string = 'Hello World!';

• Boolean:

 // valores lógicos

 let check: boolean = true;

• Null:

 // valores nulos

 let hnull: null;

• Undefined:

 //valores não definidos

 let a: undefined;

• Object:

  let meuObjeto: object;

  meuObjeto = {
    forma: 'quadrados'
  }

• Array:

 let lista: array;

 lista = ['1kg de açucar', 'café', 'ovos'];

• Any:

/* variaveis que podem receber qualquer valor, não é recomendado usar, pois seria o mesmo que não
utilizar o typescript */

let qualquer: any;

qualquer = 18;

qualquer = 'frase';

qualquer = [1, 2, 3]

• Tupla:

/* é parecido com array, a diferança é que sabemos exatamente o tipo
de cada índice, podendo ser diferentes entre si */

let exemploTupla: [number, string];

exemploTupla = [20, 'não te disse?'];

• Void:

// o tipo void não retorna nenhum valor

let teste = (): void{
  console.log('hello')
};

teste(); // undefined

• Never:

// cria exceções que nunca devem retornar nada

function(): never{
  throw new Error("erro");
} //

Checks de igualdade (== vs ===)

Tanto em Typescript quanto em Javascript, == e === são usados para checar igualdade entre duas ou mais expressões, por mais que pareçam iguais, esses dois operadores possume algumas diferenças:

O operador == compara os valores da expressão:

1 == '1';  // retorna true
1 == 2;  // retorna false

O operador === compara o valor e o tipo da expressão, se forem iguais, chamamos isso de igualdade estrita:

1 === '1'  // retorna false , pois um valor tem o tipo number e o outro é uma string

Outros exemplos de retornos usando esses operadores:

if (true == 'true')    // Retorna true
if (true == '1')       // Retorna  true
if (true == true)      // Retorna  true
if (true === 'true')   // Retorna  false
if (true === '1')      // Retorna  false
if (true === true)     // Retorna  true (igualdade estrita, mesmo tipo e mesmo valor