18

Abstract

I'm trying to import ".js" file from an external location (i.e. node_modules) I'm trying to do this using commonjs module pattern, however import wouldn't want to work with ".js" file types until I add ".d.ts" file near ".js" file in the same folder.

But the problem is that I wouldn't want to affect any node_modules with my ".d.ts" files. I want it to be located in another folder, separate from node_modules but as soon as I do that, typescript compiler throws an error:

Example

I have the following folder structure:

|- DTS
|   |- y.d.ts
|- main.ts
|- y.js

y.js has the following content

module.export = function (x) {
    console.log(x);
};

y.d.ts has the following content

export interface Y {
    (x): any;
}
declare let y: Y;
export default y;

main.ts has the following content

import * as y from './y'

Now when I'm trying to compile main.ts with:

tsc -m commonjs -t ES2015 main.ts

I will get an error:

x.ts(1,20): error TS2307: Cannot find module './y'.

Question

How to import ".js" files and being able to define it's ".d.ts" declarations while having both files located in different locations.

Edit

Here is the link to example project. Be sure to use TypeScript version 2.0 compiler. And the tsc command above to see the error.

Improve this question
2
  • Have you tried including a line like the following at the top of main.ts? /// <reference path="./DTS/y.d.ts" /> Commented Jul 18, 2016 at 20:50
  • I did but it does not help with failing import which works only when I put d.ts file into same directory. But I don't want to do that, because such action will affect external module which I download through npm so is there another way to be able both import js file and specify d.ts file when they are located in different folders? Commented Jul 19, 2016 at 8:40

2 Answers 2

Reset to default
17

Note: The official recommendation for proving your type definitions takes a slightly different approach than what is presented below. I believe the approach below is slightly better as the *.d.ts file is practically identical to the final product.

During typechecking (build time) TypeScript works with *.ts files and (mostly) ignores *.js files. Let me offer an example that motivates what (I believe) you are proposing. Suppose there exists a perfectly good JavaScript library that sadly has no typings (e.g. N3). Which has been installed via npm, thus:

npm install n3 --save

This, as is typical, is added to ./node_modules/n3/... and project.json. As mentioned the typings does not exist and needs to be added manually. I create an ./@types/n3.d.ts file for this purpose. For our purposes it is not particularly important what the definitions actually are but something like the following is a good start:

declare namespace N3 {
}

declare module "n3" {
    export = N3;
}

Now to your question. Update the 'tsconfig.json':

...
"compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "@types"
    ],
...
"paths": {
  "*": [
    ...
    "./@types/*"
  ]

It will still be necessary to deal with the run-time resolution for locating the corresponding *.js files but that is a different question than the one you asked.

For reference you may find What is new in TypeScript and this discussion thread useful.

This approach works fine when working with global variables but not so much with modules.

Update the 'tsconfig.json':

...
"paths": {
  "*": [
    ...
    "./@types/*"
  ],
  "foo": [ "./@types/foo.d.ts" ]
  },
 ...
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

being able to define it's ".d.ts" declarations while having both files located in different locations.

import follows the same module resolution process when given a .js or .d.ts file with relative files.

Improve this answer

1 Comment

It actually doesn't do that, I've edited the question and provided the example project where you can see the problem yourself...

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.