gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 21:57:31 25 4
gpt4 key购买 nike

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

我的目录结构是这样的

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

我的 index.html 文件是这样的

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

我的 bootstrap.js

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

我的测试.js

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

我的测试/index.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 modules (在 Node.js 中仍然不可用,没有标志,但被 TypeScript 使用,尽管 TypeScript 可以编译到所有 3 个模块系统)。

AMD 是异步的.. 这意味着,当您需要 某物时,该某物在可用时将在回调中提供。

示例:

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

另外两个是同步的

// 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 来指定使用哪个模块系统。

现在,当您导入 test 模块时,您再次使用 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));
});

关于typescript - 为 requirejs 模块创建 .d.ts 文件时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52239403/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com