介绍
Neutrino-middleware-ts-loader 是一个用于运行时转换 TypeScript 代码的 Neutrino 中间件。它支持使用 Babel 编译 TypeScript，并对生成的代码进行缓存。使用这个中间件可以从后端编译 TypeScript 的过程中解放出时间，提高前端开发的效率。
安装
在项目中安装 neutrino-middleware-ts-loader：
npm i neutrino-middleware-ts-loader
同时，还需要安装 @babel/preset-typescript 、@babel/core 和 babel-loader 以支持 Babel 编译 TypeScript：
npm i @babel/preset-typescript @babel/core babel-loader
配置
在 package.json 中增加一个 neutrino 字段，添加 neutrino-middleware-ts-loader 中间件，以及 TypeScript 和 Babel 的配置：
-- -------------------- ---- -------
-
----------- -
------ -
-------------------------------
--
---------- -
----- -
------------------ -
--------- ---------
--------- ---------
------ --------
------------------- ------
-
--
-------- -
---------- -
--------------------------
-
-
-
-
-下面解释一下上述的字段：
use: 定义中间件的名称，这里是 neutrino-middleware-ts-loader。options.ts: TypeScript 编译的配置项。这里设置的是编译选项，如目标版本、模块格式、JSX 语法和模块解析方式。根据实际情况修改需要编译的选项，需要注意的是，设置的编译选项会添加到 tsconfig.json 中。options.babel: Babel 编译的配置项，这里设置的是 TypeScript 的预设，即 "@babel/preset-typescript"。你也可以添加其他的 Babel 的预设和插件。
最后，只需在项目的 .ts 代码中添加 babel-loader 断言，告诉 babel-loader 使用预设进行编译：
module.exports = (neutrino) => {
neutrino.config.module.rule('compile')
.test(/\.tsx?$/)
.use('babel')
.loader('babel-loader')
.options({ presets: ['@babel/preset-typescript'] });
};这样就完成了的 TypeScript 和 Babel 的配置。
示例代码
下面是针对 TypeScript 类型的示例代码。在这个示例中，我们定义了一个函数，sum，该函数用于计算两个数的和。首先，我们定义了一个 TypeScript 类型，该类型为一个接口，指定了两个属性，一个 a 和一个 b，都是数字类型。接着，我们定义了一个函数 sum，该函数接受两个参数，都是 Options 类型，并返回他们的和。
-- -------------------- ---- ------- -- ---- --------- ------- - -- ------- -- ------- - -- ---- -------- ------------ --------- ------ - ------ --------- - ---------- - -- -- ----- ------ - ----- -- -- -- - --- --------------------
总结
使用 neutrino-middleware-ts-loader 中间件可以从后端编译 TypeScript 的过程中解放出时间，提高前端开发的效率。在配置时，需要注意设置的编译选项会添加到 tsconfig.json 中。在代码中，需要添加断言，告诉 babel-loader 使用预设进行编译。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587b81e8991b448d5bd9