tsconfig.js compiler options - Interop Constraints

Question 1

What does allowSyntheticDefaultImports compiler option do?

Answer 1

When set to true, allowSyntheticDefaultImports allows you to write an import like:

import React from "react";

instead of:

import * as React from "react";

When the module does not explicitly specify a default export.

Note: This flag does not affect the JavaScript emitted by TypeScript, it only for the type checking. This option brings the behavior of TypeScript in-line with Babel, where extra code is emitted to make using a default export of a module more ergonomic.

Source typescriptlang

Question 2

What does esModuleInterop compiler option do?

Answer 2

By default (with esModuleInterop false or not set) TypeScript treats CommonJS/AMD/UMD modules similar to ES6 modules. In doing this, there are two parts in particular which turned out to be flawed assumptions:

• a namespace import like import * as moment from "moment" acts the same as const moment = require("moment")
• a default import like import moment from "moment" acts the same as const moment = require("moment").default

This mis-match causes these two issues:

• The ES6 modules spec states that a namespace import (import * as x) can only be an object, by having TypeScript treating it the same as const x = require("x") then TypeScript allowed for the import to be treated as a function and be callable. That’s not valid according to the spec.
• While accurate to the ES6 modules spec, most libraries with CommonJS/AMD/UMD modules didn’t conform as strictly as TypeScript’s implementation.

Turning on esModuleInterop will fix both of these problems in the code transpiled by TypeScript.

Note: Enabling esModuleInterop will also enable allowSyntheticDefaultImports.

Source typescriptlang

Question 3

What does forceConsistentCasingInFileNames compiler option do?

Answer 3

TypeScript follows the case sensitivity rules of the file system it’s running on. This can be problematic if some developers are working in a case-sensitive file system and others aren’t. If a file attempts to import fileManager.ts by specifying ./FileManager.ts the file will be found in a case-insensitive file system, but not on a case-sensitive file system.

When this option is set, TypeScript will issue an error if a program tries to include a file by a casing different from the casing on disk.

Source typescriptlang

Question 4

What does isolatedModules compiler option do?

Answer 4

Setting the isolatedModules flag tells TypeScript to warn you if you write certain code that can’t be correctly interpreted by a single-file transpilation process (like the one done by babel.

It does not change the behavior of your code, or otherwise change the behavior of TypeScript’s checking and emitting process.

if isolateModules flag setted on:

• All implementation files must be modules (which means it has some form of import/export). An error occurs if any file isn’t a module (this restriction doesn’t apply to .d.ts files).
• It is an error to reference an ambient const enum member.

Source typescriptlang

Question 5

What does preserveSymlinks compiler option do?

Answer 5

With this flag enabled, references to modules and packages (e.g. imports and /// <reference type="..." /> directives) are all resolved relative to the location of the symbolic link file, rather than relative to the path that the symbolic link resolves to.

This is to reflect the same flag in Node.js; which does not resolve the real path of symlinks.

This flag also exhibits the opposite behavior to Webpack’s resolve.symlinks option (i.e. setting TypeScript’s preserveSymlinks to true parallels setting Webpack’s resolve.symlinks to false, and vice-versa).

Source typescriptlang