After conducting a test, it has come to my attention that TypeScript 2.6.2 imposes a requirement where imported elements need to be used in a new before the module is referenced in a require.
The test is based on the following code snippets extracted from the official TypeScript documentation:
ZipCodeValidator.ts:
export interface StringValidator {
isAcceptable(s: string): boolean;
}
export const numberRegexp = /^[0-9]+$/;
class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
export { ZipCodeValidator };
export { ZipCodeValidator as mainValidator };
SimpleModule.ts:
import { ZipCodeValidator } from "./ZipCodeValidator";
class Test {
constructor(validator: ZipCodeValidator) {
let myValidator = new ZipCodeValidator(); // <- NOTE THIS LINE.
let x = 1;
}
}
tsconfig.json:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": false,
"experimentalDecorators": false,
"module": "CommonJS",
"moduleResolution": "classic",
"noFallthroughCasesInSwitch": false,
"noImplicitAny": false,
"noImplicitReturns": false,
"outDir": "dist/scripts",
"removeComments": false,
"sourceMap": false,
"strictNullChecks": false,
"target": "es3"
},
"include": [
"app/ts/**/*.ts"
],
"compileOnSave": true,
"buildOnSave": true
}
Transpiled ZipCodeValidator.js:
"use strict";
exports.__esModule = true;
exports.numberRegexp = /^[0-9]+$/;
var ZipCodeValidator = /** @class */ (function () {
function ZipCodeValidator() {
}
ZipCodeValidator.prototype.isAcceptable = function (s) {
return s.length === 5 && exports.numberRegexp.test(s);
};
return ZipCodeValidator;
}());
exports.ZipCodeValidator = ZipCodeValidator;
exports.mainValidator = ZipCodeValidator;
Transpiled SimpleModule.js (with the highlighted line left intact – displaying a require call):
"use strict";
exports.__esModule = true;
var ZipCodeValidator_1 = require("./ZipCodeValidator");
var Test = /** @class */ (function () {
function Test(validator) {
var myValidator = new ZipCodeValidator_1.ZipCodeValidator();
var x = 1;
}
return Test;
}());
Transpiled SimpleModule.js (with the highlighted line commented out – excluding the require call):
"use strict";
exports.__esModule = true;
var Test = /** @class */ (function () {
function Test(validator) {
//let myValidator = new ZipCodeValidator();
var x = 1;
}
return Test;
}());
For me, this poses an issue as I have transitioned an AngularJs application to TypeScript and am utilizing modules instead of namespaces for building reusable components with Webpack. In my case, I do not manually perform object instantiation using new; AngularJs handles that process for me. The reason behind switching to TypeScript modules was to streamline startup time and enable dynamic module loading.
However, upon inspecting the transpiled JS code, it lacks require calls although exports are included within it. Consequently, the generated bundle.js by Webpack appears disproportionately small, potentially missing essential components.
Is there a possible solution or configuration adjustment to automatically translate existing TypeScript import instructions like
import {ServiceXYZ} from "./ServiceXYZ"require calls?