🧩 Extension

TypeScript

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
Tip

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

Usage With An Existing Extension

Installation 

# install TypeScript as a devDependency
npm install -D typescript

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

npx tsc --init

Configuration

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

Tip

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.