是否可以使用网页包加载器从文件生成Typescript接口？

我试图创建一个网页包加载器，将包含API数据结构描述的文件转换为一组TypeScript接口

在我的具体案例中，该文件是JSON，但这最终应该是无关的——该文件只是描述web应用程序后端和前端之间交互的共享数据源。在下面我的MCVE中，您可以看到JSON文件包含一个空对象，用来强调文件的类型和内容对问题的重要性

我当前的尝试报告了两个错误（我假设第二个错误是由第一个错误引起的）：

[at loader]：子进程处理请求失败：错误：找不到文件：'/private/tmp/ts loader/example.api'。

./example.api中的

错误
模块生成失败：错误：最终加载程序未返回缓冲区或字符串

如何使用网页包加载程序生成TypeScript代码

package.json webpack.config.js my-own-loader.js 索引 example.api

---

我认识到还有其他代码生成技术。例如，我可以使用一些构建工具将JSON文件转换为TypeScript，并将其签入。我正在寻找一个更具活力的解决方案

---

my-own-loader.js不导出json，而是导出字符串

这是正确的，就像加载图像文件并不总是导出二进制数据，但有时会输出表示图像元数据的JavaScript数据结构一样

---

为什么需要从json文件定义typescript接口？这些接口是否用于typescript编译

---

对。我想导入一个描述API数据结构的文件，并自动生成相应的TypeScript接口。拥有共享文件允许前端和后端始终就将显示的数据达成一致。

如果您的API符合swagger规范，您可以使用npm包从中生成TypeScript文件：

招摇过市类型脚本代码生成器

用于为Angular（2及以上）生成TypeScript代码的节点模块 基于Swagger v2格式的Webapi元数据

基本上，你给它一个招摇过市的URL，它就会生成TypeScript。这些示例适用于Gulp，但它们应该很好地移植到WebPack：

var swagger = {
    url: 'http://petstore.swagger.io/v2/swagger.json',
    //url: 'http://127.0.0.1/ZIB.WebApi.v2/swagger/docs/v1',
    swaggerFile: folders.swaggerFolder + files.swaggerJson,
    swaggerFolder: folders.swaggerFolder,
    swaggerTSGeneratorOptions: {
        modelFolder: folders.srcWebapiFolder,
        enumTSFile: folders.srcWebapiFolder + 'enums.ts',
        enumLanguageFiles: [
            folders.srcLanguagesFolder + 'nl.json',
            folders.srcLanguagesFolder + 'en.json',
        ],
        modelModuleName: 'webapi.models',
        enumModuleName: 'webapi.enums',
        enumRef: './enums',
        namespacePrefixesToRemove: [
        ],
        typeNameSuffixesToRemove: [
        ]
    }
}

---

首先，提供MCVE的荣誉。这是一个非常有趣的问题。我使用的代码将这个答案组合在一起是基于所说的MCVE和

缺少文件？

这确实是一条毫无帮助的错误消息。文件显然位于该位置，但TypeScript将拒绝加载任何没有可接受扩展名的文件

此错误本质上隐藏了实错误，即

TS6054:文件“c:/path/to/project/example.api”的扩展名不受支持。唯一受支持的扩展是'.ts'、'.tsx'、'.d.ts'、'.js'、'.jsx'。

这可以通过侵入并手动添加文件来验证。它很难看，就像侦探工作经常做的那样（从v2.6.1中的第95141行开始）：

关于接口和DX的注意事项

接口被编译器擦除。这可以通过对以下内容运行

tsc

来证明

vs

为了提供良好的开发人员体验，您可能只需要在开发环境中将这些接口写入文件。您不需要为生产构建编写它们，也不需要（或想要）将它们签入版本控制

开发人员可能需要把它们写出来，这样他们的IDE就有东西可以投入了。您可以将

*.api.ts

添加到

.gitignore

，并将它们放在存储库之外，但我怀疑它们需要存在于开发人员的工作区中

---

例如，在我的示例repo中，新开发人员必须运行

npm install

（像往常一样）和

npm run build

（在本地环境中生成接口），以消除所有的红色扭曲。

我自己的加载程序。js

不导出json，而是导出字符串。你想实现什么？@Thaadikkaaran你对我如何改写我的第一句话有什么建议：“将JSON文件转换为一组TypeScript接口”？我认为这足以解释我的目标。我的具体示例是使用JSON文件定义前端和后端之间发送的对象的形状（也称为TypeScript

接口

）。为什么需要从JSON文件定义TypeScript接口？这些接口会用于typescript编译吗？通过快速阅读readme软件包，它似乎是一个超前的代码生成工具。正如我在问题中提到的，我已经知道我可以运行一个生成文件的命令，然后将其签入，但我正在寻找一个更动态的解决方案。我并不依赖于很棒的typescript loader，我主要只是使用它，因为它提供了一些潜在的加速（我甚至可能不需要）。您关于开发人员体验的观点很有趣——我想弄明白这一点的另一个原因是因为我使用了。生成.d.ts文件的。这意味着CI必须构建两次，允许第一次失败，也就是说，您最终使用了这种方法吗@Shepmaster@IcedDante我没有，主要是因为提到的DX问题。我正在寻找一种方法来减少我的一些减速带，而不仅仅是将它们从一个地方移动到另一个地方。最新的网页包和ts加载程序版本不再适用，它说：

错误[…]\ts生成加载程序\索引。tsx（1,42）TS2307:找不到模块“./example.api”或其相应的类型声明。

const path = require('path');

module.exports = {
  entry: './index.ts',
  output: {
    filename: 'output.js',
  },
  resolveLoader: {
    alias: {
      'my-own-loader': path.resolve(__dirname, "my-own-loader.js"),
    },
  },
  module: {
    rules: [
      {
        test: /\.api$/,
        exclude: /node_modules/,
        use: ["awesome-typescript-loader", "my-own-loader"],
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: "awesome-typescript-loader",
      },
    ]
  },
};

module.exports = function(source) {
  return `
interface DummyContent {
    name: string;
    age?: number;
}
`;
};

import * as foo from './example';

console.log(foo);

{}

var swagger = {
    url: 'http://petstore.swagger.io/v2/swagger.json',
    //url: 'http://127.0.0.1/ZIB.WebApi.v2/swagger/docs/v1',
    swaggerFile: folders.swaggerFolder + files.swaggerJson,
    swaggerFolder: folders.swaggerFolder,
    swaggerTSGeneratorOptions: {
        modelFolder: folders.srcWebapiFolder,
        enumTSFile: folders.srcWebapiFolder + 'enums.ts',
        enumLanguageFiles: [
            folders.srcLanguagesFolder + 'nl.json',
            folders.srcLanguagesFolder + 'en.json',
        ],
        modelModuleName: 'webapi.models',
        enumModuleName: 'webapi.enums',
        enumRef: './enums',
        namespacePrefixesToRemove: [
        ],
        typeNameSuffixesToRemove: [
        ]
    }
}

for (var _i = 0, rootFileNames_1 = rootFileNames; _i < rootFileNames_1.length; _i++) {
    var fileName = rootFileNames_1[_i];
    this.createEntry(fileName, ts.toPath(fileName, this.currentDirectory, getCanonicalFileName));
}
this.createEntry("c:/path/to/project/example.api", ts.toPath("c:/path/to/project/example.api", this.currentDirectory, getCanonicalFileName));

rules: [
  {
    test: /\.api$/,
    exclude: /node_modules/,
    use: [
      { loader: "ts-loader" },
      { loader: "my-own-loader" }
    ]
  },
  {
    test: /\.tsx?$/,
    exclude: /node_modules/,
    loader: "ts-loader",
    options: {
      appendTsSuffixTo: [/\.api$/]
    }
  }
]

interface DummyContent {
    name: string;
    age?: number;
}

interface DummyContent {
    name: string;
    age?: number;
}

class DummyClass {
    printMessage = () => {
        console.log("message");
    }
}

var dummy = new DummyClass();
dummy.printMessage();