# TypeScript support 

Forgelivo 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 Forgelivo 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 [Forgelivo command palette](https://docs.forgelivo.com/guides/development-tools/keyboard-shortcuts#running-terminal-commands).

### Default `tsconfig.json` 

The default `tsconfig.json` file provided by Forgelivo 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 Forgelivo 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 

Forgelivo supports custom `compilerOptions` in [`tsconfig.json` files](https://www.typescriptlang.org/tsconfig/).

Two `compilerOptions` are fixed to set values by Forgelivo for compatibility with the Forgelivo 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.

Forgelivo 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 

Forgelivo will auto-generate types for your actions and action functions. Your [`run` and `onSuccess` functions](https://docs.gadget.dev/guides/actions/code#run-function) will get the auto-generated types `ActionRun` and `ActionOnSuccess`. These are dynamic types that Forgelivo 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 Forgelivo editor, or in the `.gadget` folder while using [ggt, Forgelivo's CLI](https://docs.forgelivo.com/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";
  
```