Aurelia CLI + Typescript: Cannot find module error

问题:

I am trying to set up a basic Aurelia project following the video tutorial on Aurelia Homepage here. I think I have followed the exact steps given in the video (just changed ES6 to Typescript).

When I tried to run the app by executing au run --watch, it gave me this error:

ReferenceError: define is not defined
at Object.<anonymous> (/aurelia_project/tasks/build.js:1:63)

Investigating further, when I opened aurelia_project directory, I found that all the .ts files are filled with cannot find module errors. For example,

[ts] Cannot find module 'gulp'.
[ts] Cannot find module 'aurelia-cli'.

and so on..

Do I have to execute some additional step for typescript cli ot resolve these modules?

Here is the tsconfig.json if that helps:

{
  "compileOnSave": false,
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "amd",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "lib": ["es2015", "dom"]
  },
  "exclude": [
    "node_modules",
    "aurelia_project"
  ],
  "filesGlob": [
    "./src/**/*.ts",
    "./test/**/*.ts",
    "./typings/index.d.ts",
    "./custom_typings/**/*.d.ts"
  ],
  "atom": {
    "rewriteTsconfig": false
  }
}

回答1:

Delete all the *.js files inside aurelia_json/tasks. Then repeat au run --watch.

Why? You have mistakenly transpiled your aurelia_json/tasks TypeScript into JavaScript, which you do not want to do, because the Aurelia CLI uses gulp-typescript. Delete all the *.js files inside aurelia_json/tasks and you will be fine.

The problem is unrelated to type definitions. As Meirion Hughes commented, the TypeScript compiler works without them.

回答2:

There are a couple of options when using external libraries with TypeScript. One option is to import a definition (.d.ts) file for the given library. There are a number of ways you can do this. I personally prefer to use typings (npm i typings -g).

Once typings is installed globally you can run the following command:

typings search <LIBRARY_NAME>

This will give you a list of matches for your search. Pick the library you desire and which source to download it from. Most will come from dt (DefinitelyTyped). Then run the following command:

typings install <SOURCE>~<LIBRARY_NAME> --global

E.g.

typings install dt~react --global

The global flag tells typings to install the definition file into a global directory in your project (so the types are accessible everywhere).

Now TypeScript should stop complaining and not only that, you will have rich intellisense for all your external libraries (no more flicking back and forth between your browser and editor because you've forgot the api).

You can just find the definition file yourself (usually available from the DefinitelyTyped repository) and simply copy it into your project, if you really don't want to use typings for some reason.

The other option, which should really only be used if a definition file for the library doesn't exist, is to declare your own definition file somewhere in your project and put the following in the file:

declare module '<MODULE_NAME>' {
    let <LIBRARY_NAME>: any;
    export default <LIBRARY_NAME>;
}

This tells TypeScript that MODULE_NAME exists, so stop complaining, and it exports LIBRARY_NAME which is type any as default. Of course with this approach you will not get any intellisense with your library.

One final option of course would be to create the definition file yourself (if one doesn't exist) then contribute it to DefinitelyTyped. I'm sure that would be much appreciated :)

Hope that helps.