TypeScript: Seu primeiro programa em TypeScript

Última atualização: 2026-08-26

Agora que você já aprendeu tudo sobre instalação e configuração, é hora de escrever seu primeiro programa em TypeScript — percorra todo o fluxo de trabalho do TypeScript, desde a escrita do código até sua execução.

1. Criar um arquivo de projeto

No diretório do projeto criado na lição anterior, crie uma nova pasta chamada src/hello.ts:

my-project/
├── src/
│   └── hello.ts      ← Create this file
├── tsconfig.json
└── package.json

Digite o seguinte código em hello.ts:

// First TypeScript Program
let username: string = "Charlie";
let age: number = 18;

function greet(name: string, userAge: number): string {
  return name + " This year " + userAge + "  years old";
}

console.log(greet(username, age));

A maior diferença entre esse código e o JavaScript é que cada variável e parâmetro é seguido por uma anotação de tipo (: string, : number).

2. Uma primeira abordagem às anotações de tipo

As anotações de tipo são a sintaxe central do TypeScript, e seu formato é muito simples: nome da variável + dois pontos + tipo.

let Variable Name: Type = value;

(1) Anotações comuns para tipos básicos

let name: string = "Diana";       // String
let age: number = 20;            // Numbers
let isStudent: boolean = true;   // Boolean value
let score: number = 95.5;        // Decimals are also number
let nothing: null = null;        // null
let empty: undefined = undefined; // undefined

(2) Anotações de tipo de função

As funções devem especificar duas partes: tipos de parâmetros e tipos de retorno.

function Function Name(Parameters: Parameter Types): Return Type {
  // Function Body
}

• Tipo de parâmetro: Adicione : type após cada parâmetro
• Tipo de retorno: Adicione : type após os parênteses que contêm os parâmetros

▶ Exemplo: Funções com anotações de tipo

// Calculate the sum of two numbers
function add(a: number, b: number): number {
  return a + b;
}

// Concatenating Strings
function joinWords(first: string, second: string): string {
  return first + " " + second;
}

console.log(add(3, 5));
console.log(joinWords("Hello", "The World"));

Saída:

8
Hello The World

3. Compilando código TypeScript

Depois de escrever o arquivo .ts, é preciso compilá-lo para .js antes de poder executá-lo.

(1) Compilando manualmente um único arquivo

tsc src/hello.ts

Isso criará um arquivo chamado src/hello.js no mesmo diretório. Abra-o e você verá que todas as anotações de tipo desapareceram:

// Compiled hello.js
var username = "Charlie";
var age = 18;
function greet(name, userAge) {
    return name + " This year " + userAge + "  years old";
}
console.log(greet(username, age));

Isso é o apagamento de tipos do TypeScript — as anotações de tipo só surtem efeito na hora da compilação, e o código JavaScript resultante é quase idêntico ao JS escrito manualmente.

(2) Compilar todo o projeto usando o arquivo tsconfig.json

Se o seu projeto contiver tsconfig.json, basta executar o seguinte comando no diretório raiz do projeto:

tsc

O compilador fará a compilação em lote de todos os arquivos .ts de acordo com as entradas rootDir e outDir no arquivo de configuração.

▶ Exemplo: Compilar e executar

# Go to the project directory
cd my-project

# Compilation（According to tsconfig.json Layout）
tsc

# Run the compiled JS
node dist/hello.js

Saída:

Charlie This year 18  years old

4. Conheça o poder da verificação de tipos

O principal valor do TypeScript: detectar erros na hora da compilação. Vamos escrever, de propósito, um código incorreto e ver como o TypeScript nos flagra.

(1) Incompatibilidade de tipos

let score: number = 90;
score = "Excellent";  // ❌ Error：You cannot convert the type"string"Assigned to Type"number"

Esse código é executado “corretamente” em JavaScript, mas surgem problemas quando score é usado em operações matemáticas posteriormente. O TypeScript detecta isso diretamente na fase de compilação.

(2) Tipo de parâmetro inválido

function add(a: number, b: number): number {
  return a + b;
}

add(3, "5");  // ❌ Error：Type"string"Parameters cannot be assigned to types"number"parameters

Em JavaScript, add(3, "5") retorna "35" (concatenação de strings), o que quase certamente não é o resultado desejado. O TypeScript avisa com antecedência que você passou o argumento errado.

(3) Chamada de um método que não existe

let name: string = "Charlie";
name.toFixed(2);  // ❌ Error：Type"string"The property does not exist"toFixed"

toFixed é um método do tipo number, mas não existe em string. O JavaScript lançaria um erro TypeError em tempo de execução, mas o TypeScript o detecta em tempo de compilação.

▶ Exemplo: Comparando a detecção de erros em JavaScript e TypeScript

// ===== JavaScript Version：The problem wasn't discovered until runtime =====
let userAge = "25";           // String "25"
let nextYear = userAge + 1;   // No errors will occur，But the result was "251" rather than 26
console.log(nextYear);        // Output "251" —— That's not what we want.！

// ===== TypeScript Version：Intercepted at compile time =====
let userAge2: number = 25;    // Clearly labeled as a number
let nextYear2: number = userAge2 + 1;  // Correct：25 + 1 = 26
console.log(nextYear2);       // Output 26

Saída:

251
26

5. tsc --watch: Compilação automática

É muito trabalhoso executar manualmente o tsc toda vez que modifico o arquivo .ts. O modo --watch (abreviado como -w) permite que o compilador monitore as alterações no arquivo e compile assim que o arquivo for salvo:

tsc --watch

Ou especifique um único arquivo:

tsc src/hello.ts --watch

Depois de ativado, o terminal exibirá:

[8:30:15 PM] Starting compilation in watch mode...
[8:30:15 PM] Found 0 errors. Watching for file changes.

Sempre que você salva o arquivo, ele é recompilado automaticamente; basta se concentrar na saída node dist/xxx.js.

▶ Exemplo: Fluxo de trabalho completo durante o desenvolvimento

# Terminal 1：Enable Automatic Compilation
tsc --watch

# Terminal 2：Run and Test
node dist/hello.js
# Edit src/hello.ts Run it again
node dist/hello.js

Saída:

# Command executed successfully

6. Inferência de tipos — O que torna o TypeScript tão inteligente

Você deve ter percebido que nem todas as variáveis exigem uma anotação de tipo. O TypeScript é inteligente o suficiente para inferir automaticamente o tipo de uma variável com base em seu valor inicial:

let name = "Diana";      // TS Automatically inferred as string
let age = 20;           // TS Automatically inferred as number
let isActive = true;    // TS Automatically inferred as boolean

Isso é totalmente equivalente ao código a seguir:

let name: string = "Diana";
let age: number = 20;
let isActive: boolean = true;

A regra é simples: quando um valor inicial é fornecido, o TypeScript pode inferir o tipo, de modo que você pode omitir a anotação de tipo; quando nenhum valor inicial é fornecido, você deve especificar explicitamente o tipo.

▶ Exemplo: Quando é necessário incluir uma anotação de tipo?

// ✅ Has an initial value——Type can be inferred，Comments may be omitted
let message = "Hello";
let count = 0;

// ❌ No initial value——The type must be specified.，Otherwise TS The default is any
let userId: number;       // Must be labeled
let userEmail: string;    // Must be labeled

// ❌ Do not label = Implicit any（strict An error occurs in this mode）
let userId2;              // ❌ Error：Variables implicitly have"any"Type

Saída:

// Executed successfully

❓ Perguntas Frequentes

P: As anotações de tipo tornam o código mais longo e difícil de escrever? R: Você terá que digitar mais alguns caracteres, mas economizará tempo na depuração. É como dedicar 10 segundos para verificar a previsão do tempo e levar um guarda-chuva antes de sair — isso vale muito mais a pena do que passar uma hora trocando de roupa depois de ser pego pela chuva. Além disso, o TypeScript possui inferência de tipos, então, em muitos casos, você não precisa escrever as anotações manualmente.

P: Por que o código JS compilado usa var em vez de let? R: Isso depende da configuração target em tsconfig.json. Se você definir target como ES5 (uma versão muito antiga), o compilador converterá let e const em var para garantir a compatibilidade. Definir como ES2020 ou superior preservará let e const. Recomendamos definir como ES2020.

P: É muito trabalhoso executar manualmente o node dist/xxx.js todas as vezes. Existe uma maneira mais fácil? R: Sim. Após instalar o ts-node (npm install -g ts-node), basta executar ts-node src/xxx.ts para pular a etapa de compilação manual. A extensão Code Runner para o VS Code também oferece suporte à execução de arquivos TS com um clique. No entanto, para projetos de produção, ainda recomendamos seguir o processo de compilação do tsc.

P: Se eu encontrar erros de tipo, mas o programa ainda assim for executado, posso ignorá-los por enquanto? R: Tecnicamente, sim — o tsc irá relatar os erros, mas ainda assim gerará arquivos JS (a menos que haja erros graves de sintaxe). No entanto, é altamente recomendável que você corrija todos os erros de tipo antes de executar o programa. Esses erros não são apenas “sugestões”; são “problemas reais que causarão dificuldades”. Ignorá-los equivale a rebaixar o TypeScript a um corretor ortográfico.

📖 Resumo

• Sintaxe de anotação de tipos: let variableName: type = value; os parâmetros de função e os valores de retorno também podem ser anotados
• O TypeScript realiza o apagamento de tipos após a compilação; portanto, o código JavaScript gerado não contém informações de tipo.
• O principal valor do TypeScript: detectar erros de tipo em tempo de compilação para evitar problemas em tempo de execução
• tsc --watch Compilar automaticamente, ts-node Executar arquivos TS diretamente
• A inferência de tipos elimina a necessidade de atribuir manualmente valores iniciais às variáveis, mas as variáveis sem valores iniciais devem ser declaradas.
• O uso implícito de any no modo estrito gerará um erro, o que é positivo — isso obriga você a especificar o tipo de forma clara.

📝 Exercícios

1. Exercício básico (Dificuldade ⭐): Crie src/hello.ts, defina três variáveis com anotações de tipo (string, número, booleano), compile e execute o programa e, em seguida, use console.log para exibir seus valores.
2. Problema avançado (Dificuldade ⭐⭐): Escreva uma função com anotação de tipo calculateArea(width: number, height: number): number que calcule a área de um retângulo. Passe intencionalmente um parâmetro do tipo string para ela, observe a mensagem de erro de compilação do TypeScript e, em seguida, corrija o erro.
3. Desafio (Dificuldade: ⭐⭐⭐): Compare como o JavaScript e o TypeScript lidam com o mesmo conjunto de códigos de erro — escreva um trecho de código em JavaScript contendo três tipos de erros (tratar uma string como um número, chamar um método inexistente e acessar uma propriedade indefinida) e, em seguida, reescreva-o em TypeScript, observando em qual linha o TypeScript relata cada erro.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós