<h2>Instalação e Configuração Inicial</h2>
<p>TypeScript é um superconjunto de JavaScript que adiciona tipagem estática opcional. Antes de começar, você precisa do Node.js instalado em sua máquina. Acesse <a href="https://nodejs.org" target="_blank" rel="noopener noreferrer">nodejs.org</a> e baixe a versão LTS (Long Term Support). Após a instalação, abra o terminal e instale TypeScript globalmente:</p>
<pre><code class="language-bash">npm install -g typescript</code></pre>
<p>Verifique a instalação com <code>tsc --version</code>. Para um projeto específico, é recomendado instalar TypeScript localmente:</p>
<pre><code class="language-bash">npm init -y
npm install --save-dev typescript</code></pre>
<p>Agora crie o arquivo de configuração <code>tsconfig.json</code> na raiz do projeto. Execute <code>npx tsc --init</code> para gerar um arquivo padrão. Este arquivo controla como o TypeScript compila seu código. As propriedades mais importantes são <code>target</code> (versão JavaScript alvo), <code>module</code> (sistema de módulos), e <code>outDir</code> (pasta de saída compilada).</p>
<h3>Estrutura de Projeto Recomendada</h3>
<p>Organize seu projeto assim: crie uma pasta <code>src/</code> para arquivos TypeScript e uma pasta <code>dist/</code> para o JavaScript compilado. Atualize seu <code>tsconfig.json</code>:</p>
<pre><code class="language-json">{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"lib": ["ES2020"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true
},
"include": ["src/*/"],
"exclude": ["node_modules"]
}</code></pre>
<p>A opção <code>strict: true</code> ativa as verificações mais rigorosas de tipo — essencial para aproveitar TypeScript ao máximo.</p>
<h2>Tipos Primitivos e Anotação</h2>
<p>TypeScript oferece inferência automática de tipos, mas você também pode anotar explicitamente. Os tipos primitivos são: <code>string</code>, <code>number</code>, <code>boolean</code>, <code>null</code>, <code>undefined</code> e <code>symbol</code>. Veja exemplos práticos:</p>
<pre><code class="language-typescript">// Anotação explícita
let nome: string = "João";
let idade: number = 28;
let ativo: boolean = true;
let vazio: null = null;
let indefinido: undefined = undefined;
// Inferência implícita (TypeScript adivinha o tipo)
let cidade = "São Paulo"; // tipo: string
let salario = 5000; // tipo: number
// Union types (múltiplos tipos permitidos)
let id: string | number;
id = "USR001"; // ✓ válido
id = 123; // ✓ válido
id = true; // ✗ erro</code></pre>
<p>O compilador verificará esses tipos em tempo de desenvolvimento, evitando erros antes mesmo de executar o código. Use <code>npx tsc</code> para compilar seus arquivos TypeScript para JavaScript. Se houver erros de tipo, a compilação falhará e você verá mensagens descritivas.</p>
<h3>Tipos Literais e <code>any</code></h3>
<p>Às vezes você precisa ser mais específico. Tipos literais permitem valores exatos:</p>
<pre><code class="language-typescript">let direcao: "esquerda" | "direita" | "cima" | "baixo";
direcao = "esquerda"; // ✓ válido
direcao = "diagonal"; // ✗ erro
// Evite 'any' - ele desativa a verificação de tipos
let dado: any = "texto";
dado = 123; // ✓ válido, mas sem segurança</code></pre>
<h2>Objetos e Interfaces</h2>
<p>Objetos são estruturas complexas. Você pode tipar suas propriedades diretamente ou usar interfaces:</p>
<pre><code class="language-typescript">// Tipagem inline
let usuario: { nome: string; idade: number; email?: string } = {
nome: "Maria",
idade: 30
};
// Interface (mais reutilizável)
interface Usuario {
nome: string;
idade: number;
email?: string; // propriedade opcional
ativo: boolean;
}
const meuUsuario: Usuario = {
nome: "Carlos",
idade: 25,
ativo: true
};</code></pre>
<p>Interfaces são a forma padrão de definir contratos em TypeScript. A propriedade <code>email?</code> é opcional (pode não estar presente). Você também pode definir tipos com <code>type</code>, que oferece mais flexibilidade:</p>
<pre><code class="language-typescript">type ID = string | number;
type Produto = {
id: ID;
titulo: string;
preco: number;
descricao?: string;
};
const produto: Produto = {
id: "P001",
titulo: "Notebook",
preco: 3000
};</code></pre>
<h3>Funções com Tipos</h3>
<p>Funções precisam ter tipos para seus parâmetros e retorno:</p>
<pre><code class="language-typescript">// Anotação de parâmetros e retorno
function saudar(nome: string): string {
return Olá, ${nome}!;
}
// Arrow function com tipos
const calcularDesconto = (preco: number, percentual: number): number => {
return preco * (1 - percentual / 100);
};
// Função sem retorno (void)
function exibir(mensagem: string): void {
console.log(mensagem);
}
// Múltiplos retornos
function buscarDado(id: number): string | null {
if (id > 0) return Dado ${id};
return null;
}
console.log(saudar("Pedro")); // Olá, Pedro!
console.log(calcularDesconto(100, 20)); // 80</code></pre>
<p>Definir tipos para funções ajuda a evitar bugs — o compilador garante que você esteja passando os argumentos corretos e usando o retorno adequadamente.</p>
<h2>Compilação e Execução</h2>
<p>Compile seu código TypeScript com:</p>
<pre><code class="language-bash">npx tsc</code></pre>
<p>Isso gerará arquivos <code>.js</code> na pasta <code>dist/</code>. Para facilitar o desenvolvimento, use o modo watch:</p>
<pre><code class="language-bash">npx tsc --watch</code></pre>
<p>O TypeScript monitorará mudanças e recompilará automaticamente. Execute o JavaScript compilado com Node:</p>
<pre><code class="language-bash">node dist/seu-arquivo.js</code></pre>
<p>Para melhor experiência durante o desenvolvimento, instale o <code>ts-node</code>, que executa TypeScript diretamente sem compilação intermediária:</p>
<pre><code class="language-bash">npm install --save-dev ts-node
npx ts-node src/seu-arquivo.ts</code></pre>
<h2>Conclusão</h2>
<p>TypeScript adiciona segurança de tipo ao JavaScript sem deixar de ser JavaScript. Você aprendeu a: <strong>(1)</strong> instalar e configurar TypeScript corretamente, estabelecendo um ambiente profissional; <strong>(2)</strong> utilizar tipos primitivos e complexos para documentar e proteger seu código; <strong>(3)</strong> trabalhar com interfaces e funções tipadas, evitando erros em tempo de desenvolvimento.</p>
<p>Comece tipando gradualmente. Não precisa ser perfeito desde o início — TypeScript aprende suas intenções conforme você escreve. Pratique escrevendo pequenos programas, compilando frequentemente e observando os erros de tipo. Com o tempo, essa abordagem defensiva se tornará natural e você escreverá código mais robusto e mantenível.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://www.typescriptlang.org/docs/" target="_blank" rel="noopener noreferrer">TypeScript Official Documentation</a></li>
<li><a href="https://www.typescriptlang.org/docs/handbook/2/basic-types.html" target="_blank" rel="noopener noreferrer">TypeScript Handbook - Basic Types</a></li>
<li><a href="https://nodejs.org" target="_blank" rel="noopener noreferrer">Node.js Official Site</a></li>
<li><a href="https://www.typescriptlang.org/play" target="_blank" rel="noopener noreferrer">TypeScript Playground</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Glossary/TypeScript" target="_blank" rel="noopener noreferrer">MDN Web Docs - TypeScript</a></li>
</ul>