TypeScript Settings



Node.js and npm ⤳ issues here…
Installation
package.json file (example)
{
  "author": "Franck Barbier",
  "name": "Palindrome", "version": "1.0.0", …
  "main": "js/Palindrome.js", // i.e., 'require("Palindrome");'...
  "typings": "js/Palindrome.d.ts", // Tell where homemade types are declared for future reuse...
  "scripts": {
    "configuration": "npx tsc --showConfig", // Local version...
    "compilation": "npx tsc",
    "execution": "node js/Palindrome.js", // Does not work for the browser!
    "initialization": "npx tsc --init" // Creation of 'tsconfig.json' file from scratch...
  },
  "devDependencies": {
    "ts-node": "^10.9.1", // Optional...
    "typescript": "^4.9.5"
  }
}
Compilation and execution (local)

What are the available scripts?

npm run

Check configuration

npm run configuration

Creation of tsconfig.json file from scratch

npm run initialization

Compilation

# Caution: location of source files with .ts suffix must be set up:
npm run compilation

Execution (or run within browser based on Web server)

# Node.js only:
npm run execution

Otherwise, direct compilation may occur as follows: tsc Palindrome.ts <compilation options>. For example, tsc Palindrome.ts --watch (-w) compilation option installs a daemon, which re-launches compilation at source file modification time.

tsconfig.json file (example)
{
  "compilerOptions": {
    "declaration": true, // See also '"typings": "js/Palindrome.d.ts",' in 'package.json'...
    // "emitDeclarationOnly": true,
    "module": "CommonJS", // Chosen module syntax (e.g., 'import', 'export'...) in JavaScript...
    "moduleResolution": "node", // How to resolve module dependencies (default is "node", "classic" is legacy)
    "outDir": "js",
    "sourceMap": false, // Debug issues...
    "target": "ES5" // Targeted JavaScript version, e.g., 'let x = y ** z;' -> JavaScript 7...
  },
  "exclude": [
    "node_modules" // This is default option, so no need anyway...
  ],
  "files": [
    "ts/Palindrome.ts" // Plus possible comma-separated list of other files to compile...
  ]
}

Rule(s)

Example (source files in the ts directory, recursively)

"include": [
    "ts/**/*"
],

Rule(s)

See also here…

Compilation-time code control

Rule(s)

Example (tsconfig.json file and later on TypeScript code)

"noImplicitAny": true,
declare const dat: any; // 'any' is imposed by '"noImplicitAny": true'

Note that dat.gui is a Google library, which has a TypeScript support for type checking; a better way is then reusing such a support as follows. 

npm install @types/dat.gui -D

Rule(s)

Example (tsconfig.json file)

"skipLibCheck": true,

Rule(s)

Example (PURE JavaScript)

// window.splash-screen.enable('circular'); // Dash in 'splash-screen' creates a bug...
window['splash-screen'].enable('circular'); // Right way in JavaScript

Example (tsconfig.json file and later on TypeScript code)

"suppressImplicitAnyIndexErrors": true,
// '"suppressImplicitAnyIndexErrors": true,' is required (otherwise compilation error):
window['splash-screen'].enable('circular');

Rule(s)

Example (tsconfig.json file)

"sourceMap": true,

Rule(s)

Example (tsconfig.json complete file)

{
  "compilerOptions": {
    "baseUrl": ".",
    // https://www.typescriptlang.org/docs/handbook/module-resolution.html#additional-module-resolution-flags
    // https://stackoverflow.com/questions/43281741/how-to-use-paths-in-tsconfig-json:
    "paths": {
      "GLTFLoader": ["three.js-r115/examples/jsm/loaders/GLTFLoader"], // From "baseUrl"
      "Three": ["three.js-r115/src/Three"] // From "baseUrl"
    },
    "module": "ES6", // Based on ES6 'import', 'export'...
    "moduleResolution": "node", // Required by Three.js (https://www.typescriptlang.org/docs/handbook/module-resolution.html#how-typescript-resolves-modules)
    "outDir": "js", // Where to generate JavaScript files...
    "sourceMap": true, // For debugging...
    "strict": true, // Strongest type checking...
    "target": "ES6", // Required by Three.js...
    "traceResolution": true
  },
  "include": [ // Source files relative to the base URL:
    // '.ts', '.tsx', and '.d.ts' by default:
    "ts/**/*" // '*' matches zero or more characters (excluding directory separators) AND '**/' recursively matches any subdirectory...
  ]
}
Node.js dev. based on TypeScript (package.json file)

Note: -D and --save-dev are the same and mean dev. dependency.

npm install @types/node --save-dev
{
  …
  "devDependencies": {
    "typescript": "^4.9.5",
    "@types/node": "^18.15.1" // Node.js dev. based on TypeScript…
  }
}
Type declarations provided by libraries (tsconfig.json file)

TypeScript searches type declaration files (e.g., index.d.ts) of external libraries in node_modules/@types. The typeRoots (here…) and types (here…) compiler options allow some customization. 

npm install --save-dev @cloudflare/workers-types@latest
"compilerOptions": {
    …
    "typeRoots": [ 
      "ts/typings", // Non-Typescript library, say "L": create 'L.d.ts' file in 'typings' directory with 'declare module "L";' inside...
      "node_modules/@types" // By default, it must be "regenerated"!
    ]
    "types": ["@cloudflare/workers-types"]
  },
Componentized project using the references flag here…

Code may be componentized in self-contained TypeScript sub-projects using references. 

{
  "compilerOptions": { // common
    "skipLibCheck": true,
    "sourceMap": true,
    "target": "ES2021",
    "typeRoots": [
      "./ts/typings",
      "./node_modules/@types"
    ]
  },
  "files": [], // To stop accidental compilation without '--build' -> everything is compiled in the root directory...
  "references": [ // https://stackoverflow.com/questions/64626846/typescript-tsc-not-picking-up-tsconfig-json-inside-a-subdirectory
    {
      "path": "./ts" // frontend
    },
    {
      "path": "./ts/backend"
    }
  ]
}

npx tsc --build is then the required command for component-by-component compilation provided that sub-projects compilation options relate to root tsconfig.json file as follows. 

{ // frontend
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "ES6",
    "moduleResolution": "Node",
    "outDir": "../dist",
    "rootDir": ".",
    "strict": true
  },
  "exclude": ["./backend"],
  "include": [
    "./**/*"
  ]
}

Sub-project compilation may occurs as follows: npx tsc -b ts for frontend and npx tsc -b ts/backend for backend. Note that the composite flag set to true is the way to the management of sub-project dependencies…

Packaging with webpack
const path = require('path');
module.exports = {
    devtool: 'source-map',
    entry: './ts/DMiNer.ts',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/i, use: ["style-loader", "css-loader"]
            },
            {
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ],
    },
    // optimization: {
    //     minimize: true
    // },
    output: {
        filename: 'DMiNer.js',
        path: path.resolve(__dirname, 'js'),
    },
    resolve: {
        extensions: [".ts", ".js"]
        // modules: ['node_modules', 'X'] // Places to look for modules...
    }
};
Packaging with browserify
Apache Cordova dev. based on TypeScript