Understanding .tsconfig file

2
votes

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?
2
typescript
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
@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 – anny123
sure. I'll do so shortly – Aluan Haddad

2 Answers

2
votes

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

0
votes

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