Implementaremos un pequeño programa básico que realice operaciones CRUD en un conjunto de usuarios. Este proyecto tocará varios conceptos importantes de TypeScript como enums, interfaces, clases, entre otros.
Recuerda que necesitas tener Node.js instalado. Puedes descargarlo desde el sitio web oficial de Node.js.
Configurando nuestro entorno de trabajo
Haciendo empleo de la terminal y un editor de código (utilizaremos Visual Studio Code) realizaremos las configuraciones básicas para poder ejecutar de manera sencilla nuestro código en TypeScript:
- Crea una carpeta para el proyecto
- Abre la carpeta del proyecto en tu editor de código de preferencia. En esta ocasión usaremos Visual Studio Code y para abrirlo usando la consola, nos ubicamos en la ruta de la carpeta y ejecutamos lo siguiente:
code .
- Generaremos 2 archivos con los nombres
.editorconfig
y .gitignore
dentro de la carpeta de nuestro proyecto
- Para autogenerar el código necesario en el archivo
.gitignore
nos dirigiremos a la web gitignore.io. Como parámetros colocamos Windows, macOS, Node y Linux. Luego damos en el botón “Crear” o “Create” para generar el código.
- El código generado por esta página web lo copiaremos y lo pegaremos en nuestro archivo
.gitignore
- En el archivo
.editorconfig
pega la siguiente configuración:
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false>
- Ahora, empecemos con la configuración básica de Node. Ejecutamos lo siguiente en la ruta raíz de nuestra carpeta:
npm init -y
- Instalemos TypeScript:
npm i typescript
- Generemos la configuración básica para TypeScript en nuestro proyecto:
npx tsc
- Instalaremos la librería
ts-node
para ejecutar TypeScript directamente en Node:
npm install -D ts-node
- En la ruta raíz del proyecto, crea un archivo
main.ts
. Este archivo tendrá la lógica de nuestro CRUD
- Para ejecutar el proyecto, una vez implementado, ejecutamos el siguiente comando para probarlo en la consola:
npx ts-node main.ts
Proyecto CRUD de usuarios
Ahora sí, codifiquemos paso a paso este proyecto:
- Nuestros usuarios pueden tener los siguientes roles, los cuales los definiremos con un
enum
:
enum UserRole {
Admin = 'ADMIN',
User = 'USER'
}
- Definimos qué estructura debería tener un usuario, para ello usaremos una interfaz:
interface User {
id: number;
name: string;
email: string;
role: UserRole;
phoneNumber?: string;
}
- Implementamos la clase que tendrá la funcionalidad CRUD y de la cual crearemos nuevos usuarios:
class UserCRUD {
private users: User[] = [];
createUser(id: number, name: string, email: string, role: UserRole, phoneNumber?: string): User {
const newUser: User = { id, name, email, role, phoneNumber };
this.users.push(newUser);
return newUser;
}
getUser(id: number): User | undefined {
return this.users.find(user => user.id === id);
}
updateUser(id: number, fieldsToUpdate: Partial): User | 'Usuario no encontrado' {
const user = this.users.find(user => user.id === id);
if (!user) return 'Usuario no encontrado';
Object.assign(user, fieldsToUpdate);
return user;
}
deleteUser(id: number): 'Usuario eliminado' | 'Usuario no encontrado' {
const index = this.users.findIndex(user => user.id === id);
if (index === -1) return 'Usuario no encontrado';
this.users.splice(index, 1);
return 'Usuario eliminado';
}
}
- Finalmente, podemos hacer uso de nuestra clase
UserCRUD
:
const userCRUD = new UserCRUD();
console.log("Usuario Creado:\n",userCRUD.createUser(1, 'Javier Paz', '[email protected]', UserRole.Admin, '333-111-888'));
console.log("Usuario Obtenido:\n",userCRUD.getUser(1));
console.log("Usuario Actualizado:\n",userCRUD.updateUser(1, { name: 'Elena Díaz' }));
console.log(userCRUD.deleteUser(1));
El código final sería el siguiente:
enum UserRole {
Admin = 'ADMIN',
User = 'USER'
}
interface User {
id: number;
name: string;
email: string;
role: UserRole;
phoneNumber?: string;
}
class UserCRUD {
private users: User[] = [];
createUser(id: number, name: string, email: string, role: UserRole, phoneNumber?: string): User {
const newUser: User = { id, name, email, role, phoneNumber };
this.users.push(newUser);
return newUser;
}
getUser(id: number): User | undefined {
return this.users.find(user => user.id === id);
}
updateUser(id: number, fieldsToUpdate: Partial): User | 'Usuario no encontrado' {
const user = this.users.find(user => user.id === id);
if (!user) return 'Usuario no encontrado';
Object.assign(user, fieldsToUpdate);
return user;
}
deleteUser(id: number): 'Usuario eliminado' | 'Usuario no encontrado' {
const index = this.users.findIndex(user => user.id === id);
if (index === -1) return 'Usuario no encontrado';
this.users.splice(index, 1);
return 'Usuario eliminado';
}
}
const userCRUD = new UserCRUD();
console.log("Usuario Creado:\n",userCRUD.createUser(1, 'Javier Paz', '[email protected]', UserRole.Admin, '333-111-888'));
console.log("Usuario Obtenido:\n",userCRUD.getUser(1));
console.log("Usuario Actualizado:\n",userCRUD.updateUser(1, { name: 'Elena Díaz' }));
console.log(userCRUD.deleteUser(1));
Contribución creada por: Martín Álvarez (Platzi Contributor).
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?