Salesforce Summer '25 新特性：TypeScript 支持和本地开发预览

Salesforce Summer '25 版本带来了两个重要的开发者功能预览：LWC 对 TypeScript 的支持和本地开发实时预览功能的增强。

一、LWC TypeScript 支持（开发者预览）

核心优势

静态类型检查提高代码质量
更好的代码提示和自动补全
提升大型项目的可维护性

重要说明

当前处于开发者预览阶段，无法用于生产环境
TypeScript 代码只能在本地运行，无法直接部署到 Salesforce
必须使用 Git 等版本控制工具管理源代码

配置步骤

在 .vscode/settings.json 中启用支持：

JSON 复制代码

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

配置 tsconfig.json：

JSON 复制代码

{
  "compilerOptions": {
    "experimentalDecorators": false,
    "paths": {
      "c/yourComponent": ["/yourComponent/yourComponent.ts"]
    }
  }
}

3. 安装必要依赖：

BASH 复制代码

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

创建 types/salesforce.d.ts 文件：

TYPESCRIPT 复制代码

import "@salesforce/lightning-types";

5. 将 .js 文件重命名为 .ts，然后编译：

BASH 复制代码

npx tsc --project force-app\main\default\lwc

注意事项

LWC 装饰器（@api, @track 等）目前会引发 TypeScript 错误，需要在每行前添加：

TYPESCRIPT 复制代码

// @ts-ignore
@api propertyName;

二、本地开发实时预览增强

支持场景

Lightning Experience 应用（正式版，Spring '25+）
Experience Cloud LWR 站点（公测版）
单组件预览（测试版，Summer '25）

使用方法

安装必要工具：

BASH 复制代码

npm install @salesforce/cli -g
sf plugins install @salesforce/plugin-lightning-dev@latest

启动本地预览：

BASH 复制代码

sf lightning dev app

支持的测试环境

支持 iOS 模拟器和 Android 模拟器
需要预先安装 Xcode 或 Android Studio

限制条件

仅支持 LWC，不支持 Aura 组件
不支持预览着陆页
单组件预览功能有限

三、HTML Class 绑定语法改进（LWC API v62.0）

从 v62.0 开始，class 绑定的行为有重要变更：

数组绑定

JAVASCRIPT 复制代码

// 输入: ["note", "highlight"]
// v62.0 输出: class="note highlight"
// v61.0 输出: class="note,highlight"

对象绑定

JAVASCRIPT 复制代码

// 输入: {block: true, hidden: false}
// v62.0 输出: class="block"
// v61.0 输出: class="[object Object]"

非字符串值处理

JAVASCRIPT 复制代码

// 输入: false, 10, () => {}
// v62.0 输出: class="" (被忽略)
// v61.0 输出: class="false", class="10" 等

实际示例

html 复制代码

<template>
  <div class={computedClassNames}>Content here</div>
</template>

JAVASCRIPT 复制代码

export default class MyComponent 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
      }
    ];
  }
}
// 输出: <div class="div__block div_left div_full-width">...</div>

总结

这些新功能虽然还在预览阶段，但展示了 Salesforce 在开发者体验方面的持续改进。建议开发者可以开始尝试这些功能，为未来的正式版本做好准备。