typescript 如何在没有 .d.ts 的情况下使用打字稿中的外部非打字稿库?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27417107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-09 06:33:45  来源:igfitidea点击:

How use an external non-typescript library from typescript without .d.ts?

requirejstypescript

提问by Blub

I have defined these in my .html file:

我在我的 .html 文件中定义了这些:

<script type="text/javascript" src="bower_components/tree.js/tree.min.js"></script>
<script type="text/javascript" src="bower_components/q/q.js"></script>
<script type="text/javascript" src="test.js"></script>

Then in test.js:

然后在 test.js 中:

 var myTree = Tree.tree({})

But Typescript errors out saying: "Cannot find name 'Tree'"

但是打字稿错误说:“找不到名称‘树’”

I also tried compiling with --module amdand placing import Tree = require("model/tree");at the top of the test.js file, but it errors out again: Cannot find external module 'model/tree'.however clearly it should be a valid import, see here where it was defined: https://github.com/marmelab/tree.js/blob/master/src/main.js

我也尝试编译--module amd并放置import Tree = require("model/tree");在 test.js 文件的顶部,但它再次出错:Cannot find external module 'model/tree'.但显然它应该是一个有效的导入,请参阅此处定义它的位置:https: //github.com/marmelab/tree .js/blob/master/src/main.js

I do notwant to write .d.ts files for every single external javascript file I want to use, is that seriously what Typescript wants me to do?

不是想写.d.ts文件为每一个外部JavaScript文件,我想使用,是严重打字稿什么要我做什么?

回答by basarat

I do not want to write .d.ts files for every single external javascript file I want to use, is that seriously what Typescript wants me to do?

我不想为我想使用的每个外部 javascript 文件编写 .d.ts 文件,这真的是 Typescript 想让我做的吗?

No. The simplest / quickest solution is simply to tell it that there is some variable Treeout there. This is as simple as:

不。最简单/最快的解决方案就是告诉它存在一些变量Tree。这很简单:

declare var Tree:any; // Magic
var myTree = Tree.tree({})

TypeSafety is a sliding scale in TypeScript. In this case you are only telling the compiler that there is something called Treethat you will manage and don't care for much typesafety beyond the fact that it is there.

TypeSafety 是 TypeScript 中的一个滑动比例。在这种情况下,您只是告诉编译器有一个叫做Tree您将管理的东西,除了它在那里的事实之外,并不关心太多的类型安全。

More

更多的

IMHO: The line declare var Tree:any;is much simpler syntax than other JS veficiation tools would have you write to declare your usage of variables that are not present in your code.

恕我直言:declare var Tree:any;与其他 JS 验证工具相比,该行的语法要简单得多,您需要编写这些工具来声明对代码中不存在的变量的使用。

Update

更新

interface ITree {
    .. further methods and properties...
}

interface ITreeFactory {
    tree(input: { [key: string]: any }): Itree
};

declare var Tree: ITreeFactory; // magic...

回答by Anton

You may define 'require' yourself and use undocumented amd-dependency feature of TypeScript:

您可以自己定义“require”并使用 TypeScript 的未记录的 amd-dependency 特性:

/// <amd-dependency path="model/tree" />
declare var require:(moduleId:string) => any;
var Tree = require("model/tree");

'amd-dependency' directive will tell the compiler to include your module to "define" arguments in generated code: see a sample here.

'amd-dependency' 指令将告诉编译器将您的模块包含在生成的代码中以“定义”参数: 请参阅此处的示例

You may also check a very good articlewhich explains how to use TypeScript with RequireJS.

你也可以查看一篇很好的文章,它解释了如何在 RequireJS 中使用 TypeScript。

But note that without writing proper TypeScript definitions for your existing code you won't be provided with any type information, and so you won't get type safety checks, advanced code completion in tools and so on. So, your 'Tree' will actually be of type 'any', and actually will be a dynamic JS piece inside other TS code.

但请注意,如果没有为现有代码编写正确的 TypeScript 定义,您将不会获得任何类型信息,因此您将无法获得类型安全检查、工具中的高级代码完成等。因此,您的“树”实际上将是“任何”类型,并且实际上将是其他 TS 代码中的动态 JS 片段。