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

100
votes

I have defined these in my .html file:

<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: 

 var myTree = Tree.tree({})

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

I also tried compiling with --module amd and 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

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?

2
requirejstypescript
You do not have to write .d.ts files. See stackoverflow.com/questions/27273489/… for an example – xmojmr
interesting, that would still require me to declare objects though. I was under the impression that Typescript was completely compatible with javascript. I guess it makes sense from the Typescript point of view, it somehow needs to read the code and if it had no references well, it would be errors. – Blub

2 Answers

124
votes

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?

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

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 Tree that you will manage and don't care for much typesafety beyond the fact that it is there.

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.

Update

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

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

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

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

/// <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.

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

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.