TS1148 ~ How to “import” with --module: “none” and typescript 2.x

Question

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. To

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.