CRUDing API Application with Typescript : Node Guide

Adding CRUDing functionality with Typescript

Now we have the first route accessing data we will replicate the other CRUDing routes to illustrate how typescript differs from 'vanilla' Javascript.

Adding an ID Route

Add the following function to the controller.

SNIPPET: src/controller/controller.ts
 

  async function getDataById(id: string): Promise<IFilm | null | { error: string }> {
try {
const film: IFilm | null = await Film.findById(id);
return film;
} catch (error) {
console.error("Error retrieving data:", error);
return { error: "Failed to retrieve data" };
}
}

Here typescript is used to indicate function takes an id parameter of type string and returns a Promise that resolves to either an IFilm object, null, or an object with an error property.

Be sure to add the getDataById function to the exports:

SNIPPET: src/controller/controller.ts
 

  export {
getAllData,
getDataById,
};

Add the ID Route

In the route typescript file add the route as follows:

src/routes/routes.ts
 

  // GET /api/:id
router.get("/api/:id", async (req: Request, res: Response) => {
try {
const data = await dataController.getDataById(req.params.id);
res.json(data);
} catch (err) {
console.error(err);
res.status(500).json({ error: "Internal Server Error" });
}
});

Typescript is used to indicate the parameters req is of type Request object and res of type Response.

You will now be able to test the ID endpoint such as http://localhost:3000/api/645268083f37a8fd938b26a1

Adding the Insert Controller

Following the pattern estalished above return to the controller and add the createData function:

src/controller/controller.ts
 

  async function createData(data: Partial<IFilm>): Promise<IFilm | { error: string }> {
try {
const newDocument: IFilm = await Film.create(data);
console.log(newDocument);
return newDocument;
} catch (error) {
console.error("Error creating data:", error);
return { error: "Failed to create data" };
}
}

Here typescript is used to indicate function takes a partial of type <IFilm> as a parameter and returns a Promise that resolves to either an IFilm object, null, or an object with an error property.

TypeScript uses the concept of Partial to create a type that represents an object with all properties of a given type as optional. It allows for specifying incomplete objects or objects where some properties may be missing. This reflects the optional values set in the IFilm interface.

Be sure to add the createData function to the exports:

SNIPPET: src/controller/controller.ts
 

  export {
getAllData,
getDataById,
createData,
};

Add the Create Route

In the route typescript file add the POST route as follows:

src/routes/routes.ts
 

  // POST /api
router.post("/api", async (req: Request, res: Response) => {
try {
console.log(req.body);
const newData = await dataController.createData(req.body);
console.log(newData);
res.json(newData);
} catch (err) {
console.error(err);
res.status(500).json({ error: "Internal Server Error" });
}
});

Typescript is used to indicate the parameters req is of type Request object and res of type Response.

Adding the Update Controller

Next add the update controller:

src/controller/controller.ts
 

  async function updateData(
id: string,
data: Partial<IFilm>
): Promise<IFilm | null | { error: string }> {
try {
const updatedDocument: IFilm | null = await Film.findByIdAndUpdate(id, data, {
new: true,
});
return updatedDocument;
} catch (error) {
console.error("Error updating data:", error);
return { error: "Failed to update data" };
}
}

Here typescript is used to indicate function takes an id of type string and a partial of type <IFilm> as parameters and again returns a Promise.

Be sure to add the updateData function to the exports:

SNIPPET: src/controller/controller.ts
 

  export {
getAllData,
getDataById,
createData,
updateData,
};

Add the Update Route

In the route typescript file add the PUT route as follows:

src/routes/routes.ts
 

  // PUT /api/:id
router.put("/api/:id", async (req: Request, res: Response) => {
try {
const updatedData = await dataController.updateData(
req.params.id,
req.body
);
res.json(updatedData);
} catch (err) {
console.error(err);
res.status(500).json({ error: "Internal Server Error" });
}
});

Typescript is used to indicate the parameters req is of type Request object and res of type Response.

Adding the Delete Controller

Finally add the delete controller:

src/controller/controller.ts
 

  async function deleteData(id: string): Promise<IFilm | null | { error: string }> {
try {
const deletedDocument: IFilm | null = await Film.findByIdAndDelete(id);
return deletedDocument;
} catch (error) {
console.error("Error deleting data:", error);
return { error: "Failed to delete data" };
}
}

Here typescript is used to indicate function takes an id of type string as parameters to identify the document to delete, and again returns a Promise.

Be sure to add the deleteData function to the exports:

SNIPPET: src/controller/controller.ts
 

  export {
getAllData,
getDataById,
createData,
updateData,
deleteData,
};

Add the Delete Route

In the route typescript file add the DELETE route as follows:

src/routes/routes.ts
 

  // DELETE /api/:id
router.delete("/api/:id", async (req: Request, res: Response) => {
try {
const deletedData = await dataController.deleteData(req.params.id);
res.json(deletedData);
} catch (err) {
console.error(err);
res.status(500).json({ error: "Internal Server Error" });
}
});

Typescript is used to indicate the parameters req is of type Request object and res of type Response.

Next: Web Views with EJS