CODEWITHSUNDEEP
javascriptmoduletypescriptrequire
user2877778
user2877778

Reputation: 37

what are ways to import a module in typescript and what is the role of require js in module loading

I am new to typescript and require js. i have seen several way to import modules in typescript. but i am not clear what the below codes are doing..

1./// <reference path="foo.ts" />
2.import {utils} from "./util";
3.require(["bar"],function(bar){
  //use module here
  });
4.define(["bar"],function(bar){
  //use module here
  });
5.requirejs(["bar"],function(bar){
  //use module here
  });

how they differ each other. any one please help.

Upvotes: 1

Views: 1118

Answers (2)

ryano.mcc13
ryano.mcc13

Reputation: 474

To really understand this, you should look into the history of modules in JavaScript. The language has only had official module support in the most recent version, and not all browsers support this feature yet. Here is a list of some good articles.

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html https://addyosmani.com/writing-modular-js/

To answer your question, the first type is used for internal modules (now renamed to namespaces). You would use these if you have multiple source files, but they would get compiled into a single file (using the outFile compiler option).

The second type is the new ES6 standard module syntax. You would use this in source code, but, for now, would be compiled to either AMD or CommonJS or SystemJS syntax (which follows the ES6 standard).

The remaining ones are AMD module syntax, define is used to define a module that will export some code. require is used to import modules that your code will use. You can't export any code using require so you would typically only use this once for your main script file.

With current versions of TypeScript, you wouldn't use AMD or CommonJS syntax, you would use the standard ES6 module syntax and your compiler would then compile it to the proper module type as per the module property in your tsconfig.json file.

Upvotes: 0

Joseph
Joseph

Reputation: 119847

  1. TypeScript-specific way of loading modules.
  2. Is the standard way of loading modules.
  3. and
  4. and
  5. are how RequireJS loads modules.

RequireJS is a library that existed before JS had an official syntax for loading modules. A RequireJS modules is defined using a define call, passing in dependencies and a function which runs when all dependencies are loaded. A require call is what kicks off the loading process, usually found at the very start of the app.

import/export are the standard syntax for loading JavaScript modules. The syntax was standardized iirc last year. Module resolution isn't standardized nor is it implemented by any browser at the moment. But this syntax is used by different tools to "compile" JS.

I can't explain much of the TypeScript one. The article should provide you everything you need.

The /// directive is the most common of this group. It serves as a declaration of dependency between files.

Upvotes: 1

Related Questions