A great approach when working with TypeScript is to utilize es6/TypeScript module loading syntax:
import { type } from './module';
After compiling your TypeScript code into JavaScript, you have the flexibility to choose any module loader that fits your needs:
es6
system
commonjs
AMD
UMD
To specify the target module system, adjust the settings in tsconfig.json:
"compilerOptions": {
...
"module": "commonjs",
}
Although current browsers do not support native module loading, you can include the necessary script based on your chosen module system.
For instance, if you opt for "system" or "commonjs", ensure that you include a compatible script for proper module loading (e.g. node_modules/systemjs/dist/system.js)
Personal Recommendation for TypeScript Angular2 Development
In my opinion, using es6 for module loading syntax offers a clear and concise approach. I find it beneficial to develop Angular2 applications in TypeScript while leveraging es6 language features, especially the streamlined module loading syntax. When transpiling TypeScript to JavaScript, targeting es5 works well since most modern browsers provide sufficient compatibility without requiring a shim. Additionally, utilizing systemjs as the module loader grants flexibility for potential format changes in the future.
When coding in TypeScript for FileServer functionality, sticking with es6 module loading syntax ensures consistency with the targeted module loader across all your TypeScript files.