TypeScript support 

Gadget comes with support for TypeScript and gives you all the benefits of working with a strongly typed language as you build and scale your app.

You can enable TypeScript support when creating a new Gadget app to get a set up and configured full stack TypeScript app.

Migrating from JavaScript to TypeScript 

JavaScript apps will already have all the default dependencies required to work in TypeScript.

To migrate an existing JavaScript app to TypeScript, you need to do the following:

1. Go to your app's Settings and click Enable TypeScript to generate a tsconfig.json file for your app.
2. Modify your file types from .js/.jsx/.mjs to .ts/.tsx/.mts. Don't forget the vite.config.mjs file at your project root!
3. Fix any type issues in your app.
4. (Optional) Install types for any libraries you are using, for example, @types/lodash if you are using lodash in your app. You can install dependencies using the Gadget command palette.

Default tsconfig.json 

The default tsconfig.json file provided by Gadget is available here:

1{
2  "compilerOptions": {
3    "strict": true,
4    "esModuleInterop": true,
5    "allowJs": true,
6    "noImplicitAny": true,
7    "sourceMap": true,
8    "experimentalDecorators": true,
9    "emitDecoratorMetadata": true,
10    "forceConsistentCasingInFileNames": true,
11    "target": "es2020",
12    "lib": ["es2020", "DOM"],
13    "skipLibCheck": true,
14    "jsx": "react-jsx",
15    "moduleResolution": "node",
16    "resolveJsonModule": true,
17    "baseUrl": "/"
18  }
19}

Disable TypeScript 

If you want to disable TypeScript in your Gadget project, you can:

1. Delete your tsconfig.json file.
2. Modify your file types from .ts/.tsx/.mts to .js/.jsx/.mjs. Don't forget the vite.config.mts file at your project root!

Supported tsconfig options 

Gadget supports custom compilerOptions in tsconfig.json files.

Two compilerOptions are fixed to set values by Gadget for compatibility with the Gadget editor:

• compilerOptions.incremental is fixed to false
• compilerOptions.noEmit is fixed to true

These options can be changed when building locally and your app can still be built and deployed if they have been changed.

Any other compilerOption can be configured for your application.

Unsupported tsconfig options 

The following tsconfig.json options are unavailable for use in the Gadget editor:

• include
• exclude
• files
• references
• extends

ActionRun and ActionOnSuccess dynamic types 

Gadget will auto-generate types for your actions and action functions. Your run and onSuccess functions will get the auto-generated types ActionRun and ActionOnSuccess. These are dynamic types that Gadget generates for you. They allow you to modify the names of your actions without having to worry about updating type definitions.

1// ActionRun is defined dynamically
2export const run: ActionRun = async ({
3  params,
4  record,
5  logger,
6  api,
7  connections,
8}) => {
9  applyParams(params, record);
10  await save(record);
11};

These types are generated into the ActionContextTypes.d.ts file, which then maps the existing action context type to the action file path. The ActionContextTypes.d.ts file is visible by drilling down into the ActionRun or ActionOnSuccess types in your Gadget editor, or in the .gadget folder while using ggt, Gadget's CLI, to build locally.

Importing Gadget-generated types 

Gadget auto-generates types as your build your models and actions.

You can import these types from your app's API client and use them to write backend logic or build frontends.

To import generated types:

// import a 'product' model type for use in the frontend
import type { Product } from "@gadget-client/my-app-slug";