未捕获的 ReferenceError：未定义 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 npm install systemjs 从命令行安装 SystemJs 并在 head 部分中以这种方式在您的 Index.html 中实现

 <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

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

require 和 import 仅在您使用模块捆绑器时有效 - 它不包含在 typescript 中！

您可以选择使用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。