请问从TypeScript编译的JS无法在浏览器中运行，怎么办？
TypeScript代码正确编译。但是（可能）由于我的类结构而导致的编译结果与预期的不同。导致运行时错误。
导致错误本身的实际问题是
this.Scene = new THREE.Scene(); 运行TSC后，我得到这一行
this.Scene = new three_1.default.Scene(); 我可以删除默认参数并对其进行修复。但是，每次都这样做似乎是一个坏主意。我宁愿知道潜在的问题。上下文类，以防与我正在使用的结构相关。抱歉，我对打字稿比较陌生（一个星期前开始使用JS，但是我确实拥有.NET学位）
import { MaterialLibrary } from "./Materials/MaterialLibrary"; import { MeshLoader } from "./MeshLoader"; import THREE from "three";
export class Manager { //manager instance private static instance: Manager;
//sub-managers
public static MaterialLib: MaterialLibrary;
public static Scene: THREE.Scene;
//helper classes
public static MeshLoader: MeshLoader;
constructor()
{
Manager.instance = this;
}
static Init()
{
this.MaterialLib = new MaterialLibrary();
this.MeshLoader = new MeshLoader();
this.Scene = new THREE.Scene();
}
static GetInstance(): Manager
{
if(!Manager.instance)
{
Manager.instance = new Manager();
}
return Manager.instance;
}
} 并编译为
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); const MaterialLibrary_1 = require("./Materials/MaterialLibrary"); const MeshLoader_1 = require("./MeshLoader"); const three_1 = __importDefault(require("three")); class Manager { constructor() { Manager.instance = this; } static Init() { this.MaterialLib = new MaterialLibrary_1.MaterialLibrary(); this.MeshLoader = new MeshLoader_1.MeshLoader(); this.Scene = new three_1.default.Scene(); } static GetInstance() { if (!Manager.instance) { Manager.instance = new Manager(); } return Manager.instance; } } exports.Manager = Manager;
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
从你的描述来看，问题可能出在你如何导入THREE模块以及你在静态方法中使用this关键字的方式。TypeScript编译器将THREE转换为three_1.default是因为它认为你是按默认导出（default export）来使用的THREE库，这是正常的。但关键在于你的类结构和静态方法的使用方式。
在JavaScript/TypeScript中，静态方法不绑定到任何实例，因此在静态方法中直接使用this不会像在实例方法中那样工作。当你在Manager类的静态方法Init里写this.Scene = new THREE.Scene();时，这里的this实际上指的是Manager类本身，而不是某个实例。这可能是导致运行时错误的原因之一，因为你试图给类本身而非实例添加属性。
解决这个问题的一个方法是确保场景和其他需要初始化的对象是实例属性，而不是静态属性。这样，你可以在构造函数或实例方法中正确地使用this。下面是一个修改后的示例：
import { MaterialLibrary } from "./Materials/MaterialLibrary";
import { MeshLoader } from "./MeshLoader";
import * as THREE from "three"; // 修改THREE的导入方式
export class Manager {
private static instance: Manager;
public materialLib: MaterialLibrary;
public scene: THREE.Scene; // 将Scene改为实例属性
public meshLoader: MeshLoader;
private constructor() {
this.materialLib = new MaterialLibrary();
this.scene = new THREE.Scene(); // 在构造函数中初始化
this.meshLoader = new MeshLoader();
}
static getInstance(): Manager {
if (!Manager.instance) {
Manager.instance = new Manager();
}
return Manager.instance;
}
}
在这个修改后的版本中，我做了以下更改： 1. 改变了THREE的导入方式，使用import * as THREE from "three";，这是一种常见的导入整个命名空间的方式。 2. 将Scene和MeshLoader移到了实例属性中，并在构造函数中进行初始化。 3. 保留了单例模式的实现，通过getInstance方法获取唯一的Manager实例。
这样，你就可以避免在静态上下文中误用this，同时保持代码的清晰和逻辑正确性。
