How to use Typescript with the Lightning Component Framework
Updated with a more complete answer.
I’ve recently seen a couple people asking if typescript can be used in Salesforce’s lightning component framework.
The short answer is: YES
To prove it, I ported the Belgium Beer App over to a typescript project.
The workflow is very simple:
- Transpile the typescript into a
distfolder and bring over everything except the
.tsfiles. Note that in our
tsconfig.jsonwe set the target to
es5. Salesforce doesn't officially support
es6at the time of writing this.
- deploy the
distfolder 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
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:
- 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.
As you can see, the
beerListHelpe.js has been combined with the
beerListController.js into a single component file.
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.