
# Comenzando con TypeScript en 2024

TypeScript se ha convertido en el estándar de facto para el desarrollo JavaScript en 2024. Aquí tienes todo lo que necesitas saber para empezar.

## ¿Por qué TypeScript?

TypeScript ofrece varias ventajas sobre JavaScript puro:

- **Seguridad de tipos**: Detecta errores en tiempo de compilación
- **Mejor soporte IDE**: Autocompletado mejorado y refactorización
- **Código autodocumentado**: Los tipos sirven como documentación
- **Refactorización más fácil**: Cambios de código con confianza

## Configurando TypeScript

Primero, instala TypeScript globalmente:

```bash
npm install -g typescript
```

Crea un nuevo proyecto:

```bash
mkdir my-typescript-project
cd my-typescript-project
npm init -y
tsc --init
```

## Tipos Básicos

Aquí están los tipos fundamentales de TypeScript:

```typescript
// Tipos primitivos
let nombre: string = "Angel"
let edad: number = 30
let activo: boolean = true

// Arrays
let numeros: number[] = [1, 2, 3]
let nombres: Array<string> = ["Angel", "Maria"]

// Objetos
interface Usuario {
  id: number
  nombre: string
  email?: string // Propiedad opcional
}

const usuario: Usuario = {
  id: 1,
  nombre: "Angel Batlles"
}
```

## Funciones

TypeScript hace las funciones mucho más predecibles:

```typescript
function saludar(nombre: string): string {
  return `¡Hola, ${nombre}!`
}

// Funciones flecha
const sumar = (a: number, b: number): number => a + b

// Parámetros opcionales
function construirMensaje(nombre: string, edad?: number): string {
  if (edad) {
    return `${nombre} tiene ${edad} años`
  }
  return `Hola, ${nombre}`
}
```

## Interfaces vs Types

Ambos sirven propósitos similares pero tienen diferencias sutiles:

```typescript
// Interface
interface RespuestaApi {
  datos: any[]
  estado: number
  mensaje: string
}

// Type alias
type Estado = "cargando" | "éxito" | "error"

type UsuarioConEstado = Usuario & {
  estado: Estado
}
```

## Tipos Genéricos

Los genéricos te permiten escribir código reutilizable:

```typescript
function identidad<T>(arg: T): T {
  return arg
}

// Uso
const resultadoString = identidad<string>("hola")
const resultadoNumero = identidad<number>(42)

// Interfaces genéricas
interface Repositorio<T> {
  crear(item: T): Promise<T>
  buscarPorId(id: string): Promise<T | null>
  actualizar(id: string, actualizaciones: Partial<T>): Promise<T>
  eliminar(id: string): Promise<void>
}
```

## Mejores Prácticas

1. **Usa modo estricto**: Habilita verificaciones estrictas en `tsconfig.json`
2. **Evita `any`**: Usa tipos específicos o `unknown` en su lugar
3. **Aprovecha la inferencia de tipos**: No sobre-anotes
4. **Usa tipos utilitarios**: `Partial<T>`, `Required<T>`, `Pick<T, K>`

## Conclusión

TypeScript es una inversión en calidad de código y experiencia del desarrollador. Empieza pequeño, añade tipos gradualmente y disfruta de los beneficios de código más seguro y mantenible.

¡Feliz programación! 🚀

Comenzando con TypeScript en 2024


# Construyendo Apps Web Responsivas con Next.js 15

Next.js 15 ha llegado con mejoras significativas en rendimiento, experiencia del desarrollador y nuevas características que hacen que construir aplicaciones web modernas sea aún mejor.

## Qué hay de nuevo en Next.js 15

### Turbopack (Estable)
Turbopack ahora es estable y proporciona hasta 53% más rápido en iteración local y 94% más rápido en builds iniciales comparado con Webpack.

### Soporte para React 19
Soporte completo para características de React 19 incluyendo:
- Server Components
- Características concurrentes
- Nuevos hooks como `use()`

### Caché Mejorado
Mejores estrategias de cache con control más granular sobre la invalidación de cache.

## Configurando Next.js 15

Crea un nuevo proyecto de Next.js 15:

```bash
npx create-next-app@latest mi-app
cd mi-app
npm run dev
```

### Opciones de Configuración Clave

Actualiza tu `next.config.js`:

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
    ],
  },
}

module.exports = nextConfig
```

## Construyendo Componentes Responsivos

### Usando CSS Grid y Flexbox

```jsx
// components/Layout.jsx
import styles from './Layout.module.css'

export default function Layout({ children }) {
  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <nav className={styles.nav}>
          {/* Elementos de navegación */}
        </nav>
      </header>
      <main className={styles.main}>
        {children}
      </main>
      <footer className={styles.footer}>
        {/* Contenido del footer */}
      </footer>
    </div>
  )
}
```

```css
/* Layout.module.css */
.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.header {
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main {
  padding: 2rem 0;
}

.footer {
  padding: 1rem 0;
  border-top: 1px solid #eee;
  text-align: center;
}

@media (max-width: 768px) {
  .container {
    padding: 0 0.5rem;
  }
  
  .nav {
    flex-direction: column;
    gap: 1rem;
  }
}
```

### Server Components para Mejor Rendimiento

```jsx
// app/blog/page.jsx (App Router)
import { getPosts } from '@/lib/posts'
import PostCard from '@/components/PostCard'

export default async function BlogPage() {
  const posts = await getPosts()
  
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  )
}
```

## Imágenes Optimizadas y Rendimiento

```jsx
import Image from 'next/image'

export default function Hero() {
  return (
    <section className="relative h-screen">
      <Image
        src="/hero-bg.jpg"
        alt="Fondo del hero"
        fill
        style={{ objectFit: 'cover' }}
        priority
        sizes="100vw"
      />
      <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
        <h1 className="text-4xl md:text-6xl text-white font-bold text-center">
          Bienvenido a Nuestro Sitio
        </h1>
      </div>
    </section>
  )
}
```

## Rutas Dinámicas y API Routes

```jsx
// app/blog/[slug]/page.jsx
import { getPost } from '@/lib/posts'
import { notFound } from 'next/navigation'

export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map(post => ({
    slug: post.slug
  }))
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug)
  
  if (!post) {
    notFound()
  }
  
  return (
    <article className="max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-4">{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}
```

## Mejores Prácticas para Next.js 15

1. **Usa Server Components por defecto**: Solo usa Client Components cuando sea necesario
2. **Implementa Incremental Static Regeneration**: Para contenido dinámico que no cambia frecuentemente
3. **Optimiza imágenes**: Siempre usa el componente Image de Next.js
4. **Implementa error boundaries apropiados**: Maneja errores con gracia
5. **Usa TypeScript**: Mejor experiencia de desarrollo y seguridad de tipos

## Consideraciones de Despliegue

### Despliegue en Vercel
```bash
npm install -g vercel
vercel
```

### Despliegue con Docker
```dockerfile
FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]
```

## Conclusión

Next.js 15 proporciona una excelente base para construir aplicaciones web modernas y responsivas. Con el rendimiento mejorado de Turbopack y el soporte para React 19, el desarrollo nunca ha sido más fluido.

La combinación de Server Components, imágenes optimizadas y cache inteligente hace de Next.js 15 una opción poderosa para cualquier proyecto web.

¡Empieza a construir hoy! 🚀