Specifies an allowlist of files to include in the program. An error occurs if any of the files can’t be found.

{
  "compilerOptions": {},
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]
}

This is useful when you only have a small number of files and don’t need to use a glob to reference many files. If you need that then use include.

The value of extends is a string which contains a path to another configuration file to inherit from. The path may use Node.js style resolution.

The configuration from the base file are loaded first, then overridden by those in the inheriting config file. All relative paths found in the configuration file will be resolved relative to the configuration file they originated in.

It’s worth noting that files, include, and exclude from the inheriting config file overwrite those from the base config file, and that circularity between configuration files is not allowed.

Currently, the only top-level property that is excluded from inheritance is references.

Example

configs/base.json:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

tsconfig.json:

{
  "extends": "./configs/base",
  "files": ["main.ts", "supplemental.ts"]
}

tsconfig.nostrictnull.json:

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "strictNullChecks": false
  }
}

Properties with relative paths found in the configuration file, which aren’t excluded from inheritance, will be resolved relative to the configuration file they originated in.

Specifies an array of filenames or patterns to include in the program. These filenames are resolved relative to the directory containing the tsconfig.json file.

json
{
  "include": ["src/**/*", "tests/**/*"]
}

Which would include:

.
├── scripts                ⨯
│   ├── lint.ts            ⨯
│   ├── update_deps.ts     ⨯
│   └── utils.ts           ⨯
├── src                    ✓
│   ├── client             ✓
│   │    ├── index.ts      ✓
│   │    └── utils.ts      ✓
│   ├── server             ✓
│   │    └── index.ts      ✓
├── tests                  ✓
│   ├── app.test.ts        ✓
│   ├── utils.ts           ✓
│   └── tests.d.ts         ✓
├── package.json
├── tsconfig.json
└── yarn.lock

include and exclude support wildcard characters to make glob patterns:

• * matches zero or more characters (excluding directory separators)
• ? matches any one character (excluding directory separators)
• **/ matches any directory nested to any level

If the last path segment in a pattern does not contain a file extension or wildcard character, then it is treated as a directory, and files with supported extensions inside that directory are included (e.g. .ts, .tsx, and .d.ts by default, with .js and .jsx if allowJs is set to true).

Specifies an array of filenames or patterns that should be skipped when resolving include.

Important: exclude only changes which files are included as a result of the include setting. A file specified by exclude can still become part of your codebase due to an import statement in your code, a types inclusion, a /// <reference directive, or being specified in the files list.

It is not a mechanism that prevents a file from being included in the codebase - it simply changes what the include setting finds.

Project references are a way to structure your TypeScript programs into smaller pieces. Using Project References can greatly improve build and editor interaction times, enforce logical separation between components, and organize your code in new and improved ways.

You can read more about how references works in the Project References section of the handbook

Quando:

• undefined (predefinito) fornire suggerimenti come avviso agli editor
• true il codice irraggiungibile viene ignorato
• false visualizza un errore di compilazione quando viene trovato del codice irraggiungibile

Questi avvertimenti sono solo per codice che probabilmente è irraggiungibile a causa del uso di sintassi JavaScript, per esempio:

ts
function fn(n: number) {
  if (n > 5) {
    return true;
  } else {
    return false;
  }
  return true;
}

Con "allowUnreachableCode": false:

ts
function fn(n: number) {
  if (n > 5) {
    return true;
  } else {
    return false;
  }
  return true;
Unreachable code detected.7027Unreachable code detected.
}Try

Ciò non influisce sugli errori sulla base del codice che sembra di essere irraggiungibile a causa dell analisi del tipo.

Imposta a False per disattivare le avvertenze riguardo label non utilizzati.

In JavaScript i label sono molto rari e tipicamente indicano un tentativo di scrivere un oggetto letterale:

ts
function verificaEta(eta: number) {
  // Il 'return' non è presente
  if (eta > 18) {
    verificato: true;
Unused label.7028Unused label.
  }
}Try

Assicura che i tuoi file sono analizzati con la modalità ECMAScript rigoroso, ed emette use strict per ogni file sorgente.

La modalità ECMAScript rigoroso è stata introdotta in ES5 e fornisce modifiche al comportamento runtime del JavaScript engine per migliorare le prestazioni e generare una serie di errori invece di ignorarli silenziosamente.

With exactOptionalPropertyTypes enabled, TypeScript applies stricter rules around how it handles properties on type or interfaces which have a ? prefix.

For example, this interface declares that there is a property which can be one of two strings: ‘dark’ or ‘light’ or it should not be in the object.

ts
interface UserDefaults {
  // The absence of a value represents 'system'
  colorThemeOverride?: "dark" | "light";
}

Without this flag enabled, there are three values which you can set colorThemeOverride to be: “dark”, “light” and undefined.

Setting the value to undefined will allow most JavaScript runtime checks for the existence to fail, which is effectively falsy. However, this isn’t quite accurate; colorThemeOverride: undefined is not the same as colorThemeOverride not being defined. For example, "colorThemeOverride" in settings would have different behavior with undefined as the key compared to not being defined.

exactOptionalPropertyTypes makes TypeScript truly enforce the definition provided as an optional property:

ts
const settings = getUserSettings();
settings.colorThemeOverride = "dark";
settings.colorThemeOverride = "light";
 
// But not:
settings.colorThemeOverride = undefined;
Type 'undefined' is not assignable to type '"dark" | "light"' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the type of the target.2412Type 'undefined' is not assignable to type '"dark" | "light"' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the type of the target.Try

Report errors for fallthrough cases in switch statements. Ensures that any non-empty case inside a switch statement includes either break, return, or throw. This means you won’t accidentally ship a case fallthrough bug.

ts
const a: number = 6;
 
switch (a) {
  case 0:
Fallthrough case in switch.7029Fallthrough case in switch.
    console.log("even");
  case 1:
    console.log("odd");
    break;
}Try

In some cases where no type annotations are present, TypeScript will fall back to a type of any for a variable when it cannot infer the type.

This can cause some errors to be missed, for example:

ts
function fn(s) {
  // No error?
  console.log(s.subtr(3));
}
fn(42);Try

Turning on noImplicitAny however TypeScript will issue an error whenever it would have inferred any:

ts
function fn(s) {
Parameter 's' implicitly has an 'any' type.7006Parameter 's' implicitly has an 'any' type.
  console.log(s.subtr(3));
}Try

When working with classes which use inheritance, it’s possible for a sub-class to get “out of sync” with the functions it overloads when they are renamed in the base class.

For example, imagine you are modeling a music album syncing system:

ts
class Album {
  download() {
    // Default behavior
  }
}
 
class SharedAlbum extends Album {
  download() {
    // Override to get info from many sources
  }
}Try

Then when you add support for machine-learning generated playlists, you refactor the Album class to have a ‘setup’ function instead:

ts
class Album {
  setup() {
    // Default behavior
  }
}
 
class MLAlbum extends Album {
  setup() {
    // Override to get info from algorithm
  }
}
 
class SharedAlbum extends Album {
  download() {
    // Override to get info from many sources
  }
}Try

In this case, TypeScript has provided no warning that download on SharedAlbum expected to override a function in the base class.

Using noImplicitOverride you can ensure that the sub-classes never go out of sync, by ensuring that functions which override include the keyword override.

The following example has noImplicitOverride enabled, and you can see the error received when override is missing:

ts
class Album {
  setup() {}
}
 
class MLAlbum extends Album {
  override setup() {}
}
 
class SharedAlbum extends Album {
  setup() {}
This member must have an 'override' modifier because it overrides a member in the base class 'Album'.4114This member must have an 'override' modifier because it overrides a member in the base class 'Album'.
}Try

When enabled, TypeScript will check all code paths in a function to ensure they return a value.

ts
function lookupHeadphonesManufacturer(color: "blue" | "black"): string {
Function lacks ending return statement and return type does not include 'undefined'.2366Function lacks ending return statement and return type does not include 'undefined'.
  if (color === "blue") {
    return "beats";
  } else {
    ("bose");
  }
}Try

Raise error on ‘this’ expressions with an implied ‘any’ type.

For example, the class below returns a function which tries to access this.width and this.height – but the context for this inside the function inside getAreaFunction is not the instance of the Rectangle.

ts
class Rectangle {
  width: number;
  height: number;
 
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }
 
  getAreaFunction() {
    return function () {
      return this.width * this.height;
'this' implicitly has type 'any' because it does not have a type annotation.
'this' implicitly has type 'any' because it does not have a type annotation.2683
2683'this' implicitly has type 'any' because it does not have a type annotation.
'this' implicitly has type 'any' because it does not have a type annotation.
    };
  }
}Try

This setting ensures consistency between accessing a field via the “dot” (obj.key) syntax, and “indexed” (obj["key"]) and the way which the property is declared in the type.

Without this flag, TypeScript will allow you to use the dot syntax to access fields which are not defined:

ts
interface GameSettings {
  // Known up-front properties
  speed: "fast" | "medium" | "slow";
  quality: "high" | "low";
 
  // Assume anything unknown to the interface
  // is a string.
  [key: string]: string;
}
 
const settings = getSettings();
settings.speed;
          
(property) GameSettings.speed: "fast" | "medium" | "slow"
settings.quality;
           
(property) GameSettings.quality: "high" | "low"
 
// Unknown key accessors are allowed on
// this object, and are `string`
settings.username;
            
(index) GameSettings[string]: stringTry

Turning the flag on will raise an error because the unknown field uses dot syntax instead of indexed syntax.

ts
const settings = getSettings();
settings.speed;
settings.quality;
 
// This would need to be settings["username"];
settings.username;
Property 'username' comes from an index signature, so it must be accessed with ['username'].4111Property 'username' comes from an index signature, so it must be accessed with ['username'].
            
(index) GameSettings[string]: stringTry

The goal of this flag is to signal intent in your calling syntax about how certain you are this property exists.

TypeScript has a way to describe objects which have unknown keys but known values on an object, via index signatures.

ts
interface EnvironmentVars {
  NAME: string;
  OS: string;
 
  // Unknown properties are covered by this index signature.
  [propName: string]: string;
}
 
declare const env: EnvironmentVars;
 
// Declared as existing
const sysName = env.NAME;
const os = env.OS;
      
const os: string
 
// Not declared, but because of the index
// signature, then it is considered a string
const nodeEnv = env.NODE_ENV;
        
const nodeEnv: stringTry

Turning on noUncheckedIndexedAccess will add undefined to any un-declared field in the type.

ts
declare const env: EnvironmentVars;
 
// Declared as existing
const sysName = env.NAME;
const os = env.OS;
      
const os: string
 
// Not declared, but because of the index
// signature, then it is considered a string
const nodeEnv = env.NODE_ENV;
        
const nodeEnv: string | undefinedTry

Report errors on unused local variables.

ts
const createKeyboard = (modelID: number) => {
  const defaultModelID = 23;
'defaultModelID' is declared but its value is never read.6133'defaultModelID' is declared but its value is never read.
  return { type: "keyboard", modelID };
};Try

Report errors on unused parameters in functions.

ts
const createDefaultKeyboard = (modelID: number) => {
'modelID' is declared but its value is never read.6133'modelID' is declared but its value is never read.
  const defaultModelID = 23;
  return { type: "keyboard", modelID: defaultModelID };
};Try

The strict flag enables a wide range of type checking behavior that results in stronger guarantees of program correctness. Turning this on is equivalent to enabling all of the strict mode family options, which are outlined below. You can then turn off individual strict mode family checks as needed.

Future versions of TypeScript may introduce additional stricter checking under this flag, so upgrades of TypeScript might result in new type errors in your program. When appropriate and possible, a corresponding flag will be added to disable that behavior.

When set, TypeScript will check that the built-in methods of functions call, bind, and apply are invoked with correct argument for the underlying function:

ts
// With strictBindCallApply on
function fn(x: string) {
  return parseInt(x);
}
 
const n1 = fn.call(undefined, "10");
 
const n2 = fn.call(undefined, false);
Argument of type 'boolean' is not assignable to parameter of type 'string'.2345Argument of type 'boolean' is not assignable to parameter of type 'string'.Try

Otherwise, these functions accept any arguments and will return any:

ts
// With strictBindCallApply off
function fn(x: string) {
  return parseInt(x);
}
 
// Note: No error; return type is 'any'
const n = fn.call(undefined, false);Try

When enabled, this flag causes functions parameters to be checked more correctly.

Here’s a basic example with strictFunctionTypes off:

ts
function fn(x: string) {
  console.log("Hello, " + x.toLowerCase());
}
 
type StringOrNumberFunc = (ns: string | number) => void;
 
// Unsafe assignment
let func: StringOrNumberFunc = fn;
// Unsafe call - will crash
func(10);Try

With strictFunctionTypes on, the error is correctly detected:

ts
function fn(x: string) {
  console.log("Hello, " + x.toLowerCase());
}
 
type StringOrNumberFunc = (ns: string | number) => void;
 
// Unsafe assignment is prevented
let func: StringOrNumberFunc = fn;
Type '(x: string) => void' is not assignable to type 'StringOrNumberFunc'.
  Types of parameters 'x' and 'ns' are incompatible.
    Type 'string | number' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'.2322Type '(x: string) => void' is not assignable to type 'StringOrNumberFunc'.
  Types of parameters 'x' and 'ns' are incompatible.
    Type 'string | number' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'.Try

During development of this feature, we discovered a large number of inherently unsafe class hierarchies, including some in the DOM. Because of this, the setting only applies to functions written in function syntax, not to those in method syntax:

ts
type Methodish = {
  func(x: string | number): void;
};
 
function fn(x: string) {
  console.log("Hello, " + x.toLowerCase());
}
 
// Ultimately an unsafe assignment, but not detected
const m: Methodish = {
  func: fn,
};
m.func(10);Try

When strictNullChecks is false, null and undefined are effectively ignored by the language. This can lead to unexpected errors at runtime.

When strictNullChecks is true, null and undefined have their own distinct types and you’ll get a type error if you try to use them where a concrete value is expected.

For example with this TypeScript code, users.find has no guarantee that it will actually find a user, but you can write code as though it will:

ts
declare const loggedInUsername: string;
 
const users = [
  { name: "Oby", age: 12 },
  { name: "Heera", age: 32 },
];
 
const loggedInUser = users.find((u) => u.name === loggedInUsername);
console.log(loggedInUser.age);Try

Setting strictNullChecks to true will raise an error that you have not made a guarantee that the loggedInUser exists before trying to use it.

ts
declare const loggedInUsername: string;
 
const users = [
  { name: "Oby", age: 12 },
  { name: "Heera", age: 32 },
];
 
const loggedInUser = users.find((u) => u.name === loggedInUsername);
console.log(loggedInUser.age);
'loggedInUser' is possibly 'undefined'.18048'loggedInUser' is possibly 'undefined'.Try

The second example failed because the array’s find function looks a bit like this simplification:

ts
// When strictNullChecks: true
type Array = {
  find(predicate: (value: any, index: number) => boolean): S | undefined;
};
// When strictNullChecks: false the undefined is removed from the type system,
// allowing you to write code which assumes it always found a result
type Array = {
  find(predicate: (value: any, index: number) => boolean): S;
};

When set to true, TypeScript will raise an error when a class property was declared but not set in the constructor.

ts
class UserAccount {
  name: string;
  accountType = "user";
 
  email: string;
Property 'email' has no initializer and is not definitely assigned in the constructor.2564Property 'email' has no initializer and is not definitely assigned in the constructor.
  address: string | undefined;
 
  constructor(name: string) {
    this.name = name;
    // Note that this.email is not set
  }
}Try

In the above case:

• this.name is set specifically.
• this.accountType is set by default.
• this.email is not set and raises an error.
• this.address is declared as potentially undefined which means it does not have to be set.

In TypeScript 4.0, support was added to allow changing the type of the variable in a catch clause from any to unknown. Allowing for code like:

ts
try {
  // ...
} catch (err: unknown) {
  // We have to verify err is an
  // error before using it as one.
  if (err instanceof Error) {
    console.log(err.message);
  }
}Try

This pattern ensures that error handling code becomes more comprehensive because you cannot guarantee that the object being thrown is a Error subclass ahead of time. With the flag useUnknownInCatchVariables enabled, then you do not need the additional syntax (: unknown) nor a linter rule to try enforce this behavior.

In TypeScript 5.0, when an import path ends in an extension that isn’t a known JavaScript or TypeScript file extension, the compiler will look for a declaration file for that path in the form of {file basename}.d.{extension}.ts. For example, if you are using a CSS loader in a bundler project, you might want to write (or generate) declaration files for those stylesheets:

css
/* app.css */
.cookie-banner {
  display: none;
}

ts
// app.d.css.ts
declare const css: {
  cookieBanner: string;
};
export default css;

ts
// App.tsx
import styles from "./app.css";
styles.cookieBanner; // string

By default, this import will raise an error to let you know that TypeScript doesn’t understand this file type and your runtime might not support importing it. But if you’ve configured your runtime or bundler to handle it, you can suppress the error with the new --allowArbitraryExtensions compiler option.

Note that historically, a similar effect has often been achievable by adding a declaration file named app.css.d.ts instead of app.d.css.ts - however, this just worked through Node’s require resolution rules for CommonJS. Strictly speaking, the former is interpreted as a declaration file for a JavaScript file named app.css.js. Because relative files imports need to include extensions in Node’s ESM support, TypeScript would error on our example in an ESM file under --moduleResolution node16 or nodenext.

For more information, read up the proposal for this feature and its corresponding pull request.

--allowImportingTsExtensions allows TypeScript files to import each other with a TypeScript-specific extension like .ts, .mts, or .tsx.

This flag is only allowed when --noEmit or --emitDeclarationOnly is enabled, since these import paths would not be resolvable at runtime in JavaScript output files. The expectation here is that your resolver (e.g. your bundler, a runtime, or some other tool) is going to make these imports between .ts files work.

Quando viene impostato a true, il flag allowUmdGlobalAccess ti permette ad accedere ai export UMD come globali dentro l’archivio dei moduli. Un file modulo è un file che ha dei imports e/o exports. Senza questo flag per usare un export di un modulo UMD è necessario dichiarare un import.

Un esempio di utilizzo di questo flag è un progetto web dove si conoscono le librerie particolari (come jQuery o Lodash) che saranno sempre disponibili al runtime, ma non puoi accedervi con un’import.

Ti permette di definire una directory di base per risolvere i nomi dei moduli non assoluti.

Puoi definire una cartella root dove puoi fare una risoluzione dei file assoluta. Per esempio.

URLBase
├── ex.ts
├── ciao
│   └── mondo.ts
└── tsconfig.json

Con "baseUrl": "./" dentro il progetto, TypeScript andrà a procurare i file iniziando dalla stessa cartella in cui si trova tsconfig.json.

ts
import { ciaoMondo } from "ciao/mondo";
console.log(ciaoMondo);

Se sei stanco di vedere sempre i import come "../" o "./". O che devi sempre cambiargli quando sposti i file, questo è un ottimo modo per risolvere questo problema.

--customConditions takes a list of additional conditions that should succeed when TypeScript resolves from an exports or imports field of a package.json. These conditions are added to whatever existing conditions a resolver will use by default.

For example, when this field is set in a tsconfig.json as so:

jsonc
{
  "compilerOptions": {
    "target": "es2022",
    "moduleResolution": "bundler",
    "customConditions": ["my-condition"]
  }
}

Any time an exports or imports field is referenced in package.json, TypeScript will consider conditions called my-condition.

So when importing from a package with the following package.json

jsonc
{
  // ...
  "exports": {
    ".": {
      "my-condition": "./foo.mjs",
      "node": "./bar.mjs",
      "import": "./baz.mjs",
      "require": "./biz.mjs"
    }
  }
}

TypeScript will try to look for files corresponding to foo.mjs.

This field is only valid under the node16, nodenext, and bundler options for --moduleResolution.

Definisce il sistema di moduli per il programma. Consulta la sezione Moduli per più informazioni. Per i progetti che utilizzano node è probabile che tu voglia "CommonJS".

Questo è un output di esempio:

ts
// @filename: index.ts
import { valoreDiPi } from "./costanti";
 
export const doppioPi = valoreDiPi * 2;Try

CommonJS

ts
const costanti_1 = require("./costanti");
exports.doppioPi = costanti_1.valoreDiPi * 2;
 Try

UMD

ts
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./costanti"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.doppioPi = void 0;
    const costanti_1 = require("./costanti");
    exports.doppioPi = costanti_1.valoreDiPi * 2;
});
 Try

AMD

ts
define(["require", "exports", "./costanti"], function (require, exports, costanti_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.doppioPi = void 0;
    exports.doppioPi = costanti_1.valoreDiPi * 2;
});
 Try

System

ts
System.register(["./costanti"], function (exports_1, context_1) {
    "use strict";
    var costanti_1, doppioPi;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [
            function (costanti_1_1) {
                costanti_1 = costanti_1_1;
            }
        ],
        execute: function () {
            exports_1("doppioPi", doppioPi = costanti_1.valoreDiPi * 2);
        }
    };
});
 Try

ESNext

ts
import { valoreDiPi } from "./costanti";
export const doppioPi = valoreDiPi * 2;
 Try

ES2020

ts
import { valoreDiPi } from "./costanti";
export const doppioPi = valoreDiPi * 2;
 Try

None

ts
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.doppioPi = void 0;
const costanti_1 = require("./costanti");
exports.doppioPi = costanti_1.valoreDiPi * 2;
 Try

Specify the module resolution strategy:

• 'node16' or 'nodenext' for modern versions of Node.js. Node.js v12 and later supports both ECMAScript imports and CommonJS require, which resolve using different algorithms. These moduleResolution values, when combined with the corresponding module values, picks the right algorithm for each resolution based on whether Node.js will see an import or require in the output JavaScript code.
• 'node10' (previously called 'node') for Node.js versions older than v10, which only support CommonJS require. You probably won’t need to use node10 in modern code.
• 'bundler' for use with bundlers. Like node16 and nodenext, this mode supports package.json "imports" and "exports", but unlike the Node.js resolution modes, bundler never requires file extensions on relative paths in imports.
• 'classic' was used in TypeScript before the release of 1.6. classic should not be used.

There are reference pages explaining the theory behind TypeScript’s module resolution and the details of each option.

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

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

Given the above configuration, an import like the following:

ts
import * as foo from "./foo";

TypeScript will look for the relative files ./foo.ios.ts, ./foo.native.ts, and finally ./foo.ts.

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

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

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.

A series of entries which re-map imports to lookup locations relative to the baseUrl if set, or to the tsconfig file itself otherwise. There is a larger coverage of paths in the moduleResolution reference page.

paths lets you declare how TypeScript should resolve an import in your require/imports.

{
  "compilerOptions": {
    "paths": {
      "jquery": ["./vendor/jquery/dist/jquery"]
    }
  }
}

This would allow you to be able to write import "jquery", and get all of the correct typing locally.

{
  "compilerOptions": {
    "paths": {
        "app/*": ["./src/app/*"],
        "config/*": ["./src/app/_config/*"],
        "environment/*": ["./src/environments/*"],
        "shared/*": ["./src/app/_shared/*"],
        "helpers/*": ["./src/helpers/*"],
        "tests/*": ["./src/tests/*"]
    },
}

In this case, you can tell the TypeScript file resolver to support a number of custom prefixes to find code.

Note that this feature does not change how import paths are emitted by tsc, so paths should only be used to inform TypeScript that another tool has this mapping and will use it at runtime or when bundling.

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:

ts
// @filename: settings.json
Cannot find module './settings.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.2732Cannot find module './settings.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.
{
    "repo": "TypeScript",
    "dry": false,
    "debug": false
}
// @filename: index.ts
import settings from "./settings.json";
 
settings.debug === true;
settings.dry === 2;Try

Enabling the option allows importing JSON, and validating the types in that JSON file.

ts
// @filename: settings.json
{
    "repo": "TypeScript",
    "dry": false,
This comparison appears to be unintentional because the types 'boolean' and 'number' have no overlap.2367This comparison appears to be unintentional because the types 'boolean' and 'number' have no overlap.
    "debug": false
}
// @filename: index.ts
import settings from "./settings.json";
 
settings.debug === true;
settings.dry === 2;Try

--resolvePackageJsonExports forces TypeScript to consult the exports field of package.json files if it ever reads from a package in node_modules.

This option defaults to true under the node16, nodenext, and bundler options for --moduleResolution.

--resolvePackageJsonImports forces TypeScript to consult the imports field of package.json files when performing a lookup that starts with # from a file whose ancestor directory contains a package.json.

This option defaults to true under the node16, nodenext, and bundler options for --moduleResolution.

Default: Il più lungo percorso comune di tutti i file di input di non dichiarazione. Se composite è impostato, il default è invece la cartella che contiene il file tsconfig.json.

Quando TypeScript compila i file, esso mantiene la stessa struttura delle cartelle che è presente nei file di input, anche nei file di output.

Per esempio, mettiamo caso che hai alcuni file di input:

MioProj
├── tsconfig.json
├── core
│   ├── a.ts
│   ├── b.ts
│   ├── sub
│   │   ├── c.ts
├── types.d.ts

Il valore predifinito di rootDir è il più lungo percorso comune di tutti i file non dichiarativi, quindi in questo caso è core/.

Se la tua outDir era dist, TypeScript avrebbe dovuto scrivere questa struttura:

MioProj
├── dist
│   ├── a.js
│   ├── b.js
│   ├── sub
│   │   ├── c.js

Tuttavia, potresti aver impostato core come parte della struttura della cartella di output. Definendo rootDir: "." in tsconfig.json, TypeScript crea questa struttura:

MioProj
├── dist
│   ├── core
│   │   ├── a.js
│   │   ├── b.js
│   │   ├── sub
│   │   │   ├── c.js

Importante, rootDir non interferisce con i file che diventano parte della compilazione, esso non ha interazioni con include, exclude, o con i file tsconfig.json.

Ricorda che TypeScript non creerà mai un file di output in una cartella fuori da outDir, e non salterà mai la creazione di un file. Per questo motivo, rootDir costringe tutti i file di output ad essere emessi all’interno di rootDir.

Per esempio, mettiamo caso tu abbia questa struttura:

MioProj
├── tsconfig.json
├── core
│   ├── a.ts
│   ├── b.ts
├── aiutanti.ts

Sarebbe un errore specificare rootDir come core e include come *, perché esso crea un file (aiutanti.ts) che ha bisogno di essere emesso fuori da outDir (i.e. ../aiutanti.js).

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.

For example:

 src
 └── views
     └── view1.ts (can import "./template1", "./view2`)
     └── view2.ts (can import "./template1", "./view1`)
 generated
 └── templates
         └── views
             └── template1.ts (can import "./view1", "./view2")

{
  "compilerOptions": {
    "rootDirs": ["src/views", "generated/templates/views"]
  }
}

This does not affect how TypeScript emits JavaScript, it only emulates the assumption that they will be able to work via those relative paths at runtime.

rootDirs can be used to provide a separate “type layer” to files that are not TypeScript or JavaScript by providing a home for generated .d.ts files in another folder. This technique is useful for bundled applications where you use import of files that aren’t necessarily code:

sh
 src
 └── index.ts
 └── css
     └── main.css
     └── navigation.css
 generated
 └── css
     └── main.css.d.ts
     └── navigation.css.d.ts

{
  "compilerOptions": {
    "rootDirs": ["src", "generated"]
  }
}

This technique lets you generate types ahead of time for the non-code source files. Imports then work naturally based off the source file’s location. For example ./src/index.ts can import the file ./src/css/main.css and TypeScript will be aware of the bundler’s behavior for that filetype via the corresponding generated declaration file.

ts
// @filename: index.ts
import { appClass } from "./main.css";Try

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 ./node_modules/@types. All paths are relative to the tsconfig.json.

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.

What does this affect?

This option does not affect how @types/* are included in your application code, for example if you had the above compilerOptions example with code like:

ts
import * as moment from "moment";
moment().format("MMMM Do YYYY, h:mm:ss a");

The moment import would be fully typed.

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

This feature differs from typeRoots in that it is about specifying only the exact types you want included, whereas typeRoots supports saying you want particular folders.

Si possono creare dei file .d.ts per ogni file TypeScript o JavaScript all’interno del tuo progetto. Questi file .d.ts contengono delle definizioni dei file che descrivono l’API esterna al tuo modulo. Con i file .d.ts, strumenti come TypeScript possono dare intellisense e suggerimenti sui tipi per il codice senza tipo.

Quando declaration è impostato su true, eseguendo il compilatore con questo codice TypeScript:

ts
export let ciaoMondo = "Ciao!";Try

Esso genererà un file index.js come questo:

ts
export let ciaoMondo = "Ciao!";
 Try

Con un corrispondente ciaoMondo.d.ts:

ts
export declare let ciaoMondo: string;
 Try

Quando si lavora con i file .d.ts insieme ai file JavaScript potresti voler usare emitDeclarationOnly o outDir per essere sicuro che i file JavaScript non vengano sovrascritti.

Offre una modo di configurare la directory root in cui salvare i file di dichiarazione.

esempio
├── index.ts
├── package.json
└── tsconfig.json

con questo tsconfig.json:

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "./tipi"
  }
}

Inserirà i file d.ts per index.ts in una cartella tipi:

esempio
├── index.js
├── index.ts
├── package.json
├── tsconfig.json
└── tipi
    └── index.d.ts

Crea una source map per i file .d.ts che riportano al file originale .ts. Questo permetterà agli editor come ad esempio VS Code di andare nel file .ts originale quando si usano funzioni tipo Vai alla definizione.

Dovresti prendere seriamente in considerazione di abilitare questa funzione se stai usando le project references.

Iterazione di livello inferiore, o Downleveling, è un termine di TypeScript utilizzato per migrare verso una versione precedente di JavaScript. Questa flag permette quindi di supportare una più accurata implementazione di come il JavaScript moderno itera i nuovi concetti in versioni precedenti di JavaScript in runtime.

ECMAScript 6 aggiunge una serie di nuove iterazioni primitive: il for / of loop (for (el of arr)), spread di Array ([a, ...b]), spread di argomenti (fn (... args)) e Symbol.iterator.--downlevelIteration permette a queste iterazioni primitive di essere utilizzate in modo più accurrato in un ambiente ES5 se un’implementazione di Symbol.iterator è presente.

Esempio: Effetti su for / of

Con questo codice TypeScript:

js
const str = "Ciao!";
for (const s of str) {
  console.log(s);
}

Senza downlevelIteration attivo, un loop for / of su un qualsiasi oggetto viene convertito in un tradizionale for loop:

ts
"use strict";
var str = "Ciao!";
for (var _i = 0, str_1 = str; _i < str_1.length; _i++) {
    var s = str_1[_i];
    console.log(s);
}
 Try

Generalmente tutti si aspettano questo, tuttavia non è compatibile al 100% con il protocollo di iterazione ECMAScript 6. Certe string, ad esempio un emoji (😜), hanno un .length di 2 (o anche di più!), ma dovrebbero iterare come 1 unità in un for-of loop. Guarda questo blog post di Jonathan New per una spiegazione più dettagliata.

Quando downlevelIteration è attivo, TypeScript utilizzerà una funzione ausiliaria che andrà a controllare la presenza di un Symbol.iterator (che può essere di tipo nativo o polyfill). Nel caso in cui questa implementazione non ci sia, ritornerai ad un’iterazione index-based.

ts
"use strict";
var __values = (this && this.__values) || function(o) {
    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
    if (m) return m.call(o);
    if (o && typeof o.length === "number") return {
        next: function () {
            if (o && i >= o.length) o = void 0;
            return { value: o && o[i++], done: !o };
        }
    };
    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var e_1, _a;
var str = "Ciao!";
try {
    for (var str_1 = __values(str), str_1_1 = str_1.next(); !str_1_1.done; str_1_1 = str_1.next()) {
        var s = str_1_1.value;
        console.log(s);
    }
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
    try {
        if (str_1_1 && !str_1_1.done && (_a = str_1.return)) _a.call(str_1);
    }
    finally { if (e_1) throw e_1.error; }
}
 Try

Puoi utilizzare tslib via importHelpers in modo da ridurre il numero di righe inline Javascript:

ts
"use strict";
var __values = (this && this.__values) || function(o) {
    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
    if (m) return m.call(o);
    if (o && typeof o.length === "number") return {
        next: function () {
            if (o && i >= o.length) o = void 0;
            return { value: o && o[i++], done: !o };
        }
    };
    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var e_1, _a;
var str = "Ciao!";
try {
    for (var str_1 = __values(str), str_1_1 = str_1.next(); !str_1_1.done; str_1_1 = str_1.next()) {
        var s = str_1_1.value;
        console.log(s);
    }
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
    try {
        if (str_1_1 && !str_1_1.done && (_a = str_1.return)) _a.call(str_1);
    }
    finally { if (e_1) throw e_1.error; }
}
 Try

Nota: attivare downlevelIteration non andrà a migliorare le prestazioni di compliazione se Symbol.iterator non è presente in runtime.

Esempio: Effetti sullo spray di Array

Questo è un spread di array:

js
// Crea un nuovo array composto dall'elemento 1 seguito dagli elementi di arr2
const arr = [1, ...arr2];

Secondo la descrizione, sembra facile convertirlo in ES5:

js
// Stessa cosa, no?
const arr = [1].concat(arr2);

Tuttavia, questo è visibilmente diverso in certi rari casi. Ad esempio, nel caso un array abbia un “buco”, l’index mancante andrà a creare una proprietà own nel caso si decida di applicare uno spread, ma non se creato utilizzando .concat:

js
// Crea un array dove manca l'elemento '1'
let mancante = [0, , 1];
let spread = [...mancante];
let concatenato = [].concat(mancante);
// true
"1" in spread;
// false
"1" in concatenato;

Proprio come un for / of, downlevelIteration andrà ad usare Symbol.iterator (se presente) in modo da emulare in modo più preciso il comportamento di ES 6.

Controls whether TypeScript will emit a byte order mark (BOM) when writing output files. Some runtime environments require a BOM to correctly interpret a JavaScript files; others require that it is not present. The default value of false is generally best unless you have a reason to change it.

Only emit .d.ts files; do not emit .js files.

This setting is useful in two cases:

• You are using a transpiler other than TypeScript to generate your JavaScript.
• You are using TypeScript to only generate d.ts files for your consumers.

TypeScript da alcuni suggerimenti per operazioni di livello inferiore come ad esempio estendere classi, spread di array o oggetti, e operazioni asincrone. In modo predefinito, questi suggerimenti vengono dati nei file che usano le operazioni elencate in precedenza. Tuttavia, nel caso in cui lo stesso suggerimento è usato in più moduli diversi, si possono verificare alcuni casi di duplicazione del codice.

Se l’opzione importHelpers è attiva, queste funzionalità ausiliari vengono importate dal modulo tslib. Dovrai assicurarti che il modulo tslib è in grado di essere importato in runtime. Questo riguarda solo i moduli; I file degli script globali non proveranno ad importare i moduli.

Per esempio, con questo codice TypeScript:

ts
export function fn(arr: number[]) {
  const arr2 = [1, ...arr];
}

Attivando downlevelIteration, esso rimane falso:

ts
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
export function fn(arr) {
    var arr2 = __spreadArray([1], __read(arr), false);
}
 Try

Poi attivando entrambi downlevelIteration e importHelpers:

ts
import { __read, __spreadArray } from "tslib";
export function fn(arr) {
    var arr2 = __spreadArray([1], __read(arr), false);
}
 Try

Puoi utilizzare noEmitHelpers quando metti a disposizione la tua implementazione di queste funzioni.

Deprecated in favor of verbatimModuleSyntax.

This flag controls how import works, there are 3 different options:

• remove: The default behavior of dropping import statements which only reference types.

• preserve: Preserves all import statements whose values or types are never used. This can cause imports/side-effects to be preserved.

• error: This preserves all imports (the same as the preserve option), but will error when a value import is only used as a type. This might be useful if you want to ensure no values are being accidentally imported, but still make side-effect imports explicit.

This flag works because you can use import type to explicitly create an import statement which should never be emitted into JavaScript.

When set, instead of writing out a .js.map file to provide source maps, TypeScript will embed the source map content in the .js files. Although this results in larger JS files, it can be convenient in some scenarios. For example, you might want to debug JS files on a webserver that doesn’t allow .map files to be served.

Mutually exclusive with sourceMap.

For example, with this TypeScript:

ts
const helloWorld = "hi";
console.log(helloWorld);

Converts to this JavaScript:

ts
"use strict";
const helloWorld = "hi";
console.log(helloWorld);
 Try

Then enable building it with inlineSourceMap enabled there is a comment at the bottom of the file which includes a source-map for the file.

ts
"use strict";
const helloWorld = "hi";
console.log(helloWorld);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDO0FBQ3hCLE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMifQ==Try

When set, TypeScript will include the original content of the .ts file as an embedded string in the source map (using the source map’s sourcesContent property). This is often useful in the same cases as inlineSourceMap.

Requires either sourceMap or inlineSourceMap to be set.

For example, with this TypeScript:

ts
const helloWorld = "hi";
console.log(helloWorld);Try

By default converts to this JavaScript:

ts
"use strict";
const helloWorld = "hi";
console.log(helloWorld);
 Try

Then enable building it with inlineSources and inlineSourceMap enabled there is a comment at the bottom of the file which includes a source-map for the file. Note that the end is different from the example in inlineSourceMap because the source-map now contains the original source code also.

ts
"use strict";
const helloWorld = "hi";
console.log(helloWorld);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDO0FBQ3hCLE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBoZWxsb1dvcmxkID0gXCJoaVwiO1xuY29uc29sZS5sb2coaGVsbG9Xb3JsZCk7Il19Try

Specify the location where debugger should locate map files instead of generated locations. This string is treated verbatim inside the source-map, for example:

{
  "compilerOptions": {
    "sourceMap": true,
    "mapRoot": "https://my-website.com/debug/sourcemaps/"
  }
}

Would declare that index.js will have sourcemaps at https://my-website.com/debug/sourcemaps/index.js.map.

Specify the end of line sequence to be used when emitting files: ‘CRLF’ (dos) or ‘LF’ (unix).

Il compilatore non genera file di output come ad esempio codice JavaScript, source maps o dichiarazioni.

Questo fa spazio per altri strumenti come Babel o swc per gestire la conversione di un file TypeScript in un file che può essere eseguito in un ambiente JavaScript

Puoi usare TypeScript come uno strumento che ti offre un integrazione da parte dell’editor e un codice sorgente tipizzato.

Instead of importing helpers with importHelpers, you can provide implementations in the global scope for the helpers you use and completely turn off emitting of helper functions.

For example, using this async function in ES5 requires a await-like function and generator-like function to run:

ts
const getAPI = async (url: string) => {
  // Get API
  return {};
};Try

Which creates quite a lot of JavaScript:

ts
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (g && (g = 0, op[0] && (_ = 0)), _) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var getAPI = function (url) { return __awaiter(void 0, void 0, void 0, function () {
    return __generator(this, function (_a) {
        // Get API
        return [2 /*return*/, {}];
    });
}); };
 Try

Which can be switched out with your own globals via this flag:

ts
"use strict";
var getAPI = function (url) { return __awaiter(void 0, void 0, void 0, function () {
    return __generator(this, function (_a) {
        // Get API
        return [2 /*return*/, {}];
    });
}); };
 Try

Do not emit compiler output files like JavaScript source code, source-maps or declarations if any errors were reported.

This defaults to false, making it easier to work with TypeScript in a watch-like environment where you may want to see results of changes to your code in another environment before making sure all errors are resolved.

Se viene specificato, i file .js (così come .d.ts, .js.map, etc.) verrano emessi in questa directory. E’ preservata la struttura della directory dei file sorgente originali; controlla rootDir se la root elaborata non è quella che quella che intendevi.

Se non specificato, i file .js verranno emessi nella stessa directory dei file .ts da cui sono stati generati:

sh
$ tsc
esempio
├── index.js
└── index.ts

Con un tsconfig.jsoncosì：

{
  "opzioniCompilatore": {
    "outDir": "dist"
  }
}

Eseguendo tsc con queste opzioni si andrà a spostare i file nella cartella dist specificata:

sh
$ tsc
esempio
├── dist
│   └── index.js
├── index.ts
└── tsconfig.json

Se specificato, tutti i file global (non moduli) verranno concatenati in un unico file output specificato.

Se module è system o amd, tutti i file module saranno concatenati in questo file dopo tutto il contenuto globale.

Nota: outFile non può essere a meno che module è None, System, o AMD. Questa opzione non può essere usata insieme a CommonJS o moduli ES6.

Do not erase const enum declarations in generated code. const enums provide a way to reduce the overall memory footprint of your application at runtime by emitting the enum value instead of a reference.

For example with this TypeScript:

ts
const enum Album {
  JimmyEatWorldFutures = 1,
  TubRingZooHypothesis = 2,
  DogFashionDiscoAdultery = 3,
}
 
const selectedAlbum = Album.JimmyEatWorldFutures;
if (selectedAlbum === Album.JimmyEatWorldFutures) {
  console.log("That is a great choice.");
}Try