Cheat Sheet - TypeScript

Vocabular

What is a package?

• A (Node.js) package is a folder tree described by a package.json file. The package consists of the folder containing the package.json file and all subfolders until the next folder containing another package.json, or a folder named node_modules.

What is a module?

• In TypeScript, just as in ECMAScript 2015, a module is any file containing a top-level import or export statement.

Question & answers

When importing an ES module using the import statement, should I use a file extension, and if yes, which one?

package.json

exports

• Controls what parts of your package are exposed to consumers

tsconfig.json

include

• Specifices an array of filenames or patterns to include in the program
• Filenames are resolved relative to the directory containing the tsconfig.json
• E.g. "include": ["src/**/*", "tests/**/*"]

exclude

• Specifies an array of filenames or patterns that should be skipped when resolving include
• Only changes which files are included as a result of the include setting.

rootDir (modules)

• The inferred value for rootDir is the longest common path of all non-declaration input files
• Does not affect which files become part of the compiliation. It has no interaction with include, exclude or files.
• TypeScript will never write an output file outside of outDir

baseUrl (modules)

• Sets a base directory from which to resolve bare specifier module names
• Was designed for use with AMD module loaders in the browser, and is NOT RECOMMENDED in any other context
• As of TypeScript 4.1. baseUrl is no longer required to be set when using paths

paths (modules)

• A series of entries which re-map imports to lookup locations relative to the baseUrl if set, or to tsconfig.json otherwise
• Doesn't change how import paths are emitted by tsc

outDir (emit)

• Where to emit .js, d.ts and .js.map files to
• Directory structure of original source files is preserved

tsconfig used by Turbo Repo

{
  // Type checking
  "noUncheckedIndexedAccess": true,
  "strict": true,

  // Modules
  "module": "NodeNext" | "ESNext", 
  "moduleResolution": "Bundler",
  "resolveJsonModule": true,
  "rootDir": "src",
  
  // Emit
  "declaration": true,
  "declarationMap": true,
  "outDir": "dist",

  "noEmit": true

  // JavaScript support 
  "allowJs": true,

  // Editor support 
  "plugins" [{ "name": "next" }],

  // Interop constraints
  "esModuleInteropt": true, 
  "isolatedModules": true

  // Backwards compatibility

  // Language and environment 
  "lib": ["es2022", "DOM", "DOM.Iterable"],
  "moduleDetection": "force",
  "target": "ES2022",
  "jsx": "preserve",

  // Compiler diagnostics

  // Projects
  "incremental": false,

  // Output formatting 

  // Completeness
  "skipLibCheck": true,

  // Command line 

  // Watch options
}

tsconfig.json

The TSConfig Cheat Sheet

Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.

Total TypeScriptMatt Pocock

GitHub - tsconfig/bases: Hosts TSConfigs to extend in a TypeScript app, tuned to a particular runtime environment

Hosts TSConfigs to extend in a TypeScript app, tuned to a particular runtime environment - tsconfig/bases

GitHubtsconfig

TSConfig Reference - Docs on every TSConfig option

From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.

Docs on every TSConfig option

{
  "compilerOptions": {
    /* Base Options: */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "verbatimModuleSyntax": true,

    /* Strictness */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,

    /* If transpiling with TypeScript: */
    "module": "NodeNext",
    "outDir": "dist",
    "sourceMap": true,

    /* AND if you're building for a library: */
    "declaration": true,

    /* AND if you're building for a library in a monorepo: */
    "composite": true,
    "declarationMap": true,

    /* If NOT transpiling with TypeScript: */
    "module": "preserve",
    "noEmit": true,

    /* If your code runs in the DOM: */
    "lib": ["es2022", "dom", "dom.iterable"],

    /* If your code doesn't run in the DOM: */
    "lib": ["es2022"]
  }
}