tsconfig.json compiler options - Modules Flashcards
What does allowUmdGlobalAccess compiler option do?
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"
}
}
Source typescriptlang
What does baseUrl compiler option do?
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
What does module compiler option do?
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.
What does moduleResolution compiler option do?
Specify the module resolution strategy:
-
nodefor Node.js’ CommonJS implementation -
node16ornodenextfor Node.js’ ECMAScript Module Support from TypeScript 4.7 onwards -
classicused in TypeScript before the release of 1.6. You probably won’t need to use classic in modern code
Source typescriptlang
What does moduleSuffixes compiler option do?
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.
Source typescriptlang
What does noResolve compiler option do?
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.
Source typscriptlang
What does paths compiler option do?
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"
}
}
}
Souce typescriptlang
What does resolveJsonModule compiler option do?
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"
}
}
Source typescriptlang
What does rootDir compiler option do?
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
source typescriptlang
What does rootDirs compiler option do?
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"]
}
}
Source typescriptlang
What does typeRoots compiler option do?
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.
Source typescriptlang
What does types compiler option do?
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
processin node, orexpectin Jest) - Will not have exports appear as auto-import recommendations
Source typescriptlang
