TypeScript (TS) has been increasing in popularity over the last couple of years. Did you know that you can use TypeScript with Lightning Web Components (LWC), and that there are several other Salesforce products and features that support TypeScript, such as Salesforce Functions, Lightning Web Runtime, and more?
In this first post of a two-part series, we’ll cover what TypeScript is, how you can install and use it in your projects, and the different data types that you can create with TypeScript. In the second post, we’ll cover the various places where you can use TypeScript within the Salesforce ecosystem.
What is TypeScript?
Installing and compiling TypeScript
The TypeScript compiler is available as an npm package that can be installed in any of your projects. Once installed, you can start creating TypeScript files (
*.ts). The compiler compiles the
.ts files into standard
.js files. It can be configured to target a specific version of ECMAScript (ES5, ES6, etc.). You will need to add a new script to the
scripts section of the
package.json file to use the compiler.
jsconfig.json file can be used to control the behavior of TypeScript and the compiler in your project. Check out the documentation for various config options you can use.
Take this TypeScript code for example. It contains a
printValue function that logs a value that is sent to it. The type of the
val parameter is set to
string. This code snippet throws a compile-time error at Line 6 because we are trying to assign a boolean value to a string.
val parameter to only
string values. Hence, Line 6 would execute without any errors during run time.
--noEmitOnError flag (see docs) when running the compiler to prevent this from happening.
If you are using an editor with TypeScript plugins like VS Code, you needn’t always compile your files to find type errors. VS Code comes with built-in TypeScript support via the TypeScript language service, which shows suggestions and highlights errors as you finish typing. This is majorly helpful when trying to gradually adopt TypeScript into your projects.
Varying levels of strictness
*.js files to
//@ts-check at the beginning of the files that you want to check. If you want to check all the files in the project, you can add the properties
allowJs to either the
tsconfig.json file or pass them as flags to the compiler.
In the first two stages, TypeScript tries to infer data types based on your usage and point errors. If you are using VS Code, you can see the errors in the Problems tab even without running the compiler.
In the next stage, you can enforce types explicitly by specifying the data types of your variables via JSDoc constructs.
Once you are comfortable, you can start creating TypeScript files and take complete advantage of the type system.
Working with TypeScript
While the official TypeScript documentation provides a fairly detailed explanation, here is a quick summary of a few important concepts.
Types and interfaces
You can assign any of the standard data types to variables, input and output values for functions, etc. You can also use the special type
any whenever you don’t want a particular value to cause type-checking errors.
You can even combine two or more types and create a union type. Here is a simple example:
You can create a type alias to reuse a type definition in multiple places.
You can also define types for non-primitives like objects. There are multiple ways to define object types (i.e, the shape of an object). First, you can define them inline.
Second, you can create a type alias.
Finally, you can create an interface. The only difference between a type alias and an interface is that you can add new properties to an interface but not to a type alias.
It is common that you create functions or classes that can work with different data types, but using the
any type for those will not guarantee type safety. That’s where generics come into the picture. Generics allows you to pass types as arguments when calling a function or initializing a class, along with its values.
In the below example, we create a function
query that takes in a SOQL query as a parameter and returns the results. The type of the results is obviously based on the object we are querying. So, here is how generics can be used to make sure the
query function is type-safe.
You can see generics in action when you are building with Salesforce CLI plug-ins; we will cover this in Part 2 of this series.
const enums on the other hand, are completely removed during compilation.
TypeScript also allows you to declare Ambient Modules to specify the shapes of libraries not written in TypeScript. For example, here is a library (
When you import this library in a TypeScript file, you would get a type error. This is because, no type information is available for the module and its functions.
Here is a TypeScript ambient module for the
Checkout the ambient module declaration for the Lightning Web Components core module.
This post was just a glimpse into how you can use and gradually adopt TypeScript into your projects. You can dive deep into TypeScript using the below resources:
In the second post in this series, we will go over the various places where you can use TypeScript within the Salesforce ecosystem.
About the author
Aditya Naag Topalli is a 14x Certified Lead Developer Advocate at Salesforce. He empowers and inspires developers in and outside the Salesforce ecosystem through his videos, webinars, blog posts, and open source contributions, and he also frequently speaks at conferences and events all around the world. Follow him on Twitter or LinkedIn and check out his contributions on GitHub.