AngularJS无模块打包器时，能否在单独文件实现继承基础控制器的子类控制器

当然可以做到！不用Webpack或任何模块打包器，你完全可以把CarCtrl和BoatCtrl放在独立的文件里，只要处理好TypeScript的作用域和文件加载顺序就行。下面是具体的实现方案：

1. 用命名空间封装控制器（避免全局污染） #

为了避免全局作用域变量冲突，推荐用TypeScript的命名空间来封装所有控制器类：

基础控制器文件：vehicle.ts #

namespace VehicleControllers {
  export class VehicleCtrl {
    protected vehicleType: string;

    constructor(type: string) {
      this.vehicleType = type;
    }

    // 基础方法示例
    public getVehicleType(): string {
      return this.vehicleType;
    }
  }
}

汽车控制器文件：car.ts #

在这个文件里，我们直接在同一个命名空间下扩展VehicleCtrl：

namespace VehicleControllers {
  export class CarCtrl extends VehicleCtrl {
    private doorCount: number;

    constructor(doors: number) {
      super("Car"); // 调用父类构造函数
      this.doorCount = doors;
    }

    // 汽车专属方法
    public getDoorCount(): number {
      return this.doorCount;
    }
  }
}

船只控制器文件：boat.ts #

同理，在独立文件中实现船只控制器：

namespace VehicleControllers {
  export class BoatCtrl extends VehicleCtrl {
    private hasSails: boolean;

    constructor(sails: boolean) {
      super("Boat");
      this.hasSails = sails;
    }

    // 船只专属方法
    public hasSailsOnBoard(): boolean {
      return this.hasSails;
    }
  }
}

2. 编译与加载方式 #

因为我们没有用模块打包器，需要确保TypeScript编译后的代码能正确识别父类的定义，有两种常用方式：

方式一：合并成单个JS文件（推荐） #

使用TypeScript的--outFile参数，按依赖顺序编译所有文件为一个JS文件：

tsc --outFile dist/app.js vehicle.ts car.ts boat.ts

然后在HTML中只需要引入这个合并后的文件：

<script src="dist/app.js"></script>
<script>
  // 测试使用
  const myCar = new VehicleControllers.CarCtrl(4);
  console.log(myCar.getVehicleType()); // 输出 "Car"
  console.log(myCar.getDoorCount()); // 输出 4

  const myBoat = new VehicleControllers.BoatCtrl(true);
  console.log(myBoat.getVehicleType()); // 输出 "Boat"
  console.log(myBoat.hasSailsOnBoard()); // 输出 true
</script>

方式二：按顺序引入单个JS文件 #

如果不想合并文件，需要在HTML中按依赖顺序引入每个编译后的JS文件（先加载父类，再加载子类）：

<script src="dist/vehicle.js"></script>
<script src="dist/car.js"></script>
<script src="dist/boat.js"></script>
<script>
  // 测试代码同上
</script>

3. 关键TypeScript配置 #

确保你的tsconfig.json中模块类型设置为"none"（因为我们不用ES模块或CommonJS）：

{
  "compilerOptions": {
    "module": "none",
    "target": "ES6", // 根据你的浏览器支持情况选择
    "outDir": "./dist",
    "strict": true
  },
  "include": ["*.ts"]
}

这样就能完全不用模块打包器，实现控制器的分文件扩展啦！

内容的提问来源于stack exchange，提问作者Klark