# 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](https://docs.gadget-canary.xyz/guides/development-tools/keyboard-shortcuts#running-terminal-commands).

### Default `tsconfig.json` 

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

```json

  {
    "compilerOptions": {
      "strict": true,
      "esModuleInterop": true,
      "allowJs": true,
      "noImplicitAny": true,
      "sourceMap": true,
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "forceConsistentCasingInFileNames": true,
      "target": "es2020",
      "lib": [
        "es2020",
        "DOM"
      ],
      "skipLibCheck": true,
      "jsx": "react-jsx",
      "moduleResolution": "node",
      "resolveJsonModule": true,
    }
  }
  
```

### 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](https://www.typescriptlang.org/tsconfig/).

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

*   [`compilerOptions.incremental`](https://www.typescriptlang.org/tsconfig/#incremental) is fixed to `false`
*   [`compilerOptions.noEmit`](https://www.typescriptlang.org/tsconfig/#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.

Gadget web editor generally supports all `tsconfig` options, but some options may only apply to local development. If you find that you're running into any issues, please don't hesitate to reach out in the [Discord](https://ggt.link/discord).

## ActionRun and ActionOnSuccess dynamic types 

Gadget will auto-generate types for your actions and action functions. Your [`run` and `onSuccess` functions](https://docs.gadget-canary.xyz/guides/actions/code#run-function) 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.

```typescript

  // ActionRun is defined dynamically
  export const run: ActionRun = async ({ params, record, logger, api, connections }) => {
    applyParams(params, record);
    await save(record);
  };
  
```

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](https://docs.gadget-canary.xyz/guides/development-tools/cli), to build locally.

It is not possible to use `ActionRun` and `ActionOnSuccess` outside of actions.

## 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:

```tsx

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