Typescript: File '@types/office-js/index.d.ts' is not a module

[jozefizso]

TypeScript Version: 2.0.3

Code

Install office-js types definition:

npm install --save-dev @types/office-js

Try to use the Office object in app.ts:

import {Office} from 'office-js'; // [ts] File 'node_modules/@types/office-js/index.d.ts' is not a module.

export class App {
  constructor() {
    let doc = Office.context.document;
  }
}

TypeScript configuration in tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "moduleResolution": "node",
    "lib": ["es2015", "dom"],
    "typeRoots": [
      "node_modules/@types"
    ]
  }
}

Expected behavior:
TypeScript 2.0 should use the types definitions that are available from npm @types.

Actual behavior:
TypeScript reports error: File 'node_modules/@types/office-js/index.d.ts' is not a module.
TypeScript does not recognize the Office as valid object and does not provide intellisense.

[rameshsubramanian]

I have the same issue with node

File '../node_modules/@types/node/index.d.ts' is not a module.

[mhegazy]

I have the same issue with node

@rameshsubramanian there is no module called "node". you can not require("node").

[mhegazy]

@jozefizso the issue is the d.t.s file for office-js does not say it is a module, i.e. only a global. if you beleive this is wrong, then please send a PR to https://github.com/DefinitelyTyped/DefinitelyTyped/tree/types-2.0 to make it a module, you will need to add to the top:

export = Office; // make it a module
export as namespace Office; // keep a global namespace called Office

[jozefizso]

This will display error TS2305: Module 'node_modules/@types/office-js/index"' has no exported member 'Office'

TypeScript 2.0 should work with definitions from npm @types. Both of these technologies are managed and developed by Microsoft. Do you expect developers to fix every single version of types definitions? Because this is not the only one which cases issues for TypeScript 2

[mhegazy]

TypeScript 2.0 should work with definitions from npm @types. Both of these technologies are managed and developed by Microsoft. Do you expect developers to fix every single version of types definitions? Because this is not the only one which cases issues for TypeScript 2

it does work with @types. the contents of the declaration file is not something we control. these come form the community on https://github.com/DefinitelyTyped/DefinitelyTyped. If you see issues with this declaration file, you can file an issue on https://github.com/DefinitelyTyped/DefinitelyTyped or send a PR with a fix. once a fix has been made on https://github.com/DefinitelyTyped/DefinitelyTyped, a new @types package will be published automatically.

Looking more into it, i do not see any where in the docs that office-js can be used as a module.

[mhegazy]

@Zlatkovsky is the original contributor for this declaration file, he might have some insight.

[jozefizso]

It's a declaration file of office-js library, I don't expect it to be functional module. TypeScript should be able to get types definition from it and understand what imported Office object is. Yet it complains it is not a module - which is technically true - but what's the point of .d.ts then if they must be modules?

[mhegazy]

The declaration file does not say that there is a module called office-js. it just says there is a global variable called Office. using Office.select for instance is allowed, but import .. from "office-js" is not.

please see http://www.typescriptlang.org/docs/handbook/modules.html for more details about modules.

[Zlatkovsky]

Regarding Office.js: "Office" is a module, in the sense that you should be able to call "Office.context.document.getSelectedDataAsync", or "Excel.run(function() { ... })".

I have not used it with "import ..." syntax before, but let me see if someone on my team has. I'll get back to this thread when I find out more info.

[WrathOfZombies]

@jozefizso When you use an import syntax, Typescript is looking for a 'module' i.e. a commonjs, amd, systemjs or umd module, that is available in the node_modules folder as an npm package.

Office.js currently uses the module (aka. namespaces) system to add its contents as a Global window variable and hence the module loaders won't work with that, as the Office module isn't being exported. That being said, you could be clever and add a configuration in your require.js or system.js saying that 'office-js' is a npm package located @ weburl but due to the nature of how Office.js works, you wont be able to achieve the same.

Hence you can't exactly 'import' office-js.

For now, the best approach is to

1. install office.d.ts and use it either via a reference tag or use it via typings
2. add a script reference inside of your html to Office.js
3. once the typings are picked up, you'll be able to just type 'Office'.

The point of the office.d.ts is to allow developers to use OfficeJS with intellisense and make it easy to develop add-ins. That said we understand the fact that developers love to have 'modules' that are importable and we are looking into how to get Office.js there.

Let me know if that answers your questions else i'd be glad to clarify further.

[jozefizso]

I understand the Office.js library will create global window.Office variable. As it is not a module, it is very confusing that I have to use the /// <references /> syntax instead of import.

Can't TypeScript help me with a useful message that I should use the reference syntax (in fact, it is not needed at all) because I cannot import TypeScript definition file that does not contain a module?

[andrewconnell]

@jozefizso Did you figure a syntax that allowed you to use the office-js type def? Trying to use it within an Angular (ng4) application and have been baffled all day trying all sorts of options... but at a loss.

[riddla]

@andrewconnell: I had a similar problem getting the "Flickity" library to run in an Angular 2 project. I could get it to work as follows:

npm i -D @types/flickity

// custom-typings.d.ts
declare module 'flickity' { export = Flickity; }

// typed usage in component
import Flickity from 'flickity';

[neoncube2]

My apologies to anyone getting spammed with an email from this comment, but since it took me awhile to figure out how to do something like this, I thought I would share.

For me, running
npm install --save (or --save-dev, I'm not sure) @types/[type_package_name]

and then adding a line like
/// <reference types="@types/[type_package_name" />

seems to have worked :)

More information here on the /// <reference> tag.