TUTORIAL EXPRESS TYPESCRIPT FULL – STUDI KASUS REST API

Typescript is a powerful language for building web applications. In this tutorial, we will be using Express.js to build a REST API using Typescript. This tutorial will cover the basics of setting up an Express server with Typescript and building a simple REST API for a fictional online store.

Setting up the environment

Before we start building our REST API, we need to set up our development environment. First, make sure you have Node.js installed on your machine. You can download Node.js from their official website.

Once you have Node.js installed, you can use npm to install Typescript and Express.js. In your terminal, run the following commands:

      
        npm install -g typescript
        npm install express @types/express
      
    

Creating the project structure

Next, we need to create the project structure for our REST API. Create a new directory for your project and navigate to it in your terminal. Then, run the following command to initialize a new Typescript project:

      
        tsc --init
      
    

This will create a new tsconfig.json file in your project directory. Open this file and update the outDir property to "./dist" to specify the output directory for your Typescript files.

Building the Express server

Now that our project structure is set up, we can start building our Express server. Create a new file called app.ts in your project directory and add the following code:

      
        import express from 'express';

        const app = express();
        const port = 3000;

        app.get('/', (req, res) => {
          res.send('Hello, World!');
        });

        app.listen(port, () => {
          console.log(`Server is running on port ${port}`);
        });
      
    

This code sets up a basic Express server that listens on port 3000 and responds with “Hello, World!” when you make a GET request to the root endpoint.

Creating a REST API

Now, let’s add some routes to our Express server to create a simple REST API. Update your app.ts file with the following code:

      
        // ... (previous code)

        interface Product {
          id: number;
          name: string;
          price: number;
        }

        const products: Product[] = [
          { id: 1, name: 'Product 1', price: 10 },
          { id: 2, name: 'Product 2', price: 20 },
        ];

        app.get('/products', (req, res) => {
          res.json(products);
        });

        app.get('/products/:id', (req, res) => {
          const product = products.find((p) => p.id === +req.params.id);
          if (product) {
            res.json(product);
          } else {
            res.status(404).json({ message: 'Product not found' });
          }
        });

        // ... (previous code)
      
    

This code adds two new routes to the Express server for retrieving a list of products and retrieving a single product by its ID. The /products endpoint returns an array of products, while the /products/:id endpoint returns a specific product based on its ID.

Running the server

Finally, we can run our Express server. In your terminal, run the following command to compile your Typescript files to Javascript and start the server:

      
        tsc && node ./dist/app.js
      
    

Once the server is running, you can make requests to it using a tool like Postman or simply by opening your web browser and navigating to http://localhost:3000.

Congratulations! You have successfully built a simple REST API with Express and Typescript. From here, you can continue to expand your API with additional routes and functionality to suit your application’s needs.