Question

我正在使用一个像这样构造对象的javascript库：

usefulJS.js

function usefulJS() {}

usefulJS.protoype.doAThing = function() {
    //does a thing here, returns an object
};
module.exports = new usefulJS();

它具有如下的类型定义文件：

usefulJS / index.d.ts

export class usefulJS {
    public doAThing(): object;
}

它在以下打字稿文件中使用：

myTypescript.ts

import {randomOtherThing,usefulJS} from "library-that-includes-usefulJS";

const myObj = usefulJS.doAThing();

但是我的打字稿文件中的.doAThing（）下有一个红色下划线，并显示以下消息：

“属性'doofThings'上不存在属性'doAThing'。”

当我在函数调用上使用//@ts-ignore运行代码时，它可以正常工作，因此，这似乎绝对是打字稿问题，而不是JavaScript问题。

我的进口商品做错了吗？我应该如何导入已经构造的对象，而不是对象的原型？

还是库的类型定义有问题？

如果有帮助，则非打字稿节点中还有另一个使用此库的项目。其导入行如下所示：

const usefulJS = requre("library-that-includes-usefulJS").usefulJS;

Answer 1

只是一个猜测：TypeScript可能会从有用的JS.js而不是index.d.ts中找到usefulJS（您可以通过在VS Code中使用“转到定义”来检查情况是否如此）。如果是这种情况，TypeScript将无法识别有用的JS具有doAThing方法，因为它是通过原型分配的。您可以通过将其添加到tsconfig.json中来解决此问题：

"compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "library-that-includes-usefulJS": [
            "./usefulJS/index.d.ts"
        ]
    }
}

Answer 2

通过更改库，我可以使其工作。

基本上，index.d.ts文件并不表示helpfulJS.js导出值。不幸的是，我们不能指出它导出了有用的值，因为这将导致名称与类型重叠。因此，需要修改有用的JS.js，以导出其他变量名称。

usefulJS.js

function usefulJS() {}

usefulJS.protoype.doAThing = function() {
    //does a thing here, returns an object
};
let usefulJSObj = new usefulJS();
module.exports = usefulJSObj;

usefulJS / index.d.ts

export class usefulJS {
    public doAThing(): object;
}

export const usefulJSObj : usefulJS;

myTypescript.ts

import {randomOtherThing,usefulJSObj} from "library-that-includes-usefulJS";

const myObj = usefulJSObj.doAThing();

在这种情况下，我确实具有更改此库的能力，但我不愿意这样做，因为它会影响其他项目。

我仍然希望有一种无需更改库即可解决此问题的方法（或者可能仅更改类型文件，因为库的其他用户都是javascript）。

Answer 3

我找到了一种方法来更改可解决问题的库，而无需使任何现有的javascript客户端更改其代码。

基本上，通过更改库以导出具有静态函数的类型而不是具有对象函数的未命名对象，Typescript不再抱怨无法调用该方法，并且对库的javascript调用完全没有改变。

（使用usefulJS.doAThing（）作为对象调用其原型函数的usefulJS.doAThing（）更改为调用其静态函数的类型为usefulJS.doAThing（），而javascript并不关心它们之间的区别。）

usefulJS.js

class usefulJS() {

    static doAThing()  {
    //does a thing here, returns an object
    };
}
//Returns a type with a static method instead of a constructed object
module.exports = usefulJS;

usefulJS / index.d.ts

export class usefulJS {
    public static doAThing(): object;
}

myTypescript.ts

import {randomOtherThing,usefulJS} from "library-that-includes-usefulJS";

const myObj = usefulJS.doAThing();

不幸的是，对于那些无法控制库的人来说，Still仍然无济于事，但至少我们不会对所有已经使typescript客户端正常工作的javascript客户端产生爆炸性的变化。

如何将javascript中的构造对象导入打字稿

3 个答案: