Introducing TypeScript support!

By popular demand, we’ve released official TypeScript support in Lightning Core 2.7.0 and Lightning SDK 5.1.0! We’ve added extensive types as well as in-code documentation to the most frequently used classes, methods and structures used to build Lightning Apps. This support also includes a full type system for building strongly typed components that enables strongly typed/deep use of patching,tag(), animations, transitions, signals, event emitters,fireAncestorsand more. Certain structures may be augmented as well by your application for extra flexibility.

What is TypeScript?

If you’re not familiar, TypeScript is a strongly typed programming language that is built on top of JavaScript. Think JavaScript with syntax that describes what type (string, number, boolean, object, etc) every variable should be. TypeScript compiles down to JavaScript so it can be used in any environment that supports JavaScript. Using TypeScript along with an IDE like VSCode gives developers realtime feedback as they write code in the form of warnings, errors, auto-complete, documentation pop-ups, and more. This means more errors can be caught/prevented at development time rather than during runtime. The code that is written is also much more self-documented and easier to refactor which can help new developers get up to speed faster on how an application works, especially if its a large scale application. Take a look a TypeScript’s website for more information.

How to use?

Lightning CLI

For those using Lightning CLI to build their apps, TypeScript compilation support is available as ofv2.8.0. Lightning CLI is automatically configured to detect.tsfiles and will transpile them to JavasScript in the resultant bundle. You will need to supply a tsconfig.json (LINK to tsconfig file example) file at the root of your project’s repository to get the full type checking features from your IDE.

Note: Lightning CLI does NOT do any type checking. Developers will need to rely on feedback from their IDE about errors and/or run the TypeScript compiler manually to check for errors. You can add the following script to your project’s package.json to make this easier (and for use in automation):

{ "scripts": { "check": "tsc --noEmit", } }

As of Lightning CLI v2.9.0 you can use thelng create command to create a new TypeScript boilerplate project to make getting started with a new TypeScript Lightning application a snap. Simply answer ‘Yes’ when asked if you want to use TypeScript.

Webpack / Parcel / etc

If you’re using another bundler like Webpack, parcel, or something else, you can reference the following resources for how to set up TypeScript in your projects:

Writing Lightning with TypeScript

See our TypeScript documentation (Core / SDK) for a walk-thru on creating new Lightning components/apps in TypeScript as well as other gotchas and guidelines.

Demo App

We’ve converted our fully functional TMDB demo app to TypeScript for you to play with and reference while building your own Lightning apps in TypeScript.

Questions / Issues

We hope you (and your teams) find these types and the accompanying documentation useful. Let us know via our forums or GitHub if you have any questions or run into any bugs.

Happy typing!