TypeScript による LWC 開発(Developer Preview)を試してみた

最新情報というには少し時間が経ってしまいましたが、Winter '25 で Developer Preview となった LWC の　TypeScript 対応について、（現状の制限なども踏まえつつ）紹介してみようと思います。
既存の LWC の TypeScript 化も可能でますが、今回はわかりやすいように新規プロジェクトを作成するところから使い方を見ていきましょう。

TypeScript を実際に使ってみる

1. プロジェクトの準備

新規 SFDX プロジェクトを作成する

ターミナルで以下を実行し、新規プロジェクトを作成します。

# SFDX プロジェクトを作成
sf project generate --name my-lwc-project
cd my-lwc-project

TypeScript を有効化する

SFDX プロジェクトに対し TypeScript を使った開発を始めるために、必要なパッケージのインストールと設定ファイルを作成します。以下のコマンドで進めます。

# 必須パッケージをインストール
npm install --save-dev @salesforce/lightning-types lwc
npm install --save-dev typescript

# 空の設定ファイルを規定のディレクトリに作成
mkdir types 
touch types/salesforce.d.ts
touch force-app/main/default/lwc/tsconfig.json

次に、作成した2つの設定ファイルの中に以下の内容を、それぞれ記述します。

types/salesforce.d.ts

import "@salesforce/lightning-types";
// インポートされる型のリストは以下を参照
// https://www.npmjs.com/package/@salesforce/lightning-types

force-app/main/default/lwc/tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "moduleResolution": "node",
    "experimentalDecorators": false,
    "baseUrl": ".",
    "paths": {
      "c/*": ["*"]
    }
  },
  "include": ["**/*.ts", "../../../../types/salesforce.d.ts"],
  "exclude": ["**/__tests__/**"]
}

2. LWC を作成

準備ができたので、早速 TypeScript を使って LWC を作成してみましょう。
まずは、以下のコマンドで基本的な LWC の雛形を作成し、デフォルトで作成される JS ファイルを TS ファイルに置き換えます。

# LWCコンポーネントを作成
sf lightning generate component --type lwc --name hello --output-dir force-app/main/default/lwc

# JS ファイルを　TS ファイルに置き換え
mv force-app/main/default/lwc/hello/hello.js force-app/main/default/lwc/hello/hello.ts

LWCの各ファイルは、それぞれ以下のように書き換えてください。

force-app/main/default/lwc/hello/hello.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__RecordPage</target>
    <target>lightning__AppPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

force-app/main/default/lwc/hello/hello.html

<template>
  <lightning-card title="LWC × TypeScript">
    <div class="slds-p-around_small">
      <p>{message}</p>
      <lightning-button variant="brand" label={label} onclick={handleClick}></lightning-button>
    </div>
  </lightning-card>
</template>

force-app/main/default/lwc/hello/hello.ts

import { LightningElement, api } from "lwc";

export default class Hello extends LightningElement {
  // @ts-ignore
  @api label: string = "Click me";

  count: number = 0;

  handleClick(_evt: MouseEvent): void {
    this.count++;
  }

  get message(): string {
    return `Clicked ${this.count} time${this.count === 1 ? "" : "s"}`;
  }
}

3. ビルドとデプロイ

ここまで完了したら、以下のコマンドで作成した LWC をビルドし、組織にデプロイしてみましょう。

# 適当なデプロイ先組織を認証する
sf org login web --set-default --alias=lwc-ts-deploy-org

# TS ファイルをビルドする
npx tsc -p force-app/main/default/lwc

# LWC を組織にデプロイする
sf project deploy start --source-dir force-app

無事デプロイが完了したら、組織にログインして確認します。
適当なページにコンポーネントを配置して、動作を確認してください。
ボタンを押しす度に、カウントが増えていればOKです。

制限・考慮事項

LWC で TypeScript を使った開発を行う際に気をつけるポイントがいくつかあります。

1. デコレータ利用時のエラー

• Developer Preview 時点での制約として、デコレータ（api や track など）の使用時に TypeScript エラーが出ます。
• 対策としては、各デコレータ直前に // @ts-ignore を付与して対応する必要があります。

2. TS ファイルは自動でビルドされない

• 通常のデプロイコマンドでは　TS ファイルは自動でビルドされません。
• デプロイ前にかならず tsc コマンドで JS ファイルにビルドしてください。
• 自動でビルドとデプロイを実行するスクリプトを書いておくといいかもしれません。

package.json

{
  ...,
  "scripts": {
    ...,
    "build:ts": "tsc -p force-app/main/default/lwc",
    "deploy": "sf project deploy start --source-dir force-app",
    "deploy:ts": "npm run build:ts && npm run deploy"
  }
}

3. TS ファイルはSalesforce組織上に保管されない

• TSファイルはJSファイルのように組織上にデプロイ、保存されません。ご自身の責任で管理保管してください。

所感・感想

LWC 開発 においても TypeScript が使えるようになる兆しが見てきた一方で、すべてのデコレータに// @ts-ignoreの記述が必要だったり、変更の度に手動で再ビルドする必要があったりと、GA（正式リリース）まではまだしばらくかかりそうな印象でした。
私自身も今回の動作検証まで、TypeScript を使った LWC 開発には手を出していなかったのですが、引き続き今後の動向は注視していきたいと思います。