Observações importantes

Este artigo tem finalidades de facilitação para os iniciantes da tecnologia, como eu. Minha ideia é mostrar de um ponto de vista mais simples possível. A ideia deste artigo é abranger desde a instalação até a criação de seus primeiros contratos.

Toda referência deste conteúdo foi baseada na documentação oficial e também nos vídeos da @glauciaLemos, onde ela explica e conta mais detalhes de como usar.

Outro detalhe é que este artigo abordará a parte introdutória, então muitos conceitos ainda serão abordados nos próximos artigos.

Introdução

Desenvolvido pela Microsoft e sendo mantido pela comunidade, TypeScript é o superpoder do JavaScript, onde é usado contratos para descrever alguns elementos de código, criamos uma forma de fechar o cerco e evitar possíveis erros de compilação no desenvolvimento de sistemas.

Aprender e praticar

Oficialmente, você pode acessar a documentação do TypeScript e aprender como fazer o uso deste superset.

Para praticar, acesse o Playground.

Requisitos

Você precisa ter algumas ferramentas já instaladas em sua máquina para poder usufruir deste superset.

Node.js - Ambiente de execução que permite escrever JavaScript na sua máquina.
TypeScript - Instalado em sua máquina.
VS Code - Editor de código. Obs: Qualquer editor pode ser usado.

tsconfig.json

Por padrão, todo projeto TypeScript precisa deste arquivo para que possamos descrever algumas informações relevantes para o software que foi construído usando TypeScript.

Usando a propriedade files

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "emitter.ts",
    "program.ts",
    "commandLineParser.ts",
    "tsc.ts",
    "diagnosticInformationMap.generated.ts"
  ]
}

Usando as propriedades include e exclude

{
  "compilerOptions": {
    "module": "system",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "../../built/local/tsc.js",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Gerar o Tsconfig.json

No terminal, é possível criar um arquivo padrão digitando o comando tsc --init

Aqui podemos informar diversas configurações, desde a versão em que o Ecmascript será compilado até onde iremos gerar os arquivos após a compilação. Para mais detalhes sobre cada chave de configuração, acesse Tsconfig.

Transpilação

É importante lembrar que, por padrão, o browser não reconhece TypeScript, precisamos realizar a transpilação de todo arquivo para JavaScript. Para realizar tal processo, podemos ir no terminal e rodar o seguinte comando: tsc + [nome do arquivo].

Mas isso não é perda de tempo?

Uma coisa que pode estar se perguntando agora é se fazer tudo isso para definir padrões em seu projeto e escrever um pouco mais não seria perda de tempo, visto que se eu me preocupar em passar todos os valores corretos, o código deveria funcionar?

Nesse caso, sim. Mas vale lembrar que os programadores não trabalham sozinhos e eventualmente alguém pode acabar errando na criação de algo e gerando problemas para toda a aplicação. A ideia do TypeScript é que, através do próprio código que você escreve, ele seja à prova de erros seus e de seu time também. Ele não vai deixar você fazer 💩 e nem o Juninho 😂

Type Annotation

Por padrão, o type annotation é onde ajuda o compilador a entender as variáveis e seus valores. Você não é obrigado a usá-lo, mas caso não o use, o uso do TypeScript perde o sentido, já que é exatamente assim que ele entende e te auxilia a captar erros em seu código.

Diferenças do typescript

Usando javascript nativo

let mensagem = 'Hello World, Kevin Diego'
console.log(mensagem)

Usando typescript

let mensagem: string = 'Hello World, Kevin Diego'
console.log(mensagem)

Como mostrado no exemplo acima, a diferença mais notável para quem já tem um conhecimento prévio de javascript,é que, sempre que formos definir alguma variável ou constante, precisaremos também dizer qual tipo dela. Sendo assim, caso a variável receba um valor diferente do previsto, o TypeScript reclama informando que existe algo incoerente.

Exemplo:

Usando typescript

let mensagem: string = 32
console.log(mensagem)

Neste caso, mesmo que você queira, seu sistema não vai funcionar, pois a variável mensagem, que segundo o TypeScript deveria ser do tipo string, recebeu um valor do tipo number, gerando assim um log bem bonito na sua cara.

Lembrando que:

Usando typescript

let mensagem: string = '32'
console.log(mensagem)

Caso este número esteja entre aspas, a situação já muda, pois não estamos tratando-o como um valor number.

Outros exemplos:

Arrays

let animais: string[] = ['Elefante', 'Cachorro', 'Gato', 'Panda', 'Girafa', 'Leão']
console.log(animais)

Objetos

let carro: {
  nome: string
  ano: number
  preco: number
}

carro = { nome: 'Toyota Yaris Sedan XS', ano: 2019, preco: 80000 }
console.log(carro)

Funções

function multiplicarNumero(num1: number, num2: number) {
  return num1 * num2
}

console.log(multiplicarNumero(2, 5))

Tipos no typescript

Hierarquia

boolean

Tipo primitivo que permite somente dois valores true ou false

exemplos:

let theme: boolean = true

console.log(theme)

let concluido: boolean = false

if (!concluido) {
  console.log('Tarefa foi concluída com sucesso!')
} else {
  console.log('Tarefa Pendente!')
}

Vale lembrar que Boolean não é boolean. Boolean -> é um tipo Object. Recomenda-se que sempre usemos tipos primitivos para declaração de variáveis no TypeScript.

number e bigint

Tipos que representa números e todas suas variáveis

Exemplos:

let num1: number = 23.0
let num2: number = 0x78cf
let num3: number = 0o577
let num4: number = 0b110001

console.log('Number - Ponto Flutuante...: ', num1)
console.log('Number - Hexadecimal...: ', num2)
console.log('Number - Octal...: ', num3)
console.log('Number - Binário...: ', num4)

Neste primeiro caso, podemos usar o number para representar números inteiros negativos flutuantes positivos inifinitos ou até mesmo Nan.

let big1: bigint = 9007199254740991n
let big2: bigint = 0b100000000000000000000000000000000000000000000000000011n
let big3: bigint = 0x20000000000003n
let big4: bigint = 0o400000000000000003n

console.log('Bigint...: ', big1)
console.log('Bigint - Binário...: ', big2)
console.log('Bigint - Hexadecimal...: ', big3)
console.log('Bigint - Octal...: ', big4)

Lançado no typescript em sua versão 3.2 no Ecmascript2020 ou ESNext, permite trabalhar com números inteiros maiores sem ter muitas possibilidades de erros de arredondamento.

string

Assim como no javascript o tipo string serve para armazenar texto, podendo ser delimitado tanto por aspas simples como por aspas duplas. Também existe o objeto String assim como number, mas da mesma forma, precisamos definir os tipos de maneira primitiva.

Exemplos:

let nomeCompleto: string = 'Kevin Sousa'
let funcaoEmpresa: string = 'Analista de redes FTTH NOC'
console.log(nomeCompleto)
console.log(funcaoEmpresa)

let nomeEmpresa: string = 'Alares'

let dadosFuncionario: string = `Seja bem-vinda ${nomeCompleto}! Você será ${funcaoEmpresa} 
    na empresa ${nomeEmpresa}`

console.log(dadosFuncionario)

array

Basicamente, é uma lista ordenada de dados. Todo array começa com o índice 0 . Para o TypeScript, precisamos definir seu tipo ao inicializar.

Exemplos:

let frutas: string[] = ['🍍', '🍊', '🍎', '🍉', '🥭']
let frutas1: Array<string> = ['🍍', '🍊', '🍎', '🍉', '🥭']
console.log(frutas[2])
console.log(frutas1[3])

Neste exemplo frutas é um array de strings vazio, e frutas1 é um Objeto Array de string.

let idiomas: Array<string> = ['Português', 'Inglês', 'Espanhol', 'Francês']
idiomas.push('Mandarim')
idiomas.push('Italiano')

console.log(idiomas)
console.log(idiomas)
console.log(idiomas)

Na prática, não há diferença de uso entre o primitivo string[] e o tipo genérico Array. Ambas as declarações são usadas para definir um array de strings em TypeScript.

Ambos os tipos podem ser usados para definir arrays de strings e oferecem as mesmas funcionalidades e métodos de array. A escolha entre os dois formatos é uma questão de preferência pessoal. Algumas pessoas podem preferir a sintaxe mais concisa string[], enquanto outras podem preferir a sintaxe genérica Array. O resultado é o mesmo em ambos os casos.

let listaNumeros = [0, 1, 2, 3, 4, 5];
listaNumeros = [...listaNumeros, 6, 7, 8, 9, 10];

console.log(listaNumeros);

Neste exemplo, usamos o spread operator para desestruturar a variável e atualizar os valores.

let linguagensArray:string[] = new Array('JavaScript', 'Python', 'PHP', 'C#');

function funcaoLinguagens(linguagens:string[]) {
    for (let i = 0; i < linguagens.length; i++) {
        console.log(linguagensArray[i]); 
    }
}

funcaoLinguagens(linguagensArray);

Com funções com parâmetros, precisamos definir também os valores que serão retornados.

tuple

Tupla é um tipo de armazenamento derivado de arrays que pode conter vários tipos. Com tuplas, é possível:

let pessoa: [string, string, number];

let pessoa2: [nome: string, posicao: string, idade: number]
pessoa = ['Kevin Sousa', 'Analista de redes', 34];

Note que, ao definir a variável, realizamos sua tipagem conforme a posição dos valores. Podemos também fazer o uso de rótulos na inicialização da variável.

let listaFrutas: [string, ...string[]] = ['🍍', '🍊', '🍎', '🍉', '🥭'];
console.log(...listaFrutas);

Neste exemplo, o uso do spread operator também é possível para o uso de tuplas para acessar os valores. A primeira atribuição do string serve para dizer que a tupla é de string, e usando o spread operator, ele assume que os demais valores da tupla também são string, a fim de evitar escrever string para cada tipo.

function listarPessoas(nomes: string[], idades: number[]) {
    return [...nomes, ...idades];
}

let resultado = listarPessoas(['Glaucia', 'Jurema'], [34, 68]);
console.log(resultado)

Aplicando tuplas com funções e usando o retorno do spread operator, é possível criar uma lista e retornar seus valores sem precisar colocar todos os atributos.

type Nome = 
         | [primeiroNome: string, sobrenome: string]
         | [primeiroNome: string, nomeMeio: string, sobrenome: string]

function criarPessoa(...nome: Nome) {
    return [...nome];
}

console.log(criarPessoa('Glaucia', 'Lemos'));
console.log(criarPessoa('Glaucia', 'de Souza', 'Lemos'));

Criando um tipo usando uma condição com pipes.

Conclusão

Diferentes formas podem ser realizadas para usar o TypeScript e outras ferramentas nativas do JavaScript para facilitar a escrita.

Este foi um guia introdutório e, em breve, darei continuidade a ele com outros assuntos de TypeScript.