tsconfig.js compiler options - Language and Environment

Question 1

What does emitDecoratorMetadata compiler option do?

Answer 1

Enables experimental support for emitting type metadata for decorators which works with the module reflect-metadata.

Question 2

What does experimentalDecorators compiler option do?

Answer 2

Enables experimental support for decorators, which is a version of decorators that predates the TC39 standardization process.

Decorators are a language feature which hasn’t yet been fully ratified into the JavaScript specification. This means that the implementation version in TypeScript may differ from the implementation in JavaScript when it is decided by TC39.

Source typescriptlang

Question 3

What does jsx compiler option do?

Answer 3

Controls how JSX constructs are emitted in JavaScript files. This only affects output of JS files that started in .tsx files.

• react: Emit .js files with JSX changed to the equivalent React.createElement calls
• react-jsx: Emit .js files with the JSX changed to _jsx calls
• react-jsxdev: Emit .js files with the JSX changed to _jsx calls
• preserve: Emit .jsx files with the JSX unchanged
• react-native: Emit .js files with the JSX unchanged

Source typescriptlang

Question 4

What does jsxFactory compiler option do?

Answer 4

Changes the function called in .js files when compiling JSX Elements using the classic JSX runtime. The most common change is to use "h" or "preact.h" instead of the default "React.createElement" if using preact.

The factory chosen will also affect where the JSX namespace is looked up (for type checking information) before falling back to the global one.

If the factory is defined as React.createElement (the default), the compiler will check for React.JSX before checking for a global JSX. If the factory is defined as h, it will check for h.JSX before a global JSX.

Source typescriptlang

Question 5

What does jsxFragmentFactory compiler option do?

Answer 5

Specify the JSX fragment factory function to use when targeting react JSX emit with jsxFactory compiler option is specified, e.g. Fragment.

For example with this TSConfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "preact",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

This TSX file:

import { h, Fragment } from "preact";
const HelloWorld = () => (
  <>
    <div>Hello</div>
  </>
);

Would look like:

const preact_1 = require("preact");
const HelloWorld = () => ((0, preact_1.h)(preact_1.Fragment, null,
    (0, preact_1.h)("div", null, "Hello")));

Source typescriptlang

Question 6

What does jsxImportSource compiler option do?

Answer 6

Declares the module specifier to be used for importing the jsx and jsxs factory functions when using jsx as "react-jsx" or "react-jsxdev" which were introduced in TypeScript 4.1.

With React 17 the library supports a new form of JSX transformation via a separate import.

Using this TSConfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react-jsx"
  }
}

Will import React’s jsx factory (react/jsx-runtime ). If you wanted to use "jsxImportSource": "preact", you need a tsconfig like:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "types": ["preact"]
  }
}

Source typescriptlang

Question 7

What does lib compiler option do?

Answer 7

TypeScript includes a default set of type definitions for built-in JS APIs (like Math), as well as type definitions for things found in browser environments (like document). TypeScript also includes APIs for newer JS features matching the target you specify; for example the definition for Map is available if target is ES6 or newer.

You may want to change these for a few reasons:

• Your program doesn’t run in a browser, so you don’t want the "dom" type definitions
• Your runtime platform provides certain JavaScript API objects (maybe through polyfills), but doesn’t yet support the full syntax of a given ECMAScript version
• You have polyfills or native implementations for some, but not all, of a higher level ECMAScript version

Note: In TypeScript 4.5, lib files can be overriden by npm modules, find out more in the blog.

Source typescriptlang

Question 8

What does moduleDetection compiler option do?

Answer 8

There are three choices:

• "auto" (default) - TypeScript will not only look for import and export statements, but it will also check whether the "type" field in a package.json is set to "module" when running with module: nodenext or node16, and check whether the current file is a JSX file when running under jsx: react-jsx.
• "legacy" - The same behavior as 4.6 and prior, usings import and export statements to determine whether a file is a module.
• "force" - Ensures that every non-declaration file is treated as a module.

Source typescriptlang

Question 9

What does noLib compiler option do?

Answer 9

Disables the automatic inclusion of any library files. If this option is set, lib is ignored.

TypeScript cannot compile anything without a set of interfaces for key primitives like: Array, Boolean, Function, IArguments, Number, Object, RegExp, and String. It is expected that if you use noLib you will be including your own type definitions for these.

Source typescriptlang

Question 10

What does target compiler option do?

Answer 10

The target setting changes which JS features are downleveled and which are left intact. For example, an arrow function () => this will be turned into an equivalent function expression if target is ES5 or lower.

Modern browsers support all ES6 features, so ES6 is a good choice.

Changing target also changes the default value of lib. You may “mix and match” target and lib settings as desired, but you could just set target for convenience.

The special ESNext value refers to the highest version your version of TypeScript supports. This setting should be used with caution, since it doesn’t mean the same thing between different TypeScript versions and can make upgrades less predictable.

Source typescriptlang

Question 11

What does useDefineForClassFields compiler option do?

Answer 11

This flag is used as part of migrating to the upcoming standard version of class fields. TypeScript introduced class fields many years before it was ratified in TC39. The latest version of the upcoming specification has a different runtime behavior to TypeScript’s implementation but the same syntax.

This flag switches to the upcoming ECMA runtime behavior.

You can read more about the transition in the 3.7 release notes.

Source typescriptlang