TypeScript: esencia del lenguaje, tipificación estricta y React Native

¿Qué es TypeScript?

TypeScript es un lenguaje de programación de Microsoft (2012) creado por Anders Hejlsberg (creador de C# y Turbo Pascal). TypeScript extiende JavaScript con un sistema de tipos estático, interfaces, genéricos, enumeraciones y decoradores. El código TS se compila a JavaScript puro (transpilación) mediante el compilador tsc o Babel — el resultado es JS estándar que funciona en cualquier entorno.

La motivación detrás de TypeScript son las limitaciones de JavaScript en proyectos grandes. La tipificación dinámica de JS provoca errores que solo se descubren en tiempo de ejecución: undefined is not a function, Cannot read property of null. TypeScript traslada la verificación de tipos a la compilación, previniendo estos errores antes de ejecutar el código. Cuanto más grande es el proyecto, mayores son los beneficios de TS: en una base de código de más de 100 000 líneas, TS previene cientos de errores potenciales.

Una característica clave de TypeScript es la tipificación estricta con el flag opcional strict: true en tsconfig.json. El modo estricto activa todas las verificaciones: strictNullChecks (null/undefined son incompatibles con otros tipos), noImplicitAny (prohíbe any implícito), strictFunctionTypes (contravarianza de parámetros de funciones). Por defecto, se recomienda strict: true para todos los proyectos nuevos.

TypeScript vs JavaScript

TypeScript se diferencia de JavaScript solo en el momento del desarrollo. Después de la compilación, los tipos se borran — el runtime ejecuta JS normal sin pérdida de rendimiento. Esta es una compensación: el desarrollo requiere un paso adicional de compilación, pero proporciona autocompletado en el IDE, refactorización con renombrado de símbolos y documentación de tipos directamente en el código.

Sistema de tipos de TypeScript

El sistema de tipos de TypeScript es estructural, no nominal: dos tipos son compatibles si su estructura coincide, independientemente del nombre. Esto difiere de Java/C# donde la compatibilidad se determina por el nombre de la clase o interfaz. La tipificación estructural simplifica la integración con código JS existente — no es necesario declarar implements para cada tipo.

Tipos básicos y avanzados

TypeScript soporta los tipos primitivos de JS más: any (desactiva la verificación), unknown (any seguro — requiere verificación antes de usar), never (nunca retorna), void (sin retorno), tuple (tupla de longitud fija), enum (enumeración), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

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

// Tipos Union y 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 longitud fija
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — enumeración con autoincremento
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — alternativa segura a 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);
}

El tipo Platform es una unión de literales de cadena que restringe los valores a tres opciones. Si pasas 'windows', TypeScript lanzará un error. La tupla Coordinate garantiza exactamente dos números — útil para coordenadas o colores RGB. El enum AppState se compila a un objeto con mapeo inverso. Unknown obliga a verificar el tipo antes de usarlo — a diferencia de any, unknown es seguro por defecto.

Interfaces y type-aliases

Las interfaces y los type-aliases en TypeScript describen la forma de los objetos. Las interfaces soportan fusion de declaraciones (volver a declarar añade campos) y extensión (extends). Los type-aliases pueden describir uniones, intersecciones, tuplas y tipos condicionales, pero no soportan fusion de declaraciones. Regla: usa interfaces para objetos de API, type para todo lo demás.

// Interfaces y tipos para React Native
// Interface con campos opcionales
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // campo opcional
  readonly createdAt: Date; // solo lectura
}

// Extensión de interfaz (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

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

// Utility types — Partial hace todos los campos opcionales
type PartialUser = Partial<User>;

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

// Record — diccionario con claves tipificadas
type UserMap = Record<string, User>;

La interfaz User con ? (campo opcional) y readonly (solo lectura). ApiResponse<T> es una interfaz genérica para respuestas de API. Partial<User> es un tipo utilitario que hace todos los campos opcionales (útil para formularios de edición). Pick<User, 'id' | 'name'> selecciona solo los campos especificados — conveniente para componentes de vista previa. Record<string, User> es un diccionario de usuarios por ID.

Genéricos y tipos utilitarios

Los genéricos son una característica clave de TypeScript que permite crear componentes que funcionan con cualquier tipo sin perder seguridad de tipos. Una función genérica se define con un parámetro de tipo entre ángulos: function identity<T>(arg: T): T. El tipo T se infiere automáticamente del argumento o se especifica explícitamente: identity<string>('hello').

Los tipos utilitarios son genéricos incorporados para transformaciones de tipos: Partial<T> (todos los campos opcionales), Required<T> (todos los campos obligatorios), Readonly<T> (todos los campos de solo lectura), Pick<T, K> (seleccionar campos), Omit<T, K> (excluir campos), Record<K, T> (diccionario), Exclude<T, U> (excluir de unión), Extract<T, U> (extraer de unión), NonNullable<T> (excluir null/undefined).

// Genéricos en TypeScript
// Función genérica para trabajar con 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 con un tipo específico
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// Clase genérica para gestión 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 };
  }
}

// Trabajo tipificado con 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>>;

La función fetchData<T> es un envoltorio tipificado alrededor de fetch. El parámetro T determina la forma de la respuesta: al llamar fetchData<Product[]>, TypeScript sabe que el array devuelto contiene objetos Product. La clase StateManager<S> gestiona el estado de cualquier tipo — Partial<S> para actualizaciones parciales. Action<T, P> es una unión discriminada para acciones de Redux con estrechamiento automático de tipo en switch.

TypeScript en React Native

TypeScript en React Native proporciona tipificación estricta para props y estado de componentes. El CLI de React Native crea una plantilla con extensión .tsx y tsconfig.json. PropTypes (JS) se reemplazan por interfaces de TypeScript — la verificación se realiza en tiempo de compilación, no en runtime. styled-components y React Navigation tienen soporte completo de tipos.

Tipificación de componentes

React.FC<Props> es el tipo para un componente funcional con props. Los children se tipifican automáticamente. useRef<T> — referencia a un componente nativo. useState<S> — estado con inferencia de tipos. useNavigation<T> — navegación tipificada. useCallback, useMemo — con inferencia automática de tipos. Todos los hooks de React están completamente tipificados.

// Componente React Native tipificado
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 navegación y datos
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

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

// Componente funcional tipificado
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)}
    />
  );
};

El tipo RootStackParamList es un diccionario de rutas con sus parámetros. NavigationProp proporciona navegación tipificada: navigation.navigate('Profile', { userId }) verifica que Profile acepta userId. useCallback con parámetros tipificados previene renderizaciones innecesarias. FlatList se tipifica mediante genéricos: — data y renderItem reciben tipos automáticamente.

Herramientas del desarrollador TypeScript

Las herramientas de TypeScript incluyen el compilador tsc, tsconfig.json, soporte IDE en VS Code, ESLint con @typescript-eslint, Prettier y DefinitelyTyped (@types/*). tsc es el compilador que convierte .ts a .js. tsconfig.json configura: target (ES2020), module (ESNext), strict: true, outDir (carpeta de salida). sourceMap — depuración de TS en el navegador mediante mapas de código.

DefinitelyTyped es un repositorio de definiciones de tipos para bibliotecas sin tipos incorporados. Instalación: npm install @types/react @types/react-native --save-dev. Los archivos .d.ts son declaraciones de tipos. Las bibliotecas modernas (React, React Native, Angular) incluyen tipos incorporados y no requieren @types/. Para bibliotecas JS antiguas, DefinitelyTyped es la única fuente de tipos.

// tsconfig.json — configuración 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 // solo verificación, sin generación de JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

La opción strict: true activa todas las verificaciones de tipos — recomendada para todos los proyectos. jsx: 'react-native' conserva JSX sin transformación (React Native procesa JSX mediante Babel). moduleResolution: 'node' — resolución de módulos como en Node.js. esModuleInterop — compatibilidad con módulos CommonJS. noEmit: true — solo verificar sin generar archivos JS (Babel o Metro genera el JS).