How to use Typescript with the Lightning Component Framework

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.