Maintain Your JavaScript Developer Certification for Summer ’25

Learning Objectives

After completing this unit, you’ll be able to:

• Describe how to integrate TypeScript into Lightning web components.
  
• Set up and use Local Development to preview Lightning web components in real time.
  
• Demonstrate how to use array and object syntax to dynamically bind CSS classes in Lightning web components.
  

Maintain Your Certification

If you hold the JavaScript Developer certification, keep in mind that you need to complete this module by the due date to maintain it.

Interested in learning more about getting certified? Check out the JavaScript Developer certification.

While anyone can earn this badge, this module is designed for those who hold the JavaScript Developer certification.

Protect the Integrity of Your Certification

The quality of our certification exams and the value that they provide are our highest priority. Protecting the security and confidentiality of our exams is essential to providing our customers with certifications that are respected and industry-leading.

As a participant of the Salesforce Certification Program, you’re required to accept the terms of the Salesforce Certification Program Agreement. Please review the Salesforce certification exam-taking policies in the Salesforce Certification Program Agreement and Code of Conduct Trailhead Help article for more details.

Salesforce introduced great feature enhancements over the past year. Take a look at some of the more important ones.

Develop Lightning Web Components with TypeScript (Developer Preview)

As of Winter ’25, you can use the Salesforce official TypeScript type definitions (@salesforce/lightning-types) with TypeScript version 5.4.5 to build Lightning web components in Developer Preview.

TypeScript is a superset of JavaScript that enhances developer productivity and code quality through features like build-time type checking, which helps identify errors early and improve code reliability. When used in development environments such as Visual Studio Code (VS Code), TypeScript also enables you to use powerful tools like type-based auto-completion and static analysis for better code discoverability. Additional benefits include stronger type safety and easier long-term code maintenance.

This feature is in Developer Preview and not yet generally available. Commands, APIs, and features may change or be deprecated without notice. TypeScript code is only stored locally and cannot be verified via Trailhead hands-on challenges.

Considerations

When integrating TypeScript into your Lightning web components (LWCs) project, keep in mind several important considerations and limitations.

First of all, you’re fully responsible for managing your project's TypeScript version and configuration, including updating the compiler as needed. Refer to the TypeScript documentation for release updates. Since TypeScript code isn’t stored or deployable on the Salesforce Platform, we recommend that you use a source control system like Git to manage your code.

Additionally, the Salesforce VS Code extension includes LWC types by default, but these are not compatible with disabling the experimentalDecorators setting. Although this setting must remain enabled, it will trigger TypeScript errors when using decorators. To work around this, add // @ts-ignoreor // @ts-expect-error directly above any line using a decorator.

Get Started with TypeScript in LWCs

Before you begin, make sure that you’re already using the Visual Studio (VS) Code Salesforce Extension Pack. If you aren’t using VS Code, manually install these Node Package Manager (npm) packages in your project.

• @salesforce/lightning-types
  
• lwc
  

To start using type definitions in your LWC project, you need to enable TypeScript support, add the appropriate TypeScript package, and compile your TypeScript components into JavaScript. You can also explore the full list of available Salesforce types by referring to the Salesforce Lightning Types package.

TypeScript support for LWCs offers enhanced code safety, developer productivity, and improved maintenance. While in Developer Preview, it’s a great time to explore and provide feedback, but avoid using it for production-critical code until Salesforce announces general availability.

Add TypeScript Support to Your LWC Project

You can now write Lightning web components using TypeScript, giving you the benefits of static typing, better editor tooling, and improved developer productivity. Before you can start building with TypeScript, you need to enable TypeScript support in your project and configure it correctly.

Step 1: Enable TypeScript Support in VS Code

To get started, update your workspace settings in Visual Studio Code.

1. Open or create a .vscode/settings.json file in your project.
   
2. Add the following setting to enable the TypeScript support preview:
   

{
  "salesforcedx-vscode-lwc.preview.typeScriptSupport": true
}

Once you save the file, a tsconfig.json file is automatically created in your lwc folder (or the folder containing your components). If it doesn't appear right away, try restarting VS Code.

TypeScript’s experimentalDecorators setting is no longer supported in LWC projects. Set it to false or remove the option entirely from tsconfig.json.

Step 2: Configure the TypeScript Compiler

In the generated tsconfig.json file, ensure the compilerOptions section includes the correct configuration:

{
  "extends": "../../../../.sfdx/tsconfig.sfdx.json",
  "include": [
    "**/*.ts",
    "../../../../.sfdx/typings/lwc/**/*.d.ts"
  ],
  "exclude": [
    "**/__tests__/**"
  ],
  "compilerOptions": {
    "experimentalDecorators": false
  }
}

Step 3: Install TypeScript and Lightning Types

Add the TypeScript compiler and Lightning type definitions to your project:

npm install typescript --save-dev
npm install --save-dev @salesforce/lightning-types

To use the type definitions from the @salesforce/lightning-types package, create a salesforce.d.ts file under a types/ folder in your project.

// types/salesforce.d.ts
import "@salesforce/lightning-types";

Then, reference this file in your tsconfig.json.

"include": [
  "**/*.ts",
  "../../../../.sfdx/typings/lwc/**/*.d.ts",
  "../../../../types/salesforce.d.ts",
  "**/*.d.ts"
],
"compilerOptions": {
  "paths": {
    "c/myComponent": ["./src/modules/myComponent/myComponent.ts"]
  }
}

Step 4: Convert and Compile Components

To convert a JavaScript component to TypeScript:

1. Rename the component's .js file to .ts.
   
2. Run the TypeScript compiler from the command line.
   

npx tsc --project ./path/to/lwc

The compiler generates .js files that can be deployed to the Salesforce Platform. The .ts files remain in your local project or source control.

You can now use TypeScript to build safer, more scalable Lightning web components. In upcoming sections, you learn how to write strongly-typed components using the Lightning base component type definitions and TypeScript best practices.

Develop Lightning Web Components Faster in a Real-Time Preview—GA for Lightning Experience Apps

With Local Development (Local Dev), you can preview your Lightning web components instantly in a browser as you save changes—no need to deploy or refresh pages. This real-time preview accelerates your development process for Lightning apps and Experience Cloud Lightning Web Runtime (LWR) sites.

To enable Local Dev for an org, make sure that you enable View Setup and Customize Application permissions.

Where Is Local Dev Supported?

Local Dev is supported in the following environments.

Limitations and Considerations

Local Dev for Lightning web components supports only LWCs—not Aura components—and doesn't allow previews of landing pages.

Single-component previews are limited to simple components that don’t use wire adapters or platform modules. On the plus side, Local Dev no longer saves builds as static resources, so it won’t affect your org’s static resource limits.

To test your Lightning app in mobile environments, you can run Local Dev with iOS simulators or Android emulators. Mac users need to install Xcode and download iOS simulators, while Android testing requires Android Studio. Once your tools are set up, use the CLI commands sf lightning dev app --device-type ios or --device-type android to launch the appropriate environment.

There’s no need to manually install the Salesforce mobile app. Local Dev prompts you to install it if needed. For step-by-step setup instructions, check out the Mobile and Offline Developer Guide or complete the Trailhead project Set Up Your Salesforce Mobile Developer Tools for Lightning Web Components.

Get Started

Before you can run a real-time preview of your app or site, you need to set up Local Dev by completing a few setup steps.

1. First, install the Salesforce Command Line Interface (CLI), as this feature is currently available only through the CLI.
   
2. Next, install the Local Dev plugin.
   
3. Then, enable Local Dev for your project.
   

For full setup instructions and command examples, refer to the official Salesforce documentation.

Local Dev gives developers a faster, more flexible way to build and test Lightning web components across desktop and mobile environments. Whether you're working on Lightning Experience apps or Experience Cloud LWR sites, real-time previews streamline your workflow and reduce the need for repeated deployments. To make the most of Local Dev, be sure to review the complete setup steps, supported environments, and known limitations. Ready to speed up your development process? Dive into the Salesforce documentation to get started.

Bind HTML Classes with Object or Array Syntax

You can easily manage a component or element’s CSS classes by using the class attribute. Instead of manually concatenating class names in a string, use class object or array binding to apply complex styles more cleanly.

Let’s review an example of binding multiple classes using an array or object that allows for dynamic styling based on conditions. Starting with LWC API v62.0 (LWC OSS v7.0.0), you can bind multiple classes to an element using either an array or an object.

• Array binding: Each item is treated as a separate class name. For example, ["highlight", "yellow"] results in class="highlight yellow".
  
• Object binding: Keys with truthy values are applied as class names. For example, { highlight: true, hidden: false } results in class="highlight".
  

In this version, values like Booleans, numbers, and functions are removed instead of converted to strings. For instance, passing true, false, or 10 directly results in an empty class string. To include them as class names (like "false" or "1"), convert the value using String(value).

Class Binding Examples

These examples show the differences between LWC API v62.0 and previous versions.

Behavior prior to v62.0 differed—Booleans, numbers, and other non-string types were handled differently.

Example

<template>
  <div class={computedClassNames}>Evaluate some classes here</div>
</template>

export default class extends LightningElement {
  position = "left";
  fullWidth = true;
  hidden = false;


  get computedClassNames() {
    return [
      "div__block",
      this.position && `div_${this.position}`,
      {
        "div_full-width": this.fullWidth,
        hidden: this.hidden
      }
    ];
  }
}

This renders:

<div class="div__block div_left div_full-width">Evaluate some classes here</div>

Sum It Up

You’ve explored key updates to Lightning web components development, including how to integrate TypeScript, use Local Development for real-time previews, and apply dynamic class bindings with object and array syntax. These enhancements can help you write safer, more maintainable code, and speed up your development workflow. For setup steps and further details, refer to the official Salesforce documentation in the Resources section.

Next, get hands-on with HTML class binding.

Resources

• Salesforce Developer: TypeScript Type Definitions for LWC (Developer Preview)
• Salesforce Developer: Preview Components with Local Dev
• Salesforce Developer: Bind HTML Classes