未捕獲的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 。