未捕获的ReferenceError：require未定义TypeScript

Question

我试图从一个.ts文件中导出命名空间，并从另一个.ts文件中导入，并收到错误NewMain.ts:2 Uncaught ReferenceError: require is not defined 。 我是新手，实际上正在学习TypeScript。 这是我的tsconfig.json文件

{
 "compilerOptions": {
     "module": "commonjs",
     "noImplicitAny": true,
     "removeComments": true,
     "preserveConstEnums": true,
     "sourceMap": true
 },
 "files": [
     "greeter.ts",
     "Main.ts",
     "RajIsh.ts",
     "NewMain.ts"        
  ],
 "exclude": [
    "node_modules"
  ]
}

这是我要导入名称空间的NewMain.ts

 import {DepartmentSection} from "./RajIsh"
 class Employee{
     name: string;
     //Function
     Display(username:string)
     {
         this.name=username;
         console.log(this.name);
     }
 }
 var person = new Employee();
 var itCell= new DepartmentSection.ITCell("Information Technology Section");
 console.log("Displaying from NewMain.ts by importing......");
 console.log(person.Display("XYZ")+" belongs to "+  itCell.DisplaySectionName("Finance Revenue and Expenditure Section"));
 console.log("Wooooooooo Hurrey!!!!!!!!!!!!!!!......");

这是我在RajIsh.ts名称空间

 export namespace DepartmentSection {
    export class Section  {
        //===================Class Property by default public
        name: string;

        //==================Constructor of Section Class taking parameter of Employee Name
        constructor(theName: string) {

                this.name = theName;
            }
        //====================Function which displays the department name of a person
        Department(depatmentName: string = "") {
            console.log(`${this.name} ,  ${depatmentName} !!`);
        }

    }
      //============================================================================================
      //=========================Inheritance

    export class ITCell extends Section{
        constructor(SectionName: string) { 
            super(SectionName); 
        }
        DisplaySectionName(DepartmentName:string) {
            console.log("Printing Section name...");
            super.Department(DepartmentName);
        }

    }
     export class LoanAndAccount extends Section {
        constructor(SectionName: string) { 
            super(SectionName); 
        }
        DisplaySectionName(DepartmentName:string) {
            console.log("Printing another Section name...");
            super.Department(DepartmentName);
        }
    }

 }

我在哪里做错了？ 我试图像这样导入以及import DepartmentSection = require('./RajIsh'); 但是当我尝试访问该类和函数时，它抛出一个错误，指出Property 'ITCell' does not exist on type 'typeof' RajIsh 。 我该怎么办？

Answer 1

一段时间以前，我遇到了同样的问题，并且已经通过使用SystemJs解决了。 尝试使用Systemjs 。 NPM使用命令行安装SystemJs npm install systemjs并以这种方式在在您的index.html实施head节

 <script src="node_modules/systemjs/dist/system.js"></script>

 <script>
    SystemJS.config({
    baseURL:"/", //Can write the path like /script and the browser will look inside the script folder
    packages:{
        ".":{
            defaultExtension:'js'
        }
    }
  })
  SystemJS.import("./main.js")
 <script>

试试这个它应该运行。 希望对您有帮助。

Answer 2

使用main.js编译器将.ts文件捆绑到一个main.js文件中时，根本不需要import和export ！

require和import仅在使用模块捆绑器时有效-它不在打字稿中！

您可以选择使用namespace来组织代码，但这不是必需的。

文件thing.ts

namespace Test {
    class Thing {
    }
}

文件app.ts

namespace Main {
    class App {
        constructor(){
             // you can make a new Thing instance here without import!
             let n = new Test.Thing()
        }
    }
}

之所以可行，是因为名称空间实际上在全局范围内，因此您可以从任何地方调用它们。 诸如webpack之类的模块捆绑器将您的代码保密（在全局范围内不可用），这就是为什么您需要对webpack使用import和export 。