11

我使用swagger-codegen和-l typescript-angular生成 REST 消费者服务库的选项。生成的代码如下所示（DefaultApi.ts）：

namespace API.Client {
    'use strict';

    export class DefaultApi {
        protected basePath = 'http://localhost:7331/v1';
        public defaultHeaders : any = {};

        static $inject: string[] = ['$http', '$httpParamSerializer', 'basePath'];

        constructor(protected $http: ng.IHttpService, protected $httpParamSerializer?: (d: any) => any, basePath?: string) {
            if (basePath !== undefined) {
                this.basePath = basePath;
            }
        }

        private extendObj<T1,T2>(objA: T1, objB: T2) {
            for(let key in objB){
                if(objB.hasOwnProperty(key)){
                    objA[key] = objB[key];
                }
            }
            return <T1&T2>objA;
        }

        /**
         * Delete a person.
         * Deletes a specified individual and all of that person&#39;s connections. 
         * @param id The id of the person to delete
         */
        public deletePersonById (id: number, extraHttpRequestParams?: any ) : ng.IHttpPromise<{}> {/*...*/}

        /* etc... */
    }
}

如您所见，有一些具体的类需要使用，但在命名空间内声明，即不能import。API.Client.DefaultApi尽管缺少 an ，但我的编辑器（VSCode）在我引用时不会抱怨，import因为它会将定义作为我认为声明的命名空间的一部分。但是在运行时浏览器抱怨API没有定义。

我正在使用 webpack 来捆绑我的代码。我在 SO 上看到了其他一些类似于这个的问题，但那里的答案没有运气。

编辑：

根据要求，这是我的 ts 和 webpack 配置文件：

webpack 配置文件：

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    preLoaders: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'tslint'
      }
    ],

    loaders: [
      {
        test: /.json$/,
        loaders: [
          'json'
        ]
      },
      {
        test: /\.(css|less)$/,
        loaders: [
          'style',
          'css',
          'less',
          'postcss'
        ]
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loaders: [
          'ng-annotate',
          'ts'
        ]
      },
      {
        test: /.html$/,
        loaders: [
          'html'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    })
  ],
  postcss: () => [autoprefixer],
  debug: true,
  devtool: 'source-map',
  output: {
    path: path.join(process.cwd(), conf.paths.tmp),
    filename: 'index.js'
  },
  resolve: {
    modules: [
      path.resolve(__dirname, '../src/app'),
      path.resolve(__dirname, '../node_modules')
    ],
    extensions: [
      '',
      '.webpack.js',
      '.web.js',
      '.js',
      '.ts'
    ]
  },
  entry: `./${conf.path.src('index')}`,
  ts: {
    configFileName: '../tsconfig.json'
  },
  tslint: {
    configuration: require('../tslint.json')
  }
};

tsconfig.json：

{
  "compilerOptions": {
    "baseUrl": "src/app",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "module": "commonjs"
  },
  "compileOnSave": false,
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "!typings/**",
    "!node_modules/**"
  ]
}
4

2 回答 2

1

您有两种选择来解决这个问题，一种是简单的，另一种是复杂的：

  1. 更改生成的 ts 文件。

在生成的代码末尾添加以下代码：

export = API.Client;

现在，您可以import毫无问题地在您的模块中使用，例如：

import {DefaultApi} from './generated-code';
  1. 但是，如果更改生成的文件不是一个选项，请使用Salsa 编译器！

想法：

使用不同的 tsconfig 拆分模块化代码而不是模块化代码。混合模块化代码而不是模块化与 Salsa、webpack 解析别名和 javascript 支持。

教程：

TL;DR 这里是应用此解决方案的GitHub 存储库。

  1. 创建一个新的 tsconfig.generate.json 来生成代码句柄，只是生成的代码，例如：
{
   "compilerOptions": {
      "outFile": "module-generated-code.js"
   },
   "files": ["generated-code.ts"]
}
  1. 在您的初始 tsconfig.json 中，您必须排除生成的 ts 文件。这将确保没有不必要的代码，例如：
{
   "compilerOptions": {

   },
   "exclude": ["generated-code.ts"]
}
  1. 现在，洞中的王牌！您将添加一个api.js文件并在您的tsconfig.generate.json. 是的，它是一个 js 文件，Salsa 就是在这里开始行动的。为此，您必须allowJs在 tsconfig 中启用功能
{ 
   "compilerOptions": {
      "outFile": "module-generate-code.js", "allowJs": true
   },
   "files": ["generated-code.ts", "api.js"]
}

这些文件基本上是通过 commonjs 导出您生成的代码而无需触摸它。

/// <reference path="./namespacing-code.ts" />
// typescript compiler don't warning this because is Salsa!
module.exports = API.Client;

现在，请注意 tsconfig.generate.json和您的outFile财产。如果您测试编译器 ( tsc -p tsconfig.generate.json)，您会看到所有生成的文件都连接在 中module-generate-code.js，最后一行必须是这样的：

module.exports = API.Client;

就快完成了！

现在，您可以module-generate-code.js在自己的代码中使用import! 但是js文件怎么没有最好的定义，那你就在webpack.config和tsconfig.json里配置一个resolve.alias

{ //webpack.config
    resolve: {
      extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
      alias:{ 'api':'./module-generated-code.js'
    }
}

{ //tsconfig.json
    "compilerOptions": {
        "allowJs": true, //remember of enabling Salsa here too
        "baseUrl": ".",
        "paths": {
            "api":["api.js"] //it is just get type definitions from generated files
        }
     },

现在您可以使用您的生成代码而无需触摸它：import api from 'api';

有任何疑问，这里有一个使用这种方法的GitHub存储库。我希望我有所帮助

于 2017-01-06T01:34:54.283 回答
0

当前版本的 swagger-codegen TypeScript Angular 生成器没有将 DefaultApi 包装在命名空间中。

更新并重新生成。如果您有任何问题，请告诉我。

于 2017-01-05T18:32:52.443 回答