TypeScript é uma linguagem de programação de código aberto desenvolvida pela Microsoft.

É um superconjunto sintático estrito de JavaScript e adiciona tipagem estática opcional à linguagem.

Esse tutorial é especialmente voltado para programadores que já conhecem JavaScript, abordará os conceitos fundamentais do TypeScript e destacará algumas das “pegadinhas” mais importantes.

O TypeScript foi desenvolvido por Anders Hejlsberg, arquiteto da linguagem C# e criador das linguagens Delphi e Turbo Pascal.

TypeScript oferece suporte a arquivos de definição que podem conter informações de tipo de bibliotecas JavaScript existentes, assim como arquivos de cabeçalho C++ podem descrever a estrutura de arquivos de objeto existentes.

O endereço oficial do TypeScript é: https://www.typescriptlang.org/.

Você pergunta:

— Se o TypeScript é um superconjunto do JavaScript, então, todo o código JavaScript também já é TypeScript?!!!

Apesar de na própria documentação oficial do TypeScript ter escrito isso, a resposta é NÃO!

Há algumas diferenças sim, por exemplo, se você criar variáveis ou constantes(var, let ou const) com o nome: name em TypeScript, não funcionará, dará erro:

var name = "Marcos"

Você obterá o erro:

■ Cannot redeclare block-scoped variable 'name'.

Isso porque o transpilador do TypeScript já usa uma declaração com esse mesmo nome de: name. Se for usar algo para denominar um objeto ou qualquer outra coisa, use exemplos assim:

var userName  = "Eric"
let firstName = "Camila"
const theName = "Marcos"

Mas, em JavaScript isso não há problema nenhum, exemplos:

var name = "Débora"
console.log(name)
alert(name)
document.write(name) // Para uso no navegador

Esse código abaixo, também NÃO FUNCIONA EM TypeScript!

o legal do JS é que tem vários easter eggs pic.twitter.com/Jbks00bTTX

— Terminal Root (@TerminalRootTV) May 24, 2024

console.log(++[[]][+[]]+[+[]])

No entanto, se você veio de outras linguagens de programação, você ainda contará com algumas dificuldades de entender TypeScript. Isso, por exemplo, funciona em TypeScript:

Em JS as constantes são modificáveis, isso demorou de entrar na minha mente pic.twitter.com/NVBd9ctCF3

— Terminal Root (@TerminalRootTV) May 5, 2024

Como Instalar o TypeScript

Para testar os códigos TypeScript você pode escrever no Playground do TypeScript. Ou instalar o comando tsc na sua máquina utilizando o NPM, assim:

sudo npm install -g typescript

No Windows e no macOS não precisa do sudo.

Depois crie um código básico, por exemplo, main.ts(extensão .ts):

console.log("Salve, TypeScript!")

Rode o arquivo com o comando tsc:

tsc main.ts
tsc main.ts --outFile index.js // Compila para um nome diferente

Após rodar esse comando ele criará um arquivo de mesmo nome, mas com extensão .js: main.js.

E rode usando um JavaScript runtime, exemplos: Bun, Node ou QuickJS:

bun main.js
node main.js
qjs main.js

Você também pode criar um ambiente de desenvolvimento, exemplo:

mkdir aprender-typescript
cd aprender-typescript
npm init -y
npm install typescript --save-dev
npx tsc --init

Isso fica mais interessante para seu LSP: Como Configurar o LSP para TypeScript no Neovim.

Você pode modificar o arquivo tsconfig.json, e deixar assim:

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["main.ts"]
}

Ele sempre compilará o arquivo main.ts apenas rodando:

tsc

E criará um main.js dentro da pasta dist.

E rodar o arquivo JavaScript:

bun dist/main.js

Ou tudo de uma só vez: tsc && bun dist/main.js

Para mais detalhes sobre o comando tsc use a ajuda:

tsc --help

Tutorial básico

O TypeScript possui tipos, por isso seu nome é: TypeScript! 😃

01. Exemplos dos seus tipos primitivos:

let isDone: boolean = false;
let age: number = 42;
let userName: string = "John Doe";

Não existe float ou double é tudo number! Mas, tem outros tipos primitivos como: bigint, symbol, unknown, …

No meu caso, eu tenho o OpenGL instalado e ele definiu tipos para o TypeScript, logo, o tipo GLfloat está disponível:

Meu LSP lista todos os tipos pra mim!

Mas, se não funcionar para você(tem que ter o OpenGL instalado no sistema), defina assim:

type GLfloat = number;

let pi: GLfloat = 3.14;
console.info(pi);

Há um tipo especial: any, que você pode usar sempre que não quiser que um valor específico cause erros de verificação de digitação.

let obj: any = { x: 0 };

Saiba mais aqui.

02. Possui Arrays e Tuplas:

Um tipo de tupla é outro tipo de Array que sabe exatamente quantos elementos contém e exatamente quais tipos contém em posições específicas.

let numbers: number[] = [1, 2, 3];
let tuple: [string, number] = ["Olá", 42];

console.info(numbers[1])
console.log(tuple[1])

03. Enumeradores

Enums permitem que um desenvolvedor defina um conjunto de constantes nomeadas. O uso de enums pode facilitar a documentação da intenção ou a criação de um conjunto de casos distintos. TypeScript fornece enumerações numéricas e baseadas em string.

enum Color { Vermelho, Verde, Azul }
let c: Color = Color.Verde;

console.log(`O número Verde é: ${c}`)

04. Interfaces e Classes

Uma declaração de interface é outra maneira de nomear um tipo de objeto:

Interface

interface Person {
    firstName: string;
    lastName: string;
    age?: number; // Opcional
}

function greeter(person: Person) {
    return `E aí, ${person.firstName} ${person.lastName}?!`;
}

const myPerson: Person = {
    firstName: "Mark",
    lastName: "Simmons",
    age: 39
};

console.log(greeter(myPerson));

Classe

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    distance(distanceInMeters: number = 0) {
        console.log(`O ${this.name} está a ${distanceInMeters}m de mim.`);
    }
}

const myAnimal = new Animal("gato");
myAnimal.distance(10);

Note: name está dentro de uma classe! 😃

Dicas

• Você pode utilizar tipos de união (|) e interseção (&) para maior flexibilidade.

function padLeft(value: string, padding: number | string) {
  if (typeof padding === "number") {
    return `${value}:  ${padding}`
  }
  if (typeof padding === "string") {
    return `${value} ${padding}`;
  }
  throw new Error(`Expected string or number, got '${typeof padding}'.`);
}

console.log(padLeft("Olá", "amigo"))
console.log(padLeft("Olá", 36))
//console.log(padLeft(9, 36)) // Erro

• Evite o uso de tipos automáticos:

// Má ideia
let myStr1 = "Isso é minha string"

// Boa ideia
let myStr2 : string = "Isso sim é minha string"

• Use módulos (import e export) para organizar seu código.

// mymodule.ts
export function dizAi(name: string) {
    return `Calma ${name}`;
}

// main.ts
import { dizAi } from './mymodule';
console.log(dizAi("Calabreso"));

Note: Declarei a variável name, mas como argumento de função!

Após compilar e rodar:

tsc && bun dist/main.js
Calma Calabreso

EXERCÍCIO: Gerar Números para a Mega-Sena com TypeScript

Como vamos usar a função process.stdout.write() precisamos instalar o @types/node, então rode:

npm i --save-dev @types/node

Agora leia o código devidamente comentado com explicação de cada bloco:

// Esta função sorteia seis números distintos entre 1 e 60.
function megaSena(): number[] { // Tipo de retorno é um array de number

  // Usamos um Set para armazenar os números. 
  // Um Set não permite duplicatas, então ele garante que todos os números sejam únicos.
  const numbers: Set<number> = new Set();

  while (numbers.size < 6) {
    // A função Math.random() gera um número pseudoaleatório entre 0 (inclusive) e 1 (exclusivo). 
    // Multiplicamos por 60 e adicionamos 1 para obter um número entre 1 e 60.
    const randomNumb = Math.floor(Math.random() * 60) + 1;
    numbers.add(randomNumb);
  }

  // Após gerar seis números, convertê-los de Set para um Array e ordená-los em ordem crescente.
  return Array.from(numbers).sort((a, b) => a - b);
}

// chamamos a função que retorna um Array
const array = megaSena();

// Fazemos um loop e usamos process.stdout.write para não pular linha, console.log pula
for (let index = 0; index < array.length; index++) {
  process.stdout.write(`${array[index]} `)
}
console.log()

Rode e não esqueça de jogar esses números! 😃

Conclusão

TypeScript oferece uma poderosa maneira de escrever JavaScript com tipos facilitando a manutenção do código.

Com os fundamentos acima, você deve estar bem equipado para começar a usar TypeScript em seus projetos. Lembre-se de aproveitar os recursos do TypeScript para criar código mais robusto.

Dê prosseguimento ao seu aprendizado e consulte a documentação no site oficial.

typescript

Marcos Oliveira

Desenvolvedor de software

https://github.com/terroo