在为 requirejs 模块创建 .d.ts 文件时遇到问题



我有一个使用 requirejs 编写的模块,我需要在 Angular 4 中工作。 为了理解这个过程,我创建了一个简化的requirejs模块,并试图为它创建一个.d.ts文件,但是我在编译代码时遇到了问题。

我的目录结构看起来像

.
+--index.html
+--lib
|  +-require
|    +--require.js
|
+--js
|  +-bootstrap.ts
+-test.js
+-test
+-index.d.ts

我的索引.html文件看起来像这样

<html>
<body>
...
<script type="text/javascript" src="lib/require/require.js" data-main="js/bootstrap"></script>
</body>
</html>

我的引导.js

import test from 'test';
add(5,6);

我的测试.js

define(function(){
return {
add: function(x, y){
console.log(x + y);
return x+y;
}
};
});

我的测试/索引.d.ts

export function add(a:number, b:number):number;

当我尝试编译我的bootstrap.ts时,出现此错误

bootstrap.ts(2,18): error TS2307: Cannot find module 'test'.
bootstrap.ts(3,1): error TS2304: Cannot find name 'add'.

JavaScript 中有 3 种常见的模块系统类型:AMD(require.js(、Common.js(由 Node 使用(和 ES6 模块(在 Node.js 中仍然不可用,没有标志,但由 TypeScript 使用,即使 TypeScript 可以编译到所有 3 个模块系统(。

AMD是异步的......这意味着,当你require某些东西时,这个东西,如果可用,将在回调中提供。

例:

// AMD
require("x", (x) => { /* x is available here */ })

其他 2 个是同步

// CommonJS
var x = require("x")
// x is available here, synchronously (no callback)
// ES6 Modules
import x from "x"
// x is available here, synchronously (no callback)

在介绍之后,现在回到你的问题...

首先,您的test.d.ts有问题..如果test.js如下所示:

define(function(){
return {
add: function(x, y){
console.log(x + y);
return x+y;
}
};
});

比这个模块没有返回函数add,正如你假设的那样。它实际上返回一个包含函数 add 的对象。因此,此 JavaScript 文件的声明应该是这样的:

declare module "test" {
const math: {
add: (a:number, b:number) => number
}
export default math
}

请注意,我在此处创建test声明时完全忽略define函数。为什么?由于 TypeScript始终使用 ES6 模块,因此在语法上,但是,在编译时,您可以使用tsconfig.json中的compilerOptions.module来指定要使用的模块系统。

现在,当你importtest模块时,你再次使用 ES6 模块,并让 TypeScript 将其编译为 AMD,如果你愿意的话。

这是您的bootstrap文件的样子:

import test from "test"
console.log(test.add(3,4))

再一次,你的假设是错误的。如果要导入模块test,则不能无中生有地调用add。你必须打电话给test.add😄

现在,如果您使用amd作为 TypeScript 模块系统,则编译后的bootstrap文件将如下所示:

var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
define(["require", "exports", "test"], function (require, exports, test_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
test_1 = __importDefault(test_1);
console.log(test_1.default.add(3, 4));
});

最新更新