🧩 Extension


TypeScript is JavaScript with syntax for types.

Extension offers built-in support for TypeScript files.

Starter TypeScript Template

Extension comes with a default TypeScript template for new projects, which you can use as a starting point for your next TypeScript-based Extension. This is the easiest way to have TypeScript integrated with Extension.

TypeScript Extension Template

Try it yourself

npx extension create my-extension --template=typescript

If you enjoy React, check the React+TypeScript template in the Templates page.

Usage With An Existing Extension


# install TypeScript as a devDependency
npm install -D typescript

# Generates the TypeScript config file:
# -`tsconfig.json`

npx tsc --init 


Automatic TypeScript Support

If your extension has TypeScript installed but no tsconfig.json file, Extension will attempt to automate the integration process by creating a tsconfig.json file at the project root, with the following defaults:

compilerOptions: {
  // Allow JavaScript files to be imported inside your project,
  // instead of just .ts and .tsx files
  "allowJs": true,

  // Allow default imports from modules with no default export
  "allowSyntheticDefaultImports": true,
  // Enables emit interoperability between CommonJS and ES Modules
  "esModuleInterop": true,
  // Issue an error if a program tries to include a file by a casing
  // different from the casing on disk.
  "forceConsistentCasingInFileNames": true,
  // Controls how JSX constructs are emitted in JavaScript files.
  // This only affects output of JS files that started in .tsx files.
  // "react-jsx" if the user extension has React as a dependency or devDependency.
  "jsx": "preserve",
  // Include typings for latest ECMAScript features and DOM APIs
  "lib": ["dom", "dom.iterable", "esnext"],
  // Use Node's module resolution algorithm; useful if using npm packages
  "moduleResolution": "node",
  // Use ES modules, which are the standard in modern browsers
  "module": "esnext",
  // Allow importing '.json' files
  "resolveJsonModule": true,
  // Enable all strict type-checking options
  "strict": true,
  // Use the latest ECMAScript version for the target output
  "target": "esnext",
  // Ensure each file can be safely transpiled without relying
  // on other imports
  "isolatedModules": false
  exclude: ["node_modules", "dist"]

Automatic Type Injection

In order to handle the multiple import capabilities such as import() of JavaScript modules and file assets, Extension injects a extension.d.ts file at the root of your project folder.

TypeScript Extension Type Definition


Ensure the extension.d.ts file is added to your .gitignore file as it is auto-generated and only useful during development mode.

tsconfig.json Overrides

Extension applies some defaults to your extension tsconfig.json file. The options below overrides any user-defined rules.

  "compilerOptions": {
    // Generate source maps for debugging. False during production.
    "sourceMap": true,
    // Skip type checking of all declaration files (*.d.ts)
    "skipLibCheck": true,
    // Whether to embed the source map content in the .js files.
    "inlineSourceMap": false,
    // Generates a source map for .d.ts files which map back to the
    // original .ts source file.
    "declarationMap": false,
    // Do not emit compiler output files like JavaScript source code,
    // source-maps or declarations.
    "noEmit": true,
    // Tells TypeScript to save information about the project graph
    // from the last compilation to files stored on disk.
    "incremental": true,
    // This setting lets you specify a file for storing incremental
    // compilation information as a part of composite projects which
    // enables faster building of larger TypeScript codebases.
    "tsBuildInfoFile": "./node_modules/.cache/tsbuildinfo"
  "exclude": ["node_modules", "dist"]

Next Steps

  • Learn how Extension works with extensions using CSS Pre-Processors.
  • Learn how Extension works with extensions using React.

🧩 Extension • create cross-browser extensions with no build configuration.