TLDR: TypeScript is now supported out of the box for all Gadget apps!

‍

Whether you’re starting a new app, or want to migrate one of your existing JavaScript apps to TypeScript, you can now get all the benefits of a strongly typed language along with Gadget’s hosted and scaled full-stack app framework.

Keep bugs out of production, as TypeScript helps by enforcing type-safety at compile time. While your projects scale and you start to collaborate with additional developers, types help with refactoring and extending existing code. With documented types throughout a project, your team can quickly onboard and get up to speed, making it even easier to build and scale large SaaS applications when building with Gadget.

TypeScript also comes with rich IDE support — including the upgraded Gadget editor, which is now powered by CodeMirror. With this change, the Gadget editor will highlight type errors as you write code, and list all type errors in your environment’s problems drawer.

‍

A tsconfig.json for every app

With this release, you have the choice to work in either TypeScript or JavaScript when you create a new Gadget app. All of your auto-generated CRUD actions will be created as <inline-code>.ts<inline-code> files and any new models, actions, or routes added to your app will also be TypeScript files.

And, of course, all of your Gadget documentation will be generated in the programming language of your choice, including your app’s auto-generated API docs.

Every TypeScript app will have a <inline-code>tsconfig.json<inline-code> file you can use to manage TypeScript settings for your app. Gadget supports custom <inline-code>compilerOptions<inline-code> in <inline-code>tsconfig.json<inline-code> files, with exceptions for <inline-code>compilerOptions.incremental<inline-code> and <inline-code>compilerOptions.noEmit<inline-code> which are set to fixed values. Other <inline-code>tsconfig<inline-code> options are not supported, such as <inline-code>include<inline-code>, <inline-code>exclude<inline-code>, <inline-code>files<inline-code>, <inline-code>references<inline-code>, and <inline-code>extends<inline-code>. For more information on supported <inline-code>tsconfig.json<inline-code> options, read our documentation.

With TypeScript, your app’s frontend will have <inline-code>.tsx<inline-code> files, allowing you to build delightful and type-safe frontend experiences with the React frontend that comes included in every Gadget app. Gadget’s Remix starter app also supports TypeScript, so you can build type-safe SPA or SSR apps.

‍

Migrate from JavaScript to TypeScript

It’s also easy to migrate your existing Gadget apps to TypeScript.

Your Gadget app already has all the required TypeScript dependencies installed. You just need to go to your app’s Settings page and Enable TypeScript to add a <inline-code>tsconfig.json<inline-code> file to your app.

‍

The default <inline-code>tsconfig.json<inline-code> file for your project will look like this.

Once you’ve added that file, you’ll need to change all your file extensions from <inline-code>.js/.jsx<inline-code> to <inline-code>.ts/.tsx<inline-code> and you are ready to build in TypeScript.

You can also install any additional type dependencies you might need for your app, for example, <inline-code>@types/lodash<inline-code> if you are working with <inline-code>lodash<inline-code>.

‍

A lint-y fresh Gadget editor

Upgrading the Gadget editor to use CodeMirror also means that you get better auto-complete support (especially with TypeScript), better tooltips on hover, and built-in dependency and code file navigation.

We have also shipped a new Gadget framework linter to let you know when something doesn’t look quite right in your project. Gadget’s lint rules should speed up your development process, reduce bugs, and make it easier for new developers to onboard to Gadget! Additional rules will be added over time, keep an eye on our changelog for updates.

‍

If you have any questions or feedback about building with TypeScript in Gadget, you can share and connect with other developers in our Discord community.