Tipos, interfaces e as paradas que as IAs geram. Entenda o que está no seu código.

hidden: true

TypeScript básico

Se você usa Cursor ou qualquer IA para codar, o código gerado provavelmente usa TypeScript. Aqui está o mínimo que precisa saber.

O que é TypeScript?

JavaScript com tipos. Ajuda a encontrar erros antes de rodar o código:

// JavaScript — descobre o erro quando roda
function soma(a, b) {
  return a + b;
}
soma("1", 2); // "12" (concatenação, não soma)
 
// TypeScript — descobre o erro na hora de escrever
function soma(a: number, b: number): number {
  return a + b;
}
soma("1", 2); // ❌ Erro: "1" não é number

Tipos básicos

const nome: string = "Jean";
const idade: number = 25;
const ativo: boolean = true;
const hobbies: string[] = ["código", "games"];
const nada: null = null;

Interfaces

Definem a forma de um objeto:

interface User {
  id: string;
  name: string;
  email: string;
  age?: number; // ? = opcional
}
 
const user: User = {
  id: "1",
  name: "Jean",
  email: "[email protected]",
};

Type

Similar a interface, mas para unions e tipos mais complexos:

type Status = "active" | "inactive" | "pending";
type ID = string | number;

Funções

function greet(name: string): string {
  return `Olá, ${name}!`;
}
 
// Arrow function
const multiply = (a: number, b: number): number => a * b;
 
// Async
async function fetchUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

Generics

// Função genérica
function primeiro<T>(array: T[]): T {
  return array[0];
}
 
primeiro<string>(["a", "b"]); // retorna string
primeiro<number>([1, 2, 3]); // retorna number

No React

// Props
interface ButtonProps {
  label: string
  onClick: () => void
  variant?: "primary" | "secondary"
}
 
function Button({ label, onClick, variant = "primary" }: ButtonProps) {
  return <button onClick={onClick}>{label}</button>
}

O que a IA gera que você deve entender

// `!` = "confie em mim, não é null"
process.env.DATABASE_URL!
 
// `as` = type assertion
const data = await res.json() as User[]
 
// `Record` = objeto com chaves e valores tipados
const scores: Record<string, number> = { jean: 100, pierre: 95 }
 
// `Partial` = todas as props opcionais
function updateUser(data: Partial<User>) { ... }
 
// `Omit` = tudo menos alguns campos
type CreateUser = Omit<User, "id" | "createdAt">

Dica

Não precisa ser expert em TypeScript. As IAs geram os tipos corretos na maioria das vezes. Foque em entender o que está no código, não em escrever tipos do zero.

TypeScript básico: o mínimo para vibecoders