After reading several blog posts, my understanding of TypeScript modules remains confusing. I have worked with three different modules (all installed via npm) and encountered varying behavior:
(1) Importing and using Angular 2 from npm required me to add the following lines in my .ts file:
import {bootstrap, Component, Directive, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';Then, in my HTML file, I included:
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>This resulted in:
The TypeScript compiler locating the angular2.d.ts file under node_modules automatically, despite specifying "angular2/angular2"
The output JavaScript containing
"var angular2_1 = require('angular2/angular2');The browser recognizing that Angular 2 was already loaded through the script tag and not attempting to load it again despite the presence of the
requirestatement
(2) The npm D3 module lacking a TypeScript definition led me to download one from DefinitelyTyped. By adding:
/// <reference path="../../typings/tsd.d.ts" />at the top of my .ts file, along with:
<script src="../node_modules/d3/d3.js"></script>in my HTML, I observed that this old-style module didn't require an import statement. However, when attempting to use one as follows:
import * as d3 from 'd3';
similar to the Angular case, the output JavaScript added:
var d3 = require('d3');
Unfortunately, unlike the Angular scenario, the browser tried but failed to load a file called "d3" from the same directory as the HTML file.
(3) The npm Phaser module contained a .d.ts file within a "typescript" subdirectory. Being an old style module ("declare module Phaser"), merely including:
/// <reference path="../node_modules/phaser/typescript/phaser.d.ts"/>at the beginning of my .ts file sufficed, similar to integrating D3. Nevertheless, sometimes (under specific conditions yet to be determined), the TypeScript compiler introduced:
var phaser_1 = require('phaser');into the JavaScript, even without utilizing an import statement. This led to issues since I wasn't employing commonjs/requirejs in my Phaser project, rendering "require" undefined and causing failure.
<>Moreover, unlike the Angular or D3 instances, introducing an import statement after the reference line for Phaser:
import * as Phaser from 'Phaser';resulted in the TypeScript compiler encountering errors. This discrepancy between D3 and Phaser compilation might stem from how the TypeScript compiler handles tsd.json or typings from DefinitelyTyped differently, among other factors.
I'm left pondering various questions:
1) What dictates whether the TypeScript compiler generates a "require(...)" line in the output JavaScript?
2) When does the TypeScript compiler seamlessly locate an external module in "npm_modules" upon using "import", with or without requiring a reference line at the document's onset?
3) Under what circumstances can the TypeScript compiler successfully find an ambient module in "typings" while utilizing "import", with or without a preceding "reference" line?
4) How does the TypeScript compiler identify an ambient module in "npm_modules" when incorporating "import", with or without an initial "reference" line?
5) Though possibly more related to commonjs/requirejs than TypeScript, if the TypeScript compiler includes a "require" line in the JavaScript output, how should one handle cases where the JavaScript module source lacks ES6 exports setup?