tsconfig.json compiler options - Modules Flashcards

1
Q

What does allowUmdGlobalAccess compiler option do?

A

When set to true, allowUmdGlobalAccess lets you access UMD exports as globals from inside module files. A module file is a file that has imports and/or exports. Without this flag, using an export from a UMD module requires an import declaration.

An example use case for this flag would be a web project where you know the particular library (like jQuery or Lodash) will always be available at runtime, but you can’t access it with an import.

{
  "compilerOptions": {
    "allowUmdGlobalAccess": "true"
  }
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What does baseUrl compiler option do?

A

Lets you set a base directory to resolve non-absolute module names.

With "baseUrl": "./" inside this project TypeScript will look for files starting at the same folder as the tsconfig.json.

Example:

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

Source typelang

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What does module compiler option do?

A

Sets the module system for the program. See the theory behind TypeScript’s module option and its reference page for more information. You very likely want "nodenext" for modern Node.js projects.

Changing module affects moduleResolution which also has a reference page.

Possible values are: none, commonjs, amd, umd, system, es6/es2015, es2020, es2022, esnext, node16, nodenext

“Compiler Option - module” Retrieved February 9, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What does moduleResolution compiler option do?

A

Specify the module resolution strategy:

  • node for Node.js’ CommonJS implementation
  • node16 or nodenext for Node.js’ ECMAScript Module Support from TypeScript 4.7 onwards
  • classic used in TypeScript before the release of 1.6. You probably won’t need to use classic in modern code
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What does moduleSuffixes compiler option do?

A

Provides a way to override the default list of file name suffixes to search when resolving a module.

{
  "compilerOptions": {
    "moduleSuffixes": [".ios", ".native", ""]
  }
}

Note the empty string "" in moduleSuffixes which is necessary for TypeScript to also look-up *.ts.

This feature can be useful for React Native projects where each target platform can use a separate tsconfig.json with differing moduleSuffixes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What does noResolve compiler option do?

A

By default, TypeScript will examine the initial set of files for import and reference directives and add these resolved files to your program.

If noResolve is set, this process doesn’t happen. However, import statements are still checked to see if they resolve to a valid module, so you’ll need to make sure this is satisfied by some other means.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What does paths compiler option do?

A

A series of entries which re-map imports to lookup locations relative to the baseUrl.

Example:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"] // this mapping is relative to "baseUrl"
    }
  }
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What does resolveJsonModule compiler option do?

A

Allows importing modules with a .json extension, which is a common practice in node projects. This includes generating a type for the import based on the static JSON shape.

TypeScript does not support resolving JSON files by default.

Example:

{
  "compilerOptions": {
    "resolveJsonModule": "true"
  }
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What does rootDir compiler option do?

A

When TypeScript compiles files, it keeps the same directory structure in the output directory as exists in the input directory starting from the rootDir.

By default, the rootDir is the longest common path of all non-declaration input files. If composite is set, the default is instead the directory containing the tsconfig.json file.

The rootDir compiler option allows you to specify a custom rootDir

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What does rootDirs compiler option do?

A

Using rootDirs, you can inform the compiler that there are many “virtual” directories acting as a single root. This allows the compiler to resolve relative module imports within these “virtual” directories, as if they were merged in to one directory.

Examples:

{
  "compilerOptions": {
    "rootDirs": ["src/views", "generated/templates/views"]
  }
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What does typeRoots compiler option do?

A

By default all visible@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible. For example, that means packages within ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, and so on.

If typeRoots is specified, only packages under typeRoots will be included. For example:

{
  "compilerOptions": {
    "typeRoots": ["./typings", "./vendor/types"]
  }
}

This config file will include all packages under ./typings and ./vendor/types, and no packages from ./nodemodules/@types. All paths are relative to the tsconfig.json.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What does types compiler option do?

A

By default all visible@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible. For example, that means packages within ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, and so on.

If types is specified, only packages listed will be included in the global scope. For instance:

{
  "compilerOptions": {
    "types": ["node", "jest", "express"]
  }
}

This tsconfig.json file will only include ./node_modules/@types/node, ./node_modules/@types/jest and ./node_modules/@types/express. Other packages under node_modules/@types/* will not be included.

Important: This option does not affect how @types/* are included in your application code. When you have this option set, by not including a module in the types array it:

  • Will not add globals to your project (e.g process in node, or expect in Jest)
  • Will not have exports appear as auto-import recommendations
How well did you know this?
1
Not at all
2
3
4
5
Perfectly