Tutorial de TypeScript para Iniciantes

ūüóěÔłŹ TypeScript oferece suporte a arquivos de defini√ß√£o que podem conter informa√ß√Ķes de tipo de bibliotecas JavaScript, assim como arquivos de cabe√ßalho C++.


Tutorial de TypeScript para Iniciantes


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!

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:


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! OpenGL TypeScript 1 OpenGL TypeScript 2

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


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo


Crie Aplicativos Gr√°ficos para Linux e Windows com C++

Aprenda C++ Moderno e crie Games, Programas CLI, GUI e TUI de forma f√°cil.

Saiba Mais

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!