DEV Community: Luis Osorio

Fundamentos Iniciales

Luis Osorio — Wed, 23 Apr 2025 02:23:54 +0000

Modulos

Agrupa elementos relacionados: controladores, servicios, proveedores, etc. Todo proyecto empieza por el módulo raíz: AppModule.

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Componentes

Representa una vista (una parte visual de la aplicación).

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  title = 'Hola mundo';
}

Servicios

Los servicios contienen lógica de negocio o conexión con APIs. Se inyectan en los componentes.

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get('/api/users');
  }
}

Fundamentos iniciales

Luis Osorio — Tue, 22 Apr 2025 00:59:48 +0000

Modulos

Agrupa elementos relacionados: controladores, servicios, proveedores, etc. Todo proyecto empieza por el módulo raíz: AppModule.

import { Module } from '@nestjs/common';
import { UserModule } from './user/user.module';

@Module({
  imports: [UserModule],
})
export class AppModule {}

Controladores

Se encargan de recibir las solicitudes HTTP (GET, POST, etc.) y devolver respuestas.

import { Controller, Get, Post, Body } from '@nestjs/common';
import { UserService } from './user.service';

@Controller('users')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Get()
  findAll() {
    return this.userService.getAllUsers();
  }

  @Post()
  create(@Body() userData: any) {
    return this.userService.createUser(userData);
  }
}

Servicios

Contienen la lógica de negocio y se inyectan en los controladores u otros servicios.

import { Injectable } from '@nestjs/common';

@Injectable()
export class UserService {
  private users = [];

  getAllUsers() {
    return this.users;
  }

  createUser(user: any) {
    this.users.push(user);
    return user;
  }
}

Decorators - Decoradores

Luis Osorio — Sun, 20 Apr 2025 03:32:27 +0000

Los decoradores en TypeScript solo pueden aplicarse a elementos relacionados con clases.

No puedes decorar funciones sueltas o variables fuera de clases.

Puntos clave:

Son funciones que se ejecutan en tiempo de definición, no de ejecución.
El orden de ejecución importa. Si usas múltiples decoradores, se ejecutan de abajo hacia arriba.
Decoradores modernos (context) aún no están 100% estables.
Demasiados decoradores mal organizados pueden volver el código menos claro.

Función especial que se aplica con @.

function Log(constructor: Function) {
  console.log(`Clase decorada: ${constructor.name}`);
}

@Log
class App {
  constructor() {
    console.log("App iniciada");
  }
}

new App();

Esto nos mostrara en consola lo siguiente:

También podemos agregar decoradores a las propiedades de la clase

function ReadOnly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false,
    configurable: false
  });
}

class App {
  @ReadOnly
  version = "1.0.0";

  constructor() {
    console.log("App iniciada");
  }
}

const app = new App();
console.log(app.version);

app.version = "2.0.0"; // No cambia
console.log(app.version);

Si definimos decoradores personalizados, agregando parámetros, es necesario retornar un decorador para que interactúe con las ejecuciones de la clase

function Role(role: string) {
  return function (constructor: Function) {
    constructor.prototype.rol = role;
  };
}

@Role("admin")
class App {}

const app = new App() as any;
console.log(app.rol);

Algunos casos en donde utilizarlos:

Útil para debugging y trazabilidad
Validar antes de asignar un valor
Controlar qué método puede ejecutar cada rol
Usado por frameworks como Angular y NestJS
Evitar repetir cálculos costosos
Transformación automática de datos

Generics - Tipos dinámicos

Luis Osorio — Sat, 19 Apr 2025 02:50:23 +0000

Es una forma de decirle a TypeScript que un tipo puede ser dinámico, es decir, que no se conoce exactamente hasta que se usa. Nos permite escribir código reutilizable y flexible, sin perder la seguridad de tipos.

Ejemplo:

function wrapInArray<T>(element: T): T[] {
  return [element];
}

const numero = wrapInArray<number>(5); // number[]
const texto = wrapInArray<string>("hola"); // string[]

Donde T es el tipo dinamico.

También se pueden pasar varios tipos dinámicos

function combinar<T, U>(a: T, b: U): [T, U] {
  return [a, b];
}

const resultado = combinar<string, number>("edad", 25); // ["edad", 25]

Se pueden definir tipos por default 🥴

function obtenerElemento<T = string>(elemento: T): T {
  return elemento;
}

const porDefecto = obtenerElemento("hola"); // T es string
const personalizado = obtenerElemento<number>(5); // T es number

Si no le definimos su "tipado", lo infiere automáticamente.

function duplicar<T>(valor: T): [T, T] {
  return [valor, valor];
}

const res = duplicar(42); // Infiere que T es number

Utility Types - Tipos utilitarios

Luis Osorio — Fri, 18 Apr 2025 01:50:47 +0000

Son herramientas que ayudan a transformar tipos existentes. Muy útiles para reusar interfaces sin repetir código.

Partial<T> – todas opcionales

type User = {
  id: number;
  name: string;
  email: string;
};

function updateUser(id: number, data: Partial<User>) {
  console.log(`Se actualizo el usuario: ${id} con`, data);
}

updateUser(1, { name: "Luis" }); // ✅

Required<T> – todas obligatorias

type Config = {
  host?: string;
  port?: number;
};

function connect(cfg: Required<Config>) {
  console.log(`Conectando a ${cfg.host}:${cfg.port}`);
}

connect({ host: "localhost" }); // ❌ Error. falta una propiedad

Readonly<T> – propiedades inmutables

type User = {
  id: number;
  name: string;
};

const user: Readonly<User> = {
  id: 1,
  name: "Luis"
};

user.name = "Pepito"; // ❌ Error
console.log(user);

Pick<T, K> – selecciona claves específicas

type User = {
  id: number;
  name: string;
  email: string;
};

type PublicUser = Pick<User, "id" | "name">;

const user: PublicUser = {
  id: 1,
  name: "Luis"
  email: "test@gmail.com" // ❌ No permitido
};

console.log(user);

Omit<T, K> – omite claves específicas

type User = {
  id: number;
  name: string;
  password: string;
};

type SafeUser = Omit<User, "password">;

const user: SafeUser = {
  id: 1,
  name: "Luis"
  password: "test" // ❌ No permitido
};

console.log(user);

Otras utilidades

🔹 Record → { [key: string]: number }

Objeto con claves tipo string y valores tipo number

const scores: Record<string, number> = {
  alice: 10,
  bob: 15,
};

🔹 Exclude<"a" | "b", "a"> → "b"

Excluye "a" del conjunto

type Letters = Exclude<"a" | "b", "a">;
// Resultado: "b"

🔹 Extract<"a" | "b", "a" | "c"> → "a"

Extrae solo "a" porque está en ambos conjuntos

type Common = Extract<"a" | "b", "a" | "c">;
// Resultado: "a"

🔹 NonNullable → string

Elimina null y undefined

type Clean = NonNullable<string | null | undefined>;
// Resultado: string

🔹 ReturnType<() => number> → number

Tipo de retorno de una función

function getAge() {
  return 30;
}
type Age = ReturnType<typeof getAge>;
// Resultado: number

🔹 Parameters<(a: number, b: string) => void> → [a: number, b: string]

Tupla con los parámetros de la función

type Params = Parameters<(a: number, b: string) => void>;
// Resultado: [number, string]

🔹 ConstructorParameters → [number, number, number, number?, number?, number?, number?]

Parámetros del constructor de Date

type DateArgs = ConstructorParameters<typeof Date>;
// Resultado: los argumentos que acepta new Date(...)

🔹 InstanceType → Date

Tipo de instancia que retorna el constructor

type DateInstance = InstanceType<typeof Date>;
// Resultado: Date

🔹 ThisParameterType<(this: HTMLDivElement, e: MouseEvent) => void> → HTMLDivElement

Extrae el tipo de this de la función

function handleClick(this: HTMLDivElement, event: MouseEvent) {
  this.innerHTML = "Clicked!";
}
type ThisType = ThisParameterType<typeof handleClick>;
// Resultado: HTMLDivElement

🔹 OmitThisParameter<(this: HTMLDivElement, e: MouseEvent) => void> → (e: MouseEvent) => void

Elimina el this del tipo de función

type WithoutThis = OmitThisParameter<typeof handleClick>;
// Resultado: (e: MouseEvent) => void