We Keep Coding

How to import a variable from a JavaScript file and use it in TypeScript?

I'm trying to make a userscript in TypeScript using Webpack and Hogan.js pre-compiled templates.
For it to work, I need to import a compiled file, carousel_inner.js. This file is auto-generated, so no modifications to it are allowed.
if (!!!templates) var templates = {};
templates["carousel_inner"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<a class=\"carousel-");t.b(t.v(t.f("class",c,p,0)));t.b("\" href=\"\" style=\"background-image: url(");t.b(t.v(t.f("background-image",c,p,0)));t.b(")\">\r");t.b("\n" + i);t.b(" <div>\r");t.b("\n" + i);t.b(" <h4>");t.b(t.v(t.f("h4",c,p,0)));t.b("</h4>\r");t.b("\n" + i);t.b(" <h5>");t.b(t.v(t.f("h5",c,p,0)));t.b("</h5>\r");t.b("\n" + i);t.b(" <p>");t.b(t.v(t.f("p",c,p,0)));t.b("</p>\r");t.b("\n" + i);t.b(" </div>\r");t.b("\n" + i);t.b("</a>");return t.fl(); },partials: {}, subs: { }});
I'm trying different strategies to import the templates variable and export it for usage elsewhere, but I always end up with a "templates is not defined" error.
Here's a failed attempt.
// index.ts
import "./js/carousel_inner";
export default templates;
// main.ts
import templates from "./templates";
console.log(`templates: ${templates}`);
The project is here.

Make a declaration type file.
carousel_inner.d.ts (.d.ts IS REQUIRED)
declare module "carousel_inner.js" {
interface types {
[index:string]:unknown;
}
/* OR */
type types = unknown;
/* OR */
const types:unknown;
export default types;
}
It will give types to a file that is being imported.
I use the following for importing sql files occasionally.
declare module "*.sql" {
const content: string;
export default content;
}
Just use the type you want instead of unknown.

Typescript ReconnectingWebSocket fails to call constructor

When I attempt to create a new ReconnectingWebSocket I get the following:
reconnecting_websocket_1.default is not a constructor
The typescript code is:
import ReconnectingWebSocket, { Options } from 'reconnecting-websocket';
export class RealtimeClient {
private reconnectingWebSocket: ReconnectingWebSocket
constructor(private url: string, private dispatch: IDispatcher) {}
public connect() {
const wsOptions: Options = {
minReconnectionDelay: 1000,
reconnectionDelayGrowFactor: 1.0,
connectionTimeout: 2000,
}
this.reconnectingWebSocket = new ReconnectingWebSocket(this.url, [], wsOptions)
this.reconnectingWebSocket.onmessage = this.onMessage
}
/* ... */
}
At runtime, the resulting javascript in chrome dev tools shows that reconnecting_websocket_1 is the ReconnectingWebSocket class as expected, however default is undefined, which I believe is the root cause of the failure.
this.reconnectingWebSocket = new reconnecting_websocket_1.default(this.url, [], wsOptions);
this.reconnectingWebSocket.onmessage = this.onMessage;
NB:
I am compiling to ES5 javascript (via tsconfig.json target).
I have a non-dev dependency on reconnecting-websocket
"reconnecting-websocket": "^4.0.0-rc5"

Add compiler option esModuleInterop to your tsconfig.json.
You might also want to look at socket.io-client, which is slightly bigger, but not abandoned 3 years ago.

Static readonly member assignation => TypeError: XXX is not a constructor

I'm facing an issue with Typescript/Jest with static readonly member. Here a basic example.
The project structure is based on this starter project : https://github.com/alexjoverm/typescript-library-starter if it can help to reproduce issue.
point.ts
import {PointUtil} from "./pointUtil";
export class Point
{
public x: number;
public y: number;
public constructor(x: number, y: number)
{
this.x = x;
this.y = y;
}
public dummyCalc() : number
{
return this.x + this.y + PointUtil.origin.x + PointUtil.origin.y;
}
}
pointutil.ts
import {Point} from "./point";
export class PointUtil {
public static readonly origin: Point = new Point(12, 2);
}
repl.test.ts
import {Point} from "../src/point";
describe("REPL test", () => {
it("dummy test", () => {
expect(new Point(1, 1).dummyCalc()).toEqual(16)
});
});
Error
When run the test suite I'm getting
● Test suite failed to run
TypeError: _point.Point is not a constructor
3 | export class PointUtil {
4 | public static readonly origin: Point = new Point(12, 2);
> 5 | }
6 |
at src/pointUtil.ts:5:24
at Object.<anonymous> (src/pointUtil.ts:7:2)
at Object.<anonymous> (src/point.ts:1:4237)
at Object.<anonymous> (test/repl.test.ts:1:1181)
What does this error mean?
Typescript version is 2.7.2
jest 22.0.2
ts-jest 22.0.0

The error is easier to understand if you add a console log to pointutil.ts:
import {Point} from "./point";
console.log('Point:', Point);
export class PointUtil {
public static readonly origin: Point = new Point(12, 2);
}
This shows that Point is undefined (which is not a constructor :-) The reason this happens is that point.ts and pointUtil.ts import each other and create a circular module dependency. It is not related to the test, as the error would be triggered by any module that imports point.ts.
When module point.ts is evaluated, and it triggers the evaluation of pointUtil.ts, the value of the imported Point in pointUtil.ts will be undefined until the evaluation of the point.ts module has finished. However, since the definition of the static origin property amounts to doing
PointUtil.origin = new Point(12, 2);
it means that Point gets used before pointUtil.ts (and hence point.ts) have been evaluated, leading to the error.
Module point.ts also uses an import from pointUtil.ts, but this is inside the dummyCalc method, so it isn't evaluated during the initial module evaluation. This means that if you import pointUtil.ts before point.ts in repl.test.ts, the evaluation order of point.ts and pointUtil.ts is reversed, and the error will go away, since point.ts won't fail on an initially undefined PointUtil.
import './pointUtil'
import {Point} from './point'
describe("REPL test", () => {
..
});
This is a hacky solution though, so it is better to avoid the cycle and put definitions that immediately require Point in the point.ts module itself. As a matter of fact, origin is more suitable as a static property on Point anyway.

Find ES6-module in which entity is declared

TL;DR There is some imported entity on ES6-module. Should find original ES module and line number, where this entity has been initially declared - not re-imported / re-exported.
There is some hierarchy of nested imported ES6-modules, some of which are not controlled by library code and had been imported from well-known place - it's some user-side configuration file.
Imagine following files structure:
config.js (not controlled)
import nested from './nested';
export default {
param1: { aaa: 10, bbb: 20 },
param2: nested
}
nested.js (not controlled)
export default {
ccc: 30,
ddd: 40
}
index.js (controlled)
import config from './config'
const ddd = config.ddd;
if(notValid(ddd)) {
const decl = %FIND_DECLARATION%(ddd);
console.log('Config variable "config.ddd" is not valid');
console.log('You declared it here: ', decl);
}
Output should be like following
You declared it here:
File webpack://./nested.js , line 2
ddd: 40
^^^^^^^
Should write function %FIND_DECLARATION%, which can find original ES-module and line number for some object declaration, and retrieve it's source code
Environment is webpack. Any dirty hacks are welcome if can't be solve without it.

What is the right way to use `useFactory` and `deps:[ ]` in Angular?

I want to use a simple provider with useFactory which will also use deps (learning purpose) .
So I've created this plnkr :
//app.module.ts
...
const randomFactory = (car,engine) => { return new Calc(car,engine); };
...
providers: [Car,Engine,
{ provide: 'Random',
useFactory: randomFactory ,
deps: [Car, Engine],
},
]
Where Calc is :
export class Calc
{
car:Car;
engine:Engine;
constructor ( Engine engine, Car car)
{
this.car=car;
this.engine=engine;
}
doSomething(){alert(this.car.getInfo() + this.engine.getInfo()}
}
Now I want to use it as an injected object so I did this :
export class AppComponent {
constructor(#Inject('Random') r) {
r.doSomething(); //should alert "car data + engine data" , but I get an error.
}
}
But I get an error : car is not defined
Question:
I don't see any point of using deps:[] If I already declare that modules in the main app module ( and so it is known in the global app) and in the Calc class where I import those classes.
So how can I fix my code to use deps:[] the right way ?
plnkr

The providers configuration is correct. You've got a syntax error in the Calc constructor. The correct declaration of the arguments is as follows:
constructor (engine: Engine, car: Car){
Here is the updated plunker:
https://plnkr.co/edit/HsECR0HEcIaPNbK6A7ZZ?p=preview