Docs
Blog
Docs
Blog

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

npm
pnpm
yarn
npx extension@latest create my-extension --template=typescript

Usage With An Existing Extension

Installation

  1. Install TypeScript as a devDependency:
npm
yarn
pnpm
bun
npm install -D typescript
  1. Generates the TypeScript config file tsconfig.json:
npm
yarn
pnpm
bun
npm 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.