12

I'm looking at moving over to Typescript and currently looking at doing this slowly if possible file by file.

Now the system I currently have is built with Webpack and I'm wanting to continue this for building my overall bundle.

I have a .d.ts file for the definition but I need my file to continue importing which currently is throwing an error.

/// <reference path="../../../../vendor/src/foo.d.ts" />
import foo = require('../../../../vendor/src/foo.js');

foo('something');

This currently is throwing errors I have also tried without the reference path and this seems to raise an error that it is not a module. Currently the only way I can have no errors raised is not importing and simply adding the reference but this will mean that webpack will not know the location of my file.

Any ideas I have searched quite a lot but I can't really make sense of importing JS files into Typescript.

Improve this question

2 Answers 2

Reset to default
7

Any ideas I have searched quite a lot but I can't really make sense of importing JS files into Typescript.

For webpack all you need is to declare the require function and do what you are already used to: 

var foo = require('../../../../vendor/src/foo');

The require function type definition is present here : https://github.com/TypeStrong/ts-loader#loading-other-resources-and-code-splitting

If you want to use foo in a stronger manner... recommend porting it over to .ts as well instead of struggling to build and then maintain a .d.ts file for it.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Ok that is what I have done but Typescript just throws a load of errors but I may have done something odd, I will give it another go like that again I am planning everything to be ported to .ts in the long run but I would rather do it gradually and not be forced to fight up the dependency tree as foo in some files could be one of 10 required files
I've just actually tried a quick attempt at that I now get Typescript complaining that foo is declared twice despite being only a definition file.
twice despite being only a definition file. Is the definition file a module? If not its going to the global namespace and causing duplicates : basarat.gitbooks.io/typescript/content/docs/project/…
1

What about simply rename foo.js to foo.ts (it may require some additional steps but often it works fine) and then rewrite your snippet to:

 /// <reference path="../../../../vendor/src/foo.d.ts" />

 foo('something');
Improve this answer

10 Comments

The problem with this is that the file is no longer being required / imported in. Meaning then something like Webpack isn't ever going to include it in unless I am perhaps missing something but the /// <reference> part is only ever used by TypeScript to define variables? Thanks
But if you change foo.js to foo.ts then webpack should include the file in the build process, shouldn't it? <reference> is used for statit type control and file dependency tree is also based on <reference> comments (the order of TS files is important).
I see I shall take a look thanks, I have installed typescript for Atom and doing stuff like that just simply raises a load of errors.
Can you paste a few of the error messages? To recapitulate, if you don't need import (i.e. you use your TypeScript app in browsers), then it is much easier to use your building tool (i.e. webpack; I use gulp-typescript and it even supports incremental builds) to process all the files and just add proper ///<reference>s in your TS files.
Sorry, I meant: var attachCss = require('../../../../vendor/Auxilium.js/src/attach-css');
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.