Passo 1: Instalação e Configuração

Antes de começarmos a codar, você precisa ter o Node.js instalado na sua máquina, pois o compilador do TypeScript (tsc) é um pacote do npm.

1.1. Instalar o Node.js

Se você ainda não tem, baixe e instale o Node.js do site oficial. A instalação do Node.js já inclui o npm (Node Package Manager).

1.2. Instalar o TypeScript

Com o Node.js e o npm instalados, abra seu terminal ou prompt de comando e execute o seguinte comando para instalar o TypeScript globalmente na sua máquina:

npm install -g typescript

Para verificar se a instalação foi bem-sucedida, digite:

tsc --version

Você deverá ver a versão do compilador instalada.

Passo 2: Seu Primeiro Projeto TypeScript

Vamos criar um projeto simples para entender o fluxo de trabalho básico.

2.1. Criar o Projeto

Crie uma nova pasta para o seu projeto e navegue até ela no terminal:

mkdir meu-projeto-ts
cd meu-projeto-ts

2.2. Criar um Arquivo TypeScript

Crie um arquivo chamado app.ts e adicione o seguinte código:

// Definindo uma função com tipos
function saudar(nome: string) {
    console.log(`Olá, ${nome}! Bem-vindo ao TypeScript.`);
}

let usuario = "Alice";
saudar(usuario);

// Erro de tipagem (comentado)
// let numero = 123;
// saudar(numero); // Isso causaria um erro em tempo de compilação

Observação: O : string após a variável nome é a anotação de tipo. Ela informa ao TypeScript que o parâmetro nome deve ser uma string. Tentar passar um número resultaria em um erro antes de você executar o código.

2.3. Compilar o Código

Agora, use o compilador do TypeScript (tsc) para converter o arquivo app.ts em JavaScript:

tsc app.ts

Após a execução, um novo arquivo chamado app.js será criado na mesma pasta. Veja como ele será:

// Código gerado em JavaScript
function saudar(nome) {
    console.log("Ol\u00E1, " + nome + "! Bem-vindo ao TypeScript.");
}
var usuario = "Alice";
saudar(usuario);
// Erro de tipagem (comentado)
// let numero = 123;
// saudar(numero); // Isso causaria um erro em tempo de compilação

Note que o JavaScript gerado é um código simples e compatível com navegadores antigos, sem as anotações de tipo.

2.4. Executar o Código

Agora, execute o arquivo JavaScript com Node.js para ver o resultado:

node app.js

A saída será:

Olá, Alice! Bem-vindo ao TypeScript.

Passo 3: Principais Tipos de Dados

O TypeScript oferece uma variedade de tipos para garantir a segurança do seu código. Aqui estão os mais comuns:

// Tipos primitivos
let isDone: boolean = false;
let idade: number = 30;
let nomeCompleto: string = "João Silva";

// Array
let listaDeNumeros: number[] = [1, 2, 3]; // Ou Array

// Tuple (tupla)
// Um array com um número fixo de elementos e tipos específicos
let pessoa: [string, number];
pessoa = ["Ana", 25]; // OK
// pessoa = [25, "Ana"]; // Erro

// Enum
// Conjunto de constantes nomeadas
enum Cores {Vermelho, Verde, Azul};
let corEscolhida: Cores = Cores.Verde;
console.log(corEscolhida); // Saída: 1 (índice do enum)

// Any (evite, mas é útil em alguns casos)
// Desativa a verificação de tipo. Use com cautela!
let naoDefinido: any = "posso ser qualquer coisa";
naoDefinido = 10;

// Void (para funções que não retornam nada)
function logar(): void {
    console.log("Esta função não retorna nada.");
}

// Null e Undefined
let u: undefined = undefined;
let n: null = null;

Passo 4: Interfaces e Classes

Interfaces e classes são essenciais para estruturar seu código de forma orientada a objetos.

4.1. Interfaces

As interfaces definem a "forma" de um objeto. Elas garantem que um objeto terá certas propriedades com tipos específicos.

interface Usuario {
    nome: string;
    idade: number;
    email?: string; // O '?' torna a propriedade opcional
}

function exibirUsuario(usuario: Usuario) {
    console.log(`Nome: ${usuario.nome}, Idade: ${usuario.idade}`);
    if (usuario.email) {
        console.log(`Email: ${usuario.email}`);
    }
}

let novoUsuario = { nome: "Maria", idade: 28 };
exibirUsuario(novoUsuario);

4.2. Classes

As classes em TypeScript são muito parecidas com as de outras linguagens orientadas a objetos, com a adição de modificadores de acesso (public, private, protected).

class Animal {
    private nome: string;

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

    public fazerBarulho(): string {
        return "Fazendo barulho...";
    }
}

class Cachorro extends Animal {
    constructor(nome: string) {
        super(nome);
    }

    // Sobrescrevendo o método da classe pai
    public fazerBarulho(): string {
        return "Au Au!";
    }
}

let meuCachorro = new Cachorro("Rex");
console.log(meuCachorro.fazerBarulho());

Passo 5: Configurando o Projeto com tsconfig.json

Em projetos reais, é inviável compilar cada arquivo individualmente. O arquivo tsconfig.json é a espinha dorsal da configuração do seu projeto TypeScript.

Para gerar um arquivo tsconfig.json padrão no seu projeto, execute o seguinte comando no terminal:

tsc --init

Isso criará um arquivo tsconfig.json com várias opções comentadas. Algumas opções importantes que você pode configurar são:

• "target": "es5": A versão do ECMAScript para a qual o seu código será compilado.
• "outDir": "./dist": O diretório de saída para os arquivos JavaScript compilados.
• "rootDir": "./src": O diretório raiz dos seus arquivos TypeScript.
• "strict": true: Habilita todas as opções de verificação de tipo rigorosas. Recomendado para projetos novos.

Depois de configurar o tsconfig.json, você pode compilar todo o seu projeto simplesmente executando tsc no terminal.

// Compila todos os arquivos .ts do projeto
tsc