Replicating the API Application with Typescript : Node Guide

Replicating the API Application with Typescript

Let's replicate the Node API app from previously created, so we can compare and contrast the two approaches.

Setting Up the Routes

Create a file src/routes/routes.ts and place the basic route from the initial example ie:

src/routes/routes.ts
 

  import express, { Request, Response, Router } from "express";

const router: Router = express.Router();

// GET /
router.get("/", (req: Request, res: Response) => {
res.send("Hello, World!");
});

export default router;

Here we have replaced require statement of the common Javascript with import using {....} to import the Request, Response and Router types from the express module.

This code is used in TypeScript to import the necessary modules and types from the express package. The import statement is a TypeScript-specific syntax for importing modules. In this case, it imports the default export from the "express" module and also the Request, Response, and Router types from the same module.

The require is part of 'CommonJS' supported by Node, whereas export is part of the ES6 / ES Modules standard.

Also, require compiles as runtime making static typing difficult.

In JavaScript this import would have been performed with these two lines:

src/routes/routes.ts

This code is used in JavaScript to import the "express" module using the require function. The require function is the common way to import modules in JavaScript (prior to the introduction of the ES modules syntax).

The require("express") statement returns the exported functionalities of the "express" module, which can then be used to create an Express application or router.

Amend src/index.ts to use this new router file:

src/index.ts
 

  import express from "express";
import routes from "./routes/routes";

const app = express();
// Mount the routes
app.use("/", routes);

// Start the server
app.listen(3000, () => {
  console.log("Server listening on port 3000");
});

Here again import replaces the require which is used more commonly in node.

Setting Up the Database

We will need to set up the environmental variables via the .env file, set up the connection to MongoDb, create a schema and set up routes and controllers.

Create the .env file as follows:

.env
 

  MONGO_HOST=127.0.0.1
MONGO_USERNAME=
MONGO_PASSWORD=
MONGO_PORT=27017
MONGO_DBNAME=myMoviesDb
MONGO_LOCAL=true

This is the same as in the earlier vanilla Node example.

Create the database connection file as src/db.ts:

src/db.ts
 

  import dotenv from "dotenv";
dotenv.config();
import mongoose from 'mongoose';

const {
MONGO_HOST,
MONGO_USERNAME,
MONGO_PASSWORD,
MONGO_PORT,
MONGO_DBNAME,
MONGO_LOCAL,
} = process.env;

let MONGO_URI = `mongodb+srv://${MONGO_USERNAME}:${MONGO_PASSWORD}@${MONGO_HOST}/${MONGO_DBNAME}?authSource=admin`;

if (MONGO_LOCAL === 'true') {
MONGO_URI = `mongodb://${MONGO_HOST}:${MONGO_PORT}/${MONGO_DBNAME}`;
}

console.info('MONGO_URI', MONGO_URI);

// Connect to the MongoDB database
mongoose.connect(MONGO_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  } as mongoose.ConnectOptions)
    .then(() => {
      console.log('Connected to MongoDB');
    })
    .catch((error) => {
      console.error('Failed to connect to MongoDB', error);
    });

Notice the above uses the mongoose modules, so ensure the dependencies is loaded with:

npm install mongoose

With the dotenv module that is used to read the environmental variables we will also need to import and use corresponding TypeScript typings which is done with:

npm install dotenv @types/dotenv

Import the database connection into the index.ts and set up the middleware for parsing JSON by adding:

SNIPPET: src/index.ts
 

  import "./db";
...
// Middleware for parsing JSON bodies
app.use(express.json());

Add a Schema

This file brings in three key concepts, interfaces, schemas and models.

SNIPPET: src/models/Films.ts
 
  import mongoose, { Document, Model, Schema } from "mongoose";

Begin by importing the mongoose dependencies. Specificially from the mongoose package the Document, Model, and Schema types are imported. These types are provided by Mongoose and are used to define the structure and behavior of MongoDB documents.

The Document interface is a built-in type in Mongoose that represents a MongoDB document. It provides various methods and properties for interacting with MongoDB documents.

For our application we want to extend this by adding our own properies for the film data. We can do that by creating an interface,that inherits all the properties and methods from Document.

In programming, an interface is a construct that defines a contract or a set of rules that a class or an object must adhere to. It describes the structure, behavior, and capabilities that an implementing class or object should possess.

In programming it is common practice to prefix an interface with an I as such we will create an interface of IFilm.

Add this code to the file:

SNIPPET: src/models/Films.ts
 

  interface IFilm extends Document {
  filmCertificate: string;
  filmTitle: string;
  filmDescription: string;
  filmImage: string;
  filmPrice: number;
  filmReview: number;
  releaseDate: Date;
}

The IFilm interface is defined using the interface keyword. This interface extends the Document type provided by Mongoose.
The IFilm interface defines the structure of a film document in the MongoDB collection.
It specifies the expected properties and their types, such as filmCertificate (string), filmTitle (string), filmDescription (string), filmImage (string), filmPrice (number), filmReview (number), and releaseDate (Date).

Next define the schema. This defines the structure and behavior of a film document in the MongoDB collection based on the properties defined in the IFilm interface.

SNIPPET: src/models/Films.ts
 

  const filmSchema: Schema<IFilm> = new mongoose.Schema(
  {
    filmCertificate: String,
    filmTitle: String,
    filmDescription: String,
    filmImage: String,
    filmPrice: Number,
    filmReview: Number,
    releaseDate: Date,
  },
  { collection: "filmsCollection" } // Specify the collection name
);

This is similar to our pre-typescript version but is stricter in intepretation. Previously we had:

... but now have:

The typescript version is stipulating that fileSchema is of type Schema<IFilm>, which is a Mongoose schema parameterized with the IFilm interface.

By parameterizing the Schema class with the IFilm interface, we establish a link between the type of the schema and the expected structure of the documents, ensuring consistency and type safety throughout the application.

Finally in this file we need to create and export the model and export the interface. We do this with:

SNIPPET: src/models/Films.ts
 

  export const Film: Model<IFilm> = mongoose.model<IFilm>("Film", filmSchema);
export { IFilm };

Again in the pre-typescript version we simply did:

With typescript we are been stricter in that we have:

This uses the IFilm interface, indicating that the Film model will handle documents that match the structure defined in IFilm.

Add the All Data Controller

Set up a controller at src/controllers/controllers.ts and add the following:

SNIPPET: src/controllers/controllers.ts
 

  import Film, { IFilm } from "../models/Film";

async function getAllData(): Promise<IFilm[] | { error: string }> {
try {
const films: IFilm[] = await Film.find();
console.dir(Film);
return films;
} catch (error) {
console.error("Error retrieving data:", error);
return { error: "Failed to retrieve data" };
}
}
export {
getAllData
};

Along with the use of the import already seen, the controller file uses TypeScript to be more explicit about the getAllData() function's return type

As the getAllData() function is asyncronous, it is defined with an explicit return type of Promise. This indicates that the function returns a promise that resolves to an array of IFilm objects or an object with an error property of type string.

Set Up the Route

With the controller set up amend the src/routes/routes.ts file with:

SNIPPET: src/routes/routes.ts
 

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

... ensuring you add import the controller with:

SNIPPET: src/routes/routes.ts
 
  import * as dataController from "../controllers/controllers";

You should now be able to test the first API endpoint of localhost:3000/api

Next: CRUDing with Typescript