前后端共享TS接口

Question

假设我有这个快速路由器文件：

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});

  };

}

如您所见，我正在尝试创建一个 ApiDoc 系统。 但它在前端也很有用，因此前端 TypeScript 可以知道将从 API 服务器反序列化哪些类型。

我的问题是 - 如何将后端代码中的类型导入 Angular5 或 Angular6 代码库？ 我知道这样做的唯一好方法是将 ApiDoc.Response 类型放在第三个 .d.ts 文件中，然后前端和后端都可以导入该文件。 当然，这样做的缺点是维护第三个文件，并将其与 API 路由文件正确匹配。

Answer 1

这样的事情是我唯一想到的，而不必使用第三个中间文件.d.ts文件：

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});

    };

  };
}

缺点是所有名称空间，因此必须命名太多。 但是，如果在此处放置路由和api-doc信息，但在其他地方放置控制器代码，则可以使这些路由器文件稀疏且干净。

因此，在另一个文件中（也许在您的前端代码中），您可以这样做：

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

export interface Bar extends MakePut.Response{

}

Answer 2

迟到总比不到好...

typesafe-api是一个专为此任务设计的库。

首先你定义你的 API 规范，然后它可以立即用于构建 API 客户端和 Express 处理程序，甚至在完全类型安全的 TS 中甚至错误处理和请求标头。

目的是创建一个可以使用编译器维护的 API。

有大量文档和示例项目可以帮助您入门。

完全公开......我是图书馆的创造者，希望你觉得它有用！