如何将构造的对象从 javascript 导入打字稿答案

【问题标题】：How do I import a constructed object from javascript into typescript如何将构造的对象从 javascript 导入打字稿
【发布时间】：2019-07-03 00:45:06
【问题描述】：

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

有用的JS.js

function usefulJS() {}

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

它有一个像这样的类型定义文件：

有用的JS/index.d.ts

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

它用于以下打字稿文件：

myTypescript.ts

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

const myObj = usefulJS.doAThing();

但我的打字稿文件中的 .doAThing() 下出现红色下划线，并显示以下消息：

“类型'typeof有用JS'上不存在属性'doAThing'。”

当我在函数调用上使用//@ts-ignore 运行代码时，它可以工作，所以它肯定是打字稿问题而不是javascript 问题。

我的导入有问题吗？我应该如何导入已经构建的对象，而不是对象的原型？

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

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

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

【问题讨论】：

从您的导入语句中删除花括号。
嗯。这对于我遗漏的一些细节是不可能的（我实际上是从一个包含有用JS.js 的更大的库中导入的）。我会添加那个细节

标签： javascript typescript import

【解决方案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"
        ]
    }
}

【讨论】：

感谢您提醒我有关 tsconfig 的信息。这次似乎不是问题，但在 tsconfig 最终出错之前，我遇到了一些奇怪的问题。

【解决方案2】：

通过更改库，我可以让它工作。

基本上，index.d.ts 文件并不表示helpfulJS.js 导出了一个值。不幸的是，我们不能指出它导出了 helpJS 的值，因为这会导致名称与类型重叠。所以helpedJS.js需要修改导出不同的变量名。

有用的JS.js

function usefulJS() {}

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

有用的JS/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）。

【讨论】：

【解决方案3】：

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

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

（usefulJS.doAThing() 以有用JS 作为对象调用其原型函数，更改为有用JS.doAThing() 作为调用其静态函数的类型，javascript 不关心差异。）

有用的JS.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;

有用的JS/index.d.ts

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

myTypescript.ts

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

const myObj = usefulJS.doAThing();

不幸的是，对于那些无法控制库的人来说仍然没有多大帮助，但至少我们不会对所有已经工作的 JavaScript 客户端造成爆炸性的更改，这些客户端只是为了让 typescript 客户端工作。

【讨论】：