CODEWITHSUNDEEP
typescripttypescript-typings
ZoolWay
ZoolWay

Reputation: 5505

Refering / Importing classes from typings / other project

I have a SPA application in Visual Studio which is written in TypeScript (2.0) and using Aurelia. But my problems is not specific to Aurelia or VS.

Now I would like to write plugins for this application in another project. These plugins will have to refer/import classes/modules from the main application.

This basically works but the plugin project does not know about the classes/modules from the main application. Therefore although things compile and run correctly (thanks to JavaScript), the IDE (Visual Studio, VS Code or the NPM typescript compiler) complains Cannot find module 'abc' on any import. This also means there is no Intellisense or auto-complete support on those classes.

I have no created the declarations (*.d.ts) in the main project and created a build task to copy those to the plugin project. But still they get not recognized. How can I have the plugin project to recognize these classes coming from declaration files?

The main app has a class like core/events.ts. Its DTS might look like this:

export declare class Events {
    static MY_CONSTANT: string;
}

The plugin project has a plugin here: Plugins/PluginA/plugin-panel.ts. It likes to import Events from core/events.ts:

import { Events as e1 } from 'core/events';
import { Events as e2 } from 'typings/core/events';

The first line (e1) is like I would import Events in the main project and it actually works when the compiled javascript file is dropped into the application. But the compiler complains about it (semantic error).

The second line (e2) has no compiler warning but is incorrect in runtime.

The typings have been copied to Plugins/typings/, here Plugins/typings/core/events.d.ts. Only the Plugins folder contains TypeScript files, the rest of the project is C#. There is a tsconfig.json in the root folder which will be of interest I guess:

{
  "version": "2.0.0",
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": "./",
    "sourceMap": true,
    "target": "es6",
    "module": "amd",
    "declaration": false,
    "noImplicitAny": false,
    "noResolve": true,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "./Plugins/**/*.ts",
    "./Plugins/typings/**/*.d.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "atom": {
    "rewriteTsconfig": false
  }
}

I already tried to set rootDir to ./Plugins but that did not help either.

How can I set up the project that the import statement works the same in plugin development and deployed in the application?

Note: When I add a mapping for the import in the main application loader configuration (which is config.js for SystemJS I am using here, the line looks like this: "typings/core/events": "core/events",), the main application can work with the different import path. But that would require me to setup a mapping for every typescript file in the main project.

Upvotes: 0

Views: 1104

Answers (1)

ZoolWay
ZoolWay

Reputation: 5505

While researching for another import problem I found this question: Absolute module path resolution in TypeScript files in VSCode. Note that I am linking to the answer of Lekhnath.

Apparently TypeScript 2.0 has a new baseUrl compiler option which sets the resolve base paths for modules with relative path!

So I can resolve modules/classes from my typings by adding to my compilerOptions:

"baseUrl": "./Plugins/typings/"

This works in Visual Studio, the command line compiler and VS Code (note that VS Code needs a configuration setting to use the project local typescript compiler).

Upvotes: 1

Related Questions