How to Set Up and Use TypeScript for HubSpot UI Extensions?

[MAsghari]

Hi,

I’ve been working on HubSpot UI Extensions and am curious about using TypeScript instead of JavaScript. While the official documentation focuses on JavaScript, I’d like to switch to TypeScript for the added benefits of type safety and improved tooling.

Has anyone successfully set up a UI Extension with TypeScript? If so, could you share the best approach to configuring TypeScript with HubSpot? Specifically, I’m looking for guidance on:

1. Initial project setup with TypeScript.
2. Necessary TypeScript configuration (tsconfig.json) for a React-based UI Extension.
3. Steps for transpiling TypeScript to JavaScript and deploying the final output to HubSpot.

Any tips or best practices would be greatly appreciated!

Thanks in advance!

[SBussey]

Hello, I was playing around with this and did the following:

• Renamed MyCard.jsx to MyCard.tsx
• Installed the package dependencies (normally do not need to)
• Uploaded to HubSpot

It very happily accepted the tsx file, and I've been developing on it without issues, and I have full type support in it. I was surprised that it didn't complain, and I'd guess they're stripping off (ignoring) the TypeScript annotations and turning it into regular JavaScript?

The @hubspot/ui-extensions has full TypeScript bindings, so it's all supported out of the box.

[MAsghari]

Thanks for your answer,

Did you also manage for the "serverless" functions? or only jsx files?

[SBussey]

I'm only working with public app UI extensions—no serverless functions there.

[Jaycee_Lewis]

Hi, @MAsghari 👋 Thanks for your question. It's a bit of a challenge to find other related posts for this topic. I'd like to invite some of our brilliant community members to the conversation — hey @zach_threadint @JBeatty @keurcien, do you have any recent experience you can share with @MAsghari?

Thank you very much for taking a look! — Jaycee

[MAsghari]

Hi @Jaycee_Lewis 

Anyone to check this question. It is quite important for me! 

Thanks

[dsmarion]

I am currently learning about creating App Cards and up until now I have only been using JSX and no TypeScipt.  I personally know nothing about developing with TypeScript but it is on my task list to tackle very soon.  That all being said, the HS ui-extension samples on github have several that are written with TypeScript so if you already know about using it, these should help.  I believe after reviewing briefly about TypeScript that HS has incorporated all the setup inside @hubspot/ui-extensions as @SBussey stated earlier.  Here is one example from the HS samples - but there are others as well there that use TypeScript  https://github.com/HubSpot/ui-extensions-examples/tree/main/duplicate-contact

[FOman]

This makes a lot of sense, although when implementing it doesn't seem to work. So I following that github repo, and installed the typescript dependency (as it was missing).

The good is that `hs project dev` worked fine. But when running `hs project upload` it gives me problems. Unfortunately the trace logs gives no details, just that "Unable to initialize extension"

@SBussey when you implemented this, did you use `hs project upload`? Also could you clarify which dependencies you installed please. Thanks!

[FOman · Accepted solution]

I was able to resolve this, seems the problem was that after changing to typescript the props validation wasn't working. Not sure why, but removing it fixed the problem. I feel more logs would on why a module could not be loaded would be very useful. Is there a way to mkae a feature request for this?

[Jaycee_Lewis]

Hey, @FOman You can create a post in the Ideas community — Jaycee