CODEWITHSUNDEEP
typescriptes6-modulestsconfigosisoft
rafrcruz
rafrcruz

Reputation: 127

How to use typescript for development of PI Vision custom symbols

I'm developing a custom component to a tool named PI Vision. It uses AngularJS, and to build the custom components you have to include a component-template.html, a component.js into a folder, and it loads dynamically the new component.

the component.js file must be in this format:

(function (CS,d3) {

// SOME MANDATORY CODE WITH THIS window.PIVisualization

// SOME CUSTOM CODE, WITH MY LOGIC

})(window.PIVisualization,d3);

What I'm trying to do, is to use TypeScript to generate this component.js, with all benefits from use typescript as ES6 support and stuff. But the problem is when I try to separate logic into files, I can not output in a single file with plain javascript.

I have my main component.js with:

import { MyClass } from "./myclass"

(function (CS,d3) {

// STUFF

let x = new MyClass("test");

// MORE STUFF

})(window.PIVisualization,d3);

the myclass.ts has:

export class MyClass {
    constructor(nome: string) {
        return nome;
    }
};

the tsconfig.json was tested with module AMD and outFile "./build/component.js"

The output is producing something like 

define("testclass", ["require", "exports"], function (require, exports) {
    "use strict";

And I don't believe it will run in the browser.

What I'm looking for is a way where when transpiled, the result will be a single file, with the definition of myclass before the IIFE (a namespace would be desirable) and the IIFE using that class.

Upvotes: 0

Views: 528

Answers (1)

Jeff Bowman
Jeff Bowman

Reputation: 95714

That's the expected output for "module AMD"; if you're not using a module loader, including the type bundled into newer versions of Javascript, it sounds like you want module "None". See the Typescript options docs for --module, though of course you can specify that in your tsconfig.json.

Note that the Javascript output will use IIFEs by default; if you want to change the way your code is encapsulated, you may need to change your Typescript input, in which case your question may benefit from posting the output of --module=None compared with your expectation.

Upvotes: 1

Related Questions