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:

Go to your app's Settings and click Enable TypeScript to generate a tsconfig.json file for your app.
Modify your file types from .js/.jsx/.mjs to .ts/.tsx/.mts. Don't forget the vite.config.mjs file at your project root!
Fix any type issues in your app.
(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.

Default `tsconfig.json`

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

Default tsconfig.json

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:

Delete your tsconfig.json file.
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.

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

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 .

ActionRun and ActionOnSuccess dynamic types

Forgelivo 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 Forgelivo generates for you. They allow you to modify the names of your actions without having to worry about updating type definitions.

example of a run function with ActionRun

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, to build locally.

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

Importing Forgelivo-generated types

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

web/routes/index.jsx

React (TypeScript)

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