How to use Typescript with the Lightning Component Framework

Charlie Jonas
Apr 11, 2018 · 2 min read

Updated with a more complete answer.

https://developer.salesforce.com/blogs/developer-relations/2015/02/lightning-components-sample-app-belgian-beer.html

I’ve recently seen a couple people asking if typescript can be used in Salesforce’s lightning component framework.

The short answer is: YES

Since typescript just compiles down to javascript, there is no reason why it can’t be used.

To prove it, I ported the Belgium Beer App over to a typescript project.

The workflow is very simple:

  1. Transpile the typescript into a dist folder and bring over everything except the .ts files. Note that in our tsconfig.json we set the target to es5. Salesforce doesn't officially support es6 at the time of writing this.
  2. deploy the dist folder to Salesforce using the metadata api

You could take this a step further by setting up a dx project and having it build on save.

The Long answer is: MEH

Limited Typings

Since there are no typings for the Aura API (I submitted an issue; please up-vote), the typed benefits are limited to your own code.

As an example, I added a few API types totypings.d.ts and also typed some of the BeerList component.

No Source Maps

An important feature of typescript (and other transpiled workflows) is source maps. Source-maps allow your debugger to translate the transpiled code back to the original source when debugging.

Unfortunately source maps don’t work on Salesforce for two reasons:

  1. Salesforce strips away all comments from your deployed code before it is served as a lightening component. The inline source-maps are essentially just a comment at the bottom of the file and thus get removed.
  2. Even if the source maps weren’t removed, individual component files (helper, controller, etc) you send to Salesforce gets merged into a single “component” javascript file. Thus even if our source-maps were included, they would be off.

Example:

Our Transpiled beerListHelper.js:

Served component: /c/components/c/BeerList.js

As you can see, the beerListHelpe.js has been combined with the beerListController.js into a single component file.

Conclusion

While it is absolutely possible to write lightening components in typescript, the benefits are limited due to lack of typings. While a typescript codebase will certainly be more stable and resilient, without source maps, debugging will be more challenging.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store