I have a TS file, and I want to import the functionality of a JS library that is wrapped in an IIFE. The library currently exposes its functionality by setting properties on the window object. How can I import this library into TS? I've tried adding exports before each function, but I get the error file is not a module. Should I just bite the bullet and copy the code over manually?
To avoid the XY problem, I'm making a website, and both the front and back end have some common functionality that they need to perform. I'm looking into a serverless back end using TS. If that's an anti-pattern and I should do something else entirely, I'll accept that as an answer too.
I didn't find a particularly elegant way to do this, but I got the functionality I wanted by returning the specific functions I need from the anonymous function and exporting the results of the IIFE.
Like so:
JS Library (I added the export default and the return { ... })
export default (function () {
function foo() { ... }
function bar() { ... }
function baz() { ... }
...
// the library makes some functions available to the window
window['baz'] = baz
// I manually export the functions I need
return {
'foo': foo
'bar': bar
}
})()
TS file:
import lib from './library.js'
lib.bar()
I also had "esModuleInterop": true in my tsconfig.json file
I accomplished this by publishing and installing an NPM package that contains a custom definition for a library and then tweaking the tsconfig.json to allow it.
Create an index.d.ts file in the same directory as your IIFE library .js file
In index.d.ts, add the single line: declare var libname = require('libname');
For example:
declare var identikon_cljs = require('identikon_cljs');
Publish it as an npm organization or user scoped package: https://docs.npmjs.com/creating-and-publishing-scoped-public-packages
Install the package in your project (e.g. npm i #mpm/identikon --save)
Add or set the following compilerOptions as true to prevent a TypeScript complilation error stating "Initializers are not allowed in ambient contexts":
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true
}
}
Import the library in your component like so:
import '#mpm/identikon';
You may then access properties and methods of the library as though it was exported as a module. Here is an example of a directive I made:
import { Directive, ElementRef, Input, } from '#angular/core';
import '#mpm/identikon';
#Directive({
selector: '[identikon]'
})
export class Identikon {
#Input() width: number = 64;
#Input() height: number = 64;
#Input() set identikon(value: string) {
if (value) {
let id = 'identikon-' + value + '-' + new Date().getTime().toString();
this.el.nativeElement.setAttribute('id', id);
identikon_cljs.core.make_identikon('#' + id, this.width, this.height, value);
}
};
constructor(private el: ElementRef) { }
}
Then I could bind it with ease in an Ionic 2/3 project like so:
<ion-avatar [identikon]="user.avatar" [width]="32" [height]="32" item-end></ion-avatar>
I have a Namespacing.js with something like the following
(function(){
window.GlobalObject = {
foo : function() { console.log("bar"); }
}
})();
Then i have another MyScript.js
GlobalObject.newAttribute = { ... }
So i'm now bundling with webpack and i was tryng to use modules on this, but i couldnt manage to do so.
At Namespacing.js i added at the end:
export default GlobalObject;
Then i tryed to import it in MyScript.js
import GlobalObject from "Namespacing"
But then my webpack gets me an error
[14:58:44] GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: name (Kneat) (line: 1, col: 7, pos: 7)
Does any1 knows a good way of doing this export/import ?
To switch to import/export, you can't just add exports to your existing files, you need to change their structure (ever so slightly).
For instance, Namespacing.js would have either:
export const GlobalObject = {
foo : function() { console.log("bar"); }
};
...to export a named symbol GlobalObject. That would be imported like this:
import { GlobalObject } from './Namespacing.js';
(You could use an as clause if you wanted a different name locally in the importing module.)
Or you could export that object as the default export:
export default {
foo : function() { console.log("bar"); }
};
...and import it like this:
import GlobalObject from './Namespacing.js';
Note that in that case, you can use any name you want for GlobalObject in the module in which you're importing it (no need for as as clause).
Don't worry about the fact that it involves removing the IIFE; modules are inherently scoped, module code doesn't run at global scope.
For example, I have an AMD module in vanilla JS (not touched by tsc):
// Foo.js
define([], function() {
return class Foo {}
})
with accompanying declaration file:
// Foo.d.ts
declare class Foo {
// ...
}
export default Foo
then I have a typescript module:
// app.ts
import Foo from './Foo'
new Foo // Uncaught TypeError: Foo_1.default is not a constructor
When I compile my typescript module to AMD format with tsc and run it in my RequireJS environment, there's an error that default is undefined because typescript compiles to:
define("app", ["require", "exports", "Foo"], function (require, exports, Foo_1) {
"use strict";
console.log(Foo_1["default"]);
});
I don't want it to grab the default property. I want it to treat a default import like it is simply grabbing the returned value of my define module. Every single module in my project is a define() module, or a typescript module compiled to define() (AMD). I'd simply like to get that return object.
Is there a way to do (configure) this?
EDIT:
I know I can import * as Foo from './Foo', but that is sort of hacky, and it generates errors because the declared module doesn't have named exports. I would like a non-error way to do it, if possible.
EDIT: I learned I can just do
// app.ts
import Foo = require('./Foo')
new Foo // no error
to achieve the result. The only problem with that is it is not ES6-compatible. This means that if we tell typescript to leave ES6 import statements as-is, then other tools won't understand typescript-specific import/export statements. I need a way to use only official ES6 module syntax in a reasonable way.
I'm think that my solution might be to just do a post-tsc-compile transform step to convert default import access points.
Try
import * as Foo from './Foo'
I have this current folder structure:
project
└───typings
│ | index.d.ts
| FileToMakeTdFor.js
| FileToMakeTdFor-Tests.ts
where I have a JS file that I'm trying to make a Typescript Definition (d.ts) for.
The js file looks like this:
"use strict";
var FileToMakeTdFor = (function () {
function FileToMakeTdFor(config) {
...
}
FileToMakeTdFor.prototype.example = function () {
...
};
return CRMWebAPI;
}());
exports.FileToMakeTdFor = FileToMakeTdFor;
The index.d.ts file looks like this:
export interface FileToMakeTdFor {
new (config:any): FileToMakeTdFor;
example(): void;
}
And in my test file I'm attempting to write this:
let obj = new FileToMakeTdFor();
obj.example();
But I get an error on the constructor Cannot find name FileToMakeTdFor
How do I make the test ts file find the index.d.ts file? Is there a better way to setup this structure?
Special thanks to Dave Hillier's link. It lead me to the TypeScript Handbook for declaration files. Apparently I was just missing some export calls:
/*~ If this module is a UMD module that exposes a global variable 'CRMWebAPI' when
*~ loaded outside a module loader environment, declare that global here.
*~ Otherwise, delete this declaration.
*/
export as namespace FileToMakeTdFor;
/*~ This declaration specifies that the class constructor function
*~ is the exported object from the file
*/
export = FileToMakeTdFor;
export interface FileToMakeTdFor {
new (config:any): FileToMakeTdFor;
example(): void;
}
Once I added the export as namespace FileToMakeTdFor; and export = FileToMakeTdFor; lines, everything started working...
I am using TypeScript 1.6 with ES6 modules syntax.
My files are:
test.ts:
module App {
export class SomeClass {
getName(): string {
return 'name';
}
}
}
main.ts:
import App from './test';
var a = new App.SomeClass();
When I am trying to compile the main.ts file I get this error:
Error TS2306: File 'test.ts' is not a module.
How can I accomplish that?
Extended - to provide more details based on some comments
The error
Error TS2306: File 'test.ts' is not a module.
Comes from the fact described here http://exploringjs.com/es6/ch_modules.html
17. Modules
This chapter explains how the built-in modules work in ECMAScript 6.
17.1 Overview
In ECMAScript 6, modules are stored in files. There is exactly one
module per file and one file per module. You have two ways of
exporting things from a module. These two ways can be mixed, but it is
usually better to use them separately.
17.1.1 Multiple named exports
There can be multiple named exports:
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
...
17.1.2 Single default export
There can be a single default export. For example, a function:
//------ myFunc.js ------
export default function () { ··· } // no semicolon!
Based on the above we need the export, as a part of the test.js file. Let's adjust the content of it like this:
// test.js - exporting es6
export module App {
export class SomeClass {
getName(): string {
return 'name';
}
}
export class OtherClass {
getName(): string {
return 'name';
}
}
}
And now we can import it in these three ways:
import * as app1 from "./test";
import app2 = require("./test");
import {App} from "./test";
And we can consume imported stuff like this:
var a1: app1.App.SomeClass = new app1.App.SomeClass();
var a2: app1.App.OtherClass = new app1.App.OtherClass();
var b1: app2.App.SomeClass = new app2.App.SomeClass();
var b2: app2.App.OtherClass = new app2.App.OtherClass();
var c1: App.SomeClass = new App.SomeClass();
var c2: App.OtherClass = new App.OtherClass();
and call the method to see it in action:
console.log(a1.getName())
console.log(a2.getName())
console.log(b1.getName())
console.log(b2.getName())
console.log(c1.getName())
console.log(c2.getName())
Original part is trying to help to reduce the amount of complexity in usage of the namespace
Original part:
I would really strongly suggest to check this Q & A:
How do I use namespaces with TypeScript external modules?
Let me cite the first sentence:
Do not use "namespaces" in external modules.
Don't do this.
Seriously. Stop.
...
In this case, we just do not need module inside of test.ts. This could be the content of it adjusted test.ts:
export class SomeClass
{
getName(): string
{
return 'name';
}
}
Read more here
Export =
In the previous example, when we consumed each validator, each module only exported one value. In cases like this, it's cumbersome to work with these symbols through their qualified name when a single identifier would do just as well.
The export = syntax specifies a single object that is exported from the module. This can be a class, interface, module, function, or enum. When imported, the exported symbol is consumed directly and is not qualified by any name.
we can later consume it like this:
import App = require('./test');
var sc: App.SomeClass = new App.SomeClass();
sc.getName();
Read more here:
Optional Module Loading and Other Advanced Loading Scenarios
In some cases, you may want to only load a module under some conditions. In TypeScript, we can use the pattern shown below to implement this and other advanced loading scenarios to directly invoke the module loaders without losing type safety.
The compiler detects whether each module is used in the emitted JavaScript. For modules that are only used as part of the type system, no require calls are emitted. This culling of unused references is a good performance optimization, and also allows for optional loading of those modules.
The core idea of the pattern is that the import id = require('...') statement gives us access to the types exposed by the external module. The module loader is invoked (through require) dynamically, as shown in the if blocks below. This leverages the reference-culling optimization so that the module is only loaded when needed. For this pattern to work, it's important that the symbol defined via import is only used in type positions (i.e. never in a position that would be emitted into the JavaScript).
Above answers are correct. But just in case...
Got same error in VS Code. Had to re-save/recompile file that was throwing error.
How can I accomplish that?
Your example declares a TypeScript < 1.5 internal module, which is now called a namespace. The old module App {} syntax is now equivalent to namespace App {}. As a result, the following works:
// test.ts
export namespace App {
export class SomeClass {
getName(): string {
return 'name';
}
}
}
// main.ts
import { App } from './test';
var a = new App.SomeClass();
That being said...
Try to avoid exporting namespaces and instead export modules (which were previously called external modules). If needs be you can use a namespace on import with the namespace import pattern like this:
// test.ts
export class SomeClass {
getName(): string {
return 'name';
}
}
// main.ts
import * as App from './test'; // namespace import pattern
var a = new App.SomeClass();
In addition to A. Tim's answer there are times when even that doesn't work, so you need to:
Rewrite the import string, using the intellisense. Sometimes this fixes the issue
Restart VS Code
I had this issue and I had forgotten to export the Class.
In addition to Tim's answer, this issue occurred for me when I was splitting up a refactoring a file, splitting it up into their own files.
VSCode, for some reason, indented parts of my [class] code, which caused this issue. This was hard to notice at first, but after I realised the code was indented, I formatted the code and the issue disappeared.
for example, everything after the first line of the Class definition was auto-indented during the paste.
export class MyClass extends Something<string> {
public blah: string = null;
constructor() { ... }
}
Just in case this may works for you as it did form me, i had this files
//server.ts
class Server{
...
}
exports.Server = Server
//app.ts
import {Server} from './server.ts'
And this actually raised an error but i changed server.ts to
//server.ts
export class Server{
...
}
and it worked 😎👌
Note: i am using this config
"target": "esnext",
"module": "commonjs",
I faced the same issue in a module that has no exports. I used it for side-effects only. This is what the TypeScript docs say about importing side-effects modules:
Though not recommended practice, some modules set up some global state that can be used by other modules. These modules may not have any exports, or the consumer is not interested in any of their exports. To import these modules, use:
import "./my-module.js";
In that situation, you can fix the "File is not a module" error by simply exporting an empty object:
// side-effects stuff
export default {};
I faced the same issue ("File is not a module error") for import js in vue component
import handleClientLoad from "../../../public/js/calendar.js"
I do this and solve it
// #ts-ignore
import handleClientLoad from "../../../public/js/calendar.js"
The file needs to add Component from core hence add the following import to the top
import { Component } from '#angular/core';