TypeScript: essência da linguagem, tipagem estrita e React Native

O que é TypeScript?

TypeScript é uma linguagem de programação da Microsoft (2012) criada por Anders Hejlsberg (criador do C# e Turbo Pascal). TypeScript estende o JavaScript com um sistema de tipos estático, interfaces, genéricos, enumerações e decoradores. O código TS compila para JavaScript puro (transpilação) via compilador tsc ou Babel — o resultado é JS padrão que funciona em qualquer ambiente.

A motivação por trás do TypeScript são as limitações do JavaScript em projetos grandes. A tipagem dinâmica do JS leva a erros que só são descobertos em tempo de execução: undefined is not a function, Cannot read property of null. O TypeScript move a verificação de tipos para o tempo de compilação, prevenindo esses erros antes da execução do código. Quanto maior o projeto, maiores os benefícios do TS: em uma base de código de 100.000+ linhas, o TS previne centenas de bugs potenciais.

Uma característica chave do TypeScript é a tipagem estrita com a flag opcional strict: true no tsconfig.json. O modo estrito ativa todas as verificações: strictNullChecks (null/undefined são incompatíveis com outros tipos), noImplicitAny (proíbe any implícito), strictFunctionTypes (contravariância de parâmetros de funções). Por padrão, strict: true é recomendado para todos os novos projetos.

TypeScript vs JavaScript

TypeScript difere do JavaScript apenas em tempo de desenvolvimento. Após a compilação, os tipos são apagados — o runtime executa JS normal sem perda de desempenho. Este é um trade-off: o desenvolvimento requer uma etapa extra de compilação, mas fornece autocompletar na IDE, refatoração com renomeação de símbolos e documentação de tipos diretamente no código.

Sistema de tipos do TypeScript

O sistema de tipos do TypeScript é estrutural, não nominal: dois tipos são compatíveis se suas estruturas correspondem, independentemente do nome. Isso difere do Java/C# onde a compatibilidade é determinada pelo nome da classe ou interface. A tipagem estrutural simplifica a integração com código JS existente — não é necessário declarar implements para cada tipo.

Tipos básicos e avançados

TypeScript suporta os tipos primitivos do JS mais: any (desativa verificação), unknown (any seguro — requer verificação antes do uso), never (nunca retorna), void (sem retorno), tuple (tupla de tamanho fixo), enum (enumeração), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Sistema de tipos básico do TypeScript
// Tipos primitivos
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Tipos Union e Literal
type Platform = 'ios' | 'android' | 'web';
type Status = 'idle' | 'loading' | 'success' | 'error';

function getSDKVersion(platform: Platform): number {
  switch (platform) {
    case 'ios': return 17;
    case 'android': return 34;
    case 'web': return 2025;
  }
}

// Tuple — tupla de tamanho fixo
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — enumeração com auto-incremento
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — alternativa segura ao any
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

const data = parseJSON('{"name":"TS"}');
if (typeof data === 'object' && data !== null) {
  console.log((data as Record<string, unknown>).name);
}

O tipo Platform é uma união de literais de string, restringindo valores a três opções. Se você passar 'windows', o TypeScript lançará um erro. A tupla Coordinate garante exatamente dois números — útil para coordenadas ou cores RGB. O enum AppState compila para um objeto com mapeamento reverso. Unknown força a verificação de tipo antes do uso — ao contrário de any, unknown é seguro por padrão.

Interfaces e type-aliases

Interfaces e type-aliases no TypeScript descrevem formas de objetos. Interfaces suportam fusão de declarações (redeclarar adiciona campos) e extensão (extends). Type-aliases podem descrever uniões, interseções, tuplas e tipos condicionais, mas não suportam fusão de declarações. Regra: use interfaces para objetos de API, type para todo o resto.

// Interfaces e tipos para React Native
// Interface com campos opcionais
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // campo opcional
  readonly createdAt: Date; // somente leitura
}

// Extensão de interface (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Tipo para dados de API
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial torna todos os campos opcionais
type PartialUser = Partial<User>;

// Pick — seleciona os campos especificados
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — dicionário com chaves tipadas
type UserMap = Record<string, User>;

A interface User com ? (campo opcional) e readonly (somente leitura). ApiResponse<T> é uma interface genérica para respostas de API. Partial<User> é um tipo utilitário que torna todos os campos opcionais (útil para formulários de edição). Pick<User, 'id' | 'name'> seleciona apenas os campos especificados — conveniente para componentes de pré-visualização. Record<string, User> é um dicionário de usuários por ID.

Genéricos e tipos utilitários

Genéricos são um recurso chave do TypeScript, permitindo criar componentes que funcionam com qualquer tipo sem perder segurança de tipos. Uma função genérica é definida com um parâmetro de tipo em colchetes angulares: function identity<T>(arg: T): T. O tipo T é inferido automaticamente do argumento ou especificado explicitamente: identity<string>('hello').

Tipos utilitários são genéricos internos para transformações de tipos: Partial<T> (todos os campos opcionais), Required<T> (todos os campos obrigatórios), Readonly<T> (todos os campos somente leitura), Pick<T, K> (selecionar campos), Omit<T, K> (excluir campos), Record<K, T> (dicionário), Exclude<T, U> (excluir da união), Extract<T, U> (extrair da união), NonNullable<T> (excluir null/undefined).

// Genéricos no TypeScript
// Função genérica para trabalhar com API
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json() as Promise<T>;
}

// Uso com um tipo específico
interface Product {
  id: number;
  title: string;
  price: number;
}

const products = await fetchData<Product[]>('/api/products');

// Classe genérica para gerenciamento de estado
class StateManager<S> {
  private state: S;

  constructor(initial: S) {
    this.state = initial;
  }

  getState(): S {
    return this.state;
  }

  updateState(partial: Partial<S>): void {
    this.state = { ...this.state, ...partial };
  }
}

// Trabalho tipado com Redux Reducer
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

A função fetchData<T> é um wrapper tipado em torno do fetch. O parâmetro T determina a forma da resposta: ao chamar fetchData<Product[]>, o TypeScript sabe que o array retornado contém objetos Product. A classe StateManager<S> gerencia estado de qualquer tipo — Partial<S> para atualizações parciais. Action<T, P> é uma união discriminada para ações Redux com estreitamento automático de tipo no switch.

TypeScript no React Native

TypeScript no React Native fornece tipagem estrita para props e estado de componentes. O CLI do React Native cria um template com extensão .tsx e tsconfig.json. PropTypes (JS) são substituídos por interfaces TypeScript — a verificação é feita em tempo de compilação, não em runtime. styled-components e React Navigation têm suporte completo a tipos.

Tipagem de componentes

React.FC<Props> é o tipo para um componente funcional com props. Os children são tipados automaticamente. useRef<T> — referência a um componente nativo. useState<S> — estado com inferência de tipo. useNavigation<T> — navegação tipada. useCallback, useMemo — com inferência automática de tipos. Todos os hooks do React são totalmente tipados.

// Componente React Native tipado
import React, { useState, useCallback } from 'react';
import {
  View, Text, FlatList, TouchableOpacity,
  StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// Tipos para navegação e dados
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type NavigationProp =
  NativeStackNavigationProp<RootStackParamList, 'Home'>;

// Interface para props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Componente funcional tipado
const ProductList: React.FC<ProductListProps> = ({
  products,
  onSelect
}) => {
  const navigation = useNavigation<NavigationProp>();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handlePress = useCallback((id: number) => {
    setSelectedId(id);
    onSelect(id);
    navigation.navigate('Profile', { userId: String(id) });
  }, [onSelect, navigation]);

  const renderItem = useCallback(({ item }: { item: Product }) => (
    <TouchableOpacity onPress={() => handlePress(item.id)}>
      <Text>{item.title}</Text>
      <Text>${item.price.toFixed(2)}</Text>
    </TouchableOpacity>
  ), [handlePress]);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );
};

O tipo RootStackParamList é um dicionário de rotas com seus parâmetros. NavigationProp fornece navegação tipada: navigation.navigate('Profile', { userId }) verifica que Profile aceita userId. useCallback com parâmetros tipados previne re-renderizações desnecessárias. FlatList é tipado via genéricos: — data e renderItem recebem tipos automaticamente.

Ferramentas do desenvolvedor TypeScript

Ferramentas TypeScript incluem o compilador tsc, tsconfig.json, suporte IDE no VS Code, ESLint com @typescript-eslint, Prettier e DefinitelyTyped (@types/*). tsc é o compilador que converte .ts para .js. tsconfig.json configura: target (ES2020), module (ESNext), strict: true, outDir (pasta de saída). sourceMap — depuração de TS no navegador através de mapas de código.

DefinitelyTyped é um repositório de definições de tipos para bibliotecas sem tipos internos. Instalação: npm install @types/react @types/react-native --save-dev. Arquivos .d.ts são declarações de tipos. Bibliotecas modernas (React, React Native, Angular) incluem tipos internos e não requerem @types/. Para bibliotecas JS antigas, DefinitelyTyped é a única fonte de tipos.

// tsconfig.json — configuração mínima
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // apenas verificação, sem geração de JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

A opção strict: true ativa todas as verificações de tipo — recomendada para todos os projetos. jsx: 'react-native' preserva JSX sem transformação (React Native processa JSX via Babel). moduleResolution: 'node' — resolução de módulos como no Node.js. esModuleInterop — compatibilidade com módulos CommonJS. noEmit: true — apenas verificar sem gerar arquivos JS (Babel ou Metro gera o JS).