2

Being a beginner, I am unable to comprehend the significance of some terms, despite going through documentation.

In my .tsconfig file I have

emitDecoratorMetadata

sourceMap

esModuleInterop -> Allow default imports from modules with no default export. This does not affect code emit, just typechecking. Can someone please make the above definition as humanly comprehensible as possible? Does this mean we can just import and not export?

For example, the definition for emitDecoratorMetadata in one of the answers says

emit or not design-type metadata for decorated declarations in source

What does decorated declarations in source mean? Also, if someone could explain sourceMap in slightly more human terms, that would be so helpful.

Update: @Antonis Wrote an amazing answer still the last part looks vague. I created a separate post here:

Understanding esModuleInterop in tsconfig file Resources I went through:

  1. https://www.typescriptlang.org/docs/handbook/compiler-options.html
  2. https://basarat.gitbooks.io/typescript/docs/project/tsconfig.html
  3. what is the purpose of tsconfig.json?
Alwaysblue
  • 9,948
  • 38
  • 121
  • 210
  • You've confused the description of `esModuleInterop` with that of `allowSyntheticDefaultImports`. The latter is what allows default imports from modules having no default export, affecting only type checking. The former _does_ affect code emit, synthesizing a default export, and implying the latter. – Aluan Haddad May 25 '19 at 19:39
  • @AluanHaddad Your comment is kinda technical for me to understand.Can you please make your this line `The former does affect code emit, synthesizing a default export, and implying the latter.` less technical and please answer in details in answer section – Alwaysblue May 26 '19 at 06:48
  • sure. I'll do so shortly – Aluan Haddad May 26 '19 at 14:47

2 Answers2

2

emitDecoratorMetadata - In Angular for example we got the @Injectable, @Component, @NgModule decorators.

These decorators enable the class to emit metadata that carry information required, in order for the Angular to understand the kind of dependencies this class needs and utilizes in it's constructor as well as how to handle this class later at runtime

Check this answer here as well.

sourceMap - Source maps carry the information of the original source code. We need this kind of maps when the browser is running the minified, obscured and bundled code. The maps reflect the original code in the bundled one so we can debug it later

esModuleInterop - First of all read about CommonJS Modules and ESModules. Secondly it pretty much means that in case there isn't one default export from the module, you still can default import something from that module

Antonis
  • 647
  • 6
  • 15
  • Thanks a lot for the answer Antonis. **it pretty much means that in case there isn't one default export from the module, you still can default import something from that module** if there isn't any export default than I think the only use case of the import default would be to initialise something? like singleton? – Alwaysblue May 20 '19 at 12:08
  • It affects the way you import something. You import everything as there was a default. Check this answer as well -> https://stackoverflow.com/questions/48785451/is-there-a-way-to-use-esmoduleinterop-in-tsconfig-as-opposed-to-it-being-a-fla – Antonis May 20 '19 at 12:36
  • I wasn't able to comprehend it by reading that questions answer. Anyway, I have asked a similar specific question if you could answer? https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file – Alwaysblue May 21 '19 at 12:48
0

The offical docs might help understand the .tsconfig file in its entirety.

The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

More information here: tsconfig.json

Varun Joshi
  • 599
  • 2
  • 9
  • 24