时间戳

首页 > 解决方案 > 如何使用 typescript 开发 PI Vision 自定义符号

typescript - 如何使用 typescript 开发 PI Vision 自定义符号

问题描述

我正在为名为 PI Vision 的工具开发自定义组件。它使用 AngularJS，并且要构建自定义组件，您必须将 component-template.html、component.js 包含到文件夹中，并且它会动态加载新组件。

component.js 文件必须采用以下格式：

(function (CS,d3) {

// SOME MANDATORY CODE WITH THIS window.PIVisualization

// SOME CUSTOM CODE, WITH MY LOGIC

})(window.PIVisualization,d3);

我想要做的是使用 TypeScript 来生成这个 component.js，所有的好处都来自使用 typescript 作为 ES6 支持和东西。但问题是当我尝试将逻辑分离到文件中时，我无法使用纯 javascript 在单个文件中输出。

我有我的主要component.js：

import { MyClass } from "./myclass"

(function (CS,d3) {

// STUFF

let x = new MyClass("test");

// MORE STUFF

})(window.PIVisualization,d3);

myclass.ts 有：

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

tsconfig.json 使用模块 AMD 和 outFile "./build/component.js" 进行了测试

输出正在产生类似的东西

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

而且我不相信它会在浏览器中运行。

我正在寻找的是一种在转译时结果将是单个文件的方法，其中 myclass 在 IIFE 之前的定义（需要命名空间）和使用该类的 IIFE。

标签： typescriptes6-modulestsconfig

解决方案

这是“模块AMD ”的预期输出；如果您不使用模块加载器，包括捆绑到较新版本的 Javascript 中的类型，听起来您想要模块“无”。请参阅Typescript options文档--module，当然您可以在 tsconfig.json中指定。

请注意，默认情况下，Javascript 输出将使用IIFE；如果您想更改代码的封装方式，您可能需要更改您的 Typescript 输入，在这种情况下，您的问题可能会受益于发布--module=None与您的期望相比的输出。

推荐阅读