I'm currently working on a project with some legacy javascript. The application does not include a module loader, it just puts everything as a global into the window object. Touching the legacy code and including a module loader is sadly not a viable option for me.

I want to use typescript for my own code. I set the typescript compiler-option

module : "none"

in my tsconfig.json and I only used namespaces to organize my own code. Worked well so far.

.. until now:

import * as Rx from 'rxjs';
..
Rx.Observable.from(['foo',bar']);
...
// Results in TypeScript-Error: 
//   TS1148:Cannot use imports, exports, or module augmentations when '--module' is 'none'. 

With the "module-none" option set, you can't use import statements in your typescript.
How can you include external libs with this typescript setup?
Is it even possible?

What I tried so far (to include Rx from the RxJs-Library)

///<reference path="../node_modules/rxjs/Rx.d.ts" />
..
Rx.Observable.from(['foo',bar']);
...
// Results in TypeScript-Error -> TS2304:Cannot find name 'Rx'. 

In this Related Question, Kirill Dmitrenko sugested using an reference-tag, didn´t work for me.

I ended up with this construct.

declare const Rx: any;

Works, but you loose type-checks and intellisense :(

I'm currently working on a project with some legacy javascript. The application does not include a module loader, it just puts everything as a global into the window object. Touching the legacy code and including a module loader is sadly not a viable option for me.

I want to use typescript for my own code. I set the typescript compiler-option

module : "none"

in my tsconfig.json and I only used namespaces to organize my own code. Worked well so far.

.. until now:

import * as Rx from 'rxjs';
..
Rx.Observable.from(['foo',bar']);
...
// Results in TypeScript-Error: 
//   TS1148:Cannot use imports, exports, or module augmentations when '--module' is 'none'. 

With the "module-none" option set, you can't use import statements in your typescript.
How can you include external libs with this typescript setup?
Is it even possible?

What I tried so far (to include Rx from the RxJs-Library)

///<reference path="../node_modules/rxjs/Rx.d.ts" />
..
Rx.Observable.from(['foo',bar']);
...
// Results in TypeScript-Error -> TS2304:Cannot find name 'Rx'. 

In this Related Question, Kirill Dmitrenko sugested using an reference-tag, didn´t work for me.

I ended up with this construct.

declare const Rx: any;

Works, but you loose type-checks and intellisense :(

• javascript
• typescript
• browser
• typescript2.0

4 Answers 4

Create a global declaration for Rx which is the type of the RxJS exports, like so:

import * as RxJS from "rxjs";

declare global {
    const Rx: typeof RxJS;
}

export {};

Save it to a file (e.g. global.d.ts) and then add that to the include array of tsconfig.json.

You need to export rxjs to the global namespace. There are two ways to do it, depends on the shape of rxjs.

If rxjs export only one thing, e.g. Rx.*, then you can do this:

// custom-typings/rxjs.d.ts
import * from 'rxjs'
export as namespace Rx

// tsconfig.json
{
  "include": [
    "custom-typings"
  ]
}

If it export more than one thing, then you need to do global augmentation:

// custom-typings/rxjs.d.ts
import * as Rx from 'rxjs'
declare global {
  type Rx = Rx
  ...
}

// same change to tsconfig.json

Here are some info on global augmentation. https://www.typescriptlang.org/docs/handbook/declaration-merging.html

I've got a little project (embedded in an existing SharePoint solution) where I am trying to setup the absolute minimal Typescript tooling. I've added the Typescript MSBuild Nuget package, which includes the compiler and allows compile on save (VS2015R3). I had to throw in a tsconfig.json because I wanted to enable decorators and add some other tweaks. I don't want a module loader though so I have module: none.

Using a lib folder where I manually copied and renamed module.d.ts files, and adding triple-slash reference directives in my ts file worked at first, but as soon as I added another file I got warnings about redeclaring globals (because both files have the same references). My solution was to just add another typescript file, move all my triple-slash references there, and replace them in my real Typescript files with one reference to my "base" file. I also threw some other shared code in there and everything works. (I could add the code if that helps, but it is fairly specific to what I'm doing)

It seems like you could setup your tsconfig to include this base file in all compiled outputs, but for my use case I just added the base file as another script in my HTML.

I've looked around, and there doesn't seem to be any help regarding this kind of setup. Seems a shame since this is a great way to introduce a team to Typescript without all the tool chain baggage.

That's not actually true that you can't import modules. You can do a few things to import modules in this scenario:

1. Target ES6 instead. With "target": "es6", you can leave "module": "none"` in place and your imports will work just fine.
2. Change "module": "none" to "module": "commonjs" and add "moduleResolution": "node" - this will provide a means to handle imports in ES5 syntax.