Sharing TS interface between back-end and front-end

Question

Say I have this express router file:

import * as express from 'express';
const router = express.Router();

export const register = v => {
   router.get('/', makeGetFoo(v));
   router.put('/', makePutFoo(v));
}

const makeGetFoo = v => {

  interface Response extends ApiDocResponse {  // <--- i want to share this interface with front-end codebase
    success: true
  }

  return (req,res,next) => {

     res.json(<Response>{success:true});

  };

}

As you can see I am trying to create an ApiDoc system. But it could also be useful on the front-end, so the front-end TypeScript can know what types will be de-serialized from the API server.

My question is - how can I import the types from the backend code into an Angular5 or Angular6 codebase? The only good way I know of doing this, is put the ApiDoc.Response types in a 3rd .d.ts file, and then the front-end and back-end can both import that file. The downside of this, of course, is maintaining that 3rd file, and matching it correctly to the API route file.

Answer 1

Something like this is the only I can think of doing it, without having to use a third intermediary file .d.ts file:

import * as express from 'express';
import {RequestHandler} from 'express';

const router = express.Router();

export const register = (v: any) => {
  router.get('/', MakeGet.makeGetFoo(v));
  router.put('/', MakePut.makePutFoo(v));
};

interface ApiDoc {
  success: boolean
}

export namespace MakeGet{

  export interface Response extends ApiDoc {  // <--- i want to share this interface with front-end codebase
    success: true
  }

  export const makeGetFoo = (v: any): RequestHandler => {

    return (req, res, next) => {

      res.json(<Response>{success: true});

    };

  };

}


export namespace MakePut {

  export interface Response extends ApiDoc {  // <--- i want to share this interface with front-end codebase
    success: true
  }

  export const makePutFoo = (v:any): RequestHandler => {

    return (req,res,next) => {

      res.json(<Response>{success:true});

    };

  };
}

The downside is all the namespaces and having to name things so much. However if you put your routes and api-doc info here, but put controller code elsewhere, you can keep these router files sparse and clean.

And so in another file (perhaps in your front-end code), you can this:

import {MakeGet, MakePut} from './foo'

export interface Bar extends MakePut.Response{

}

Answer 2

Better late than never...

typesafe-api is a library designed just for this task.

First you define your API spec, then this can be used in no time at all to build an API client and Express handlers and much more all in completely typesafe TS even down to error handling and request headers.

The aim is to create an API that you can use the compiler to maintain.

There are extensive docs and an example project to help get you started.

Full disclosure... I am the creator of the library, I hope you find it useful!