Zenn
Closed5

Lightning Web ComponentにJSのまま型をつけたい

Salesforce
ピン留めされたアイテム
Shingo YamazakiShingo Yamazaki

モチベーション

  • Lightning Web Component(以下 LWC)はTypeScriptをサポートしていない
  • きつい
  • TypeScript からコンパイルする独自のビルド環境を構築するというアプローチもあるが、ここではJSのまま型をつけるというアプローチを模索したい
  • 具体的には、JSDocを頑張ることでメソッドやフィールドに漸進的に型をつける方法を探求する

リンク

Shingo YamazakiShingo Yamazaki

// @ts-check
import { LightningElement, api } from 'lwc';

/**
 * A presentation component to display a Product__c sObject. The provided
 * Product__c data must contain all fields used by this component.
 */
export default class ProductTile extends LightningElement {
    /** Whether the tile is draggable. */
    @api draggable;

    _product;
    /** Product__c to display. */
    @api
    get product() {
        return this._product;
    }

Accessors are only available when targeting ECMAScript 5 and higher.ts(1056)

target がデフォルトは "es3" なので発生しているエラー？
https://stackoverflow.com/a/46722359
を読んだ感じだと特定のファイルを対象としている場合は tsconfig.json は無視され、かつ // @ts-check によるチェックはファイル指定と同じ挙動になるのか？

https://www.typescriptlang.org/ja/docs/handbook/intro-to-js-ts.html#ts-check
によると jsconfig.json は考慮してくれそうなので、 jsconfig.json に compileOptions.target を追加

Shingo YamazakiShingo Yamazaki

@type {import("..")} の import() 内のパス解決どうするの

現状 lwc 内にはデプロイしない余計なファイルを置くことができないので

force-app/
  main/
    default/
      lwc/
        productTile/
          productTile.js
          // types.ts <-- ほんとはこんなふうにコンポーネントと同じ階層に置きたい
typings/ <-- できないので force-app/ とは独立した適当なディレクトリを切ってそこに置く
  product.d.ts

このとき productTile.js 内で product.d.ts を読み込むには

export default class ProductTile extends LightningElement {
    /**
     * @type {import("typings/product").Product}
     * Product__c to display. */
    @api
    get product() {
        return this._product;
    }

とする。

ただし、相対パスでなく絶対パスでプロジェクトルートから指定する場合は target: es5 だとうまく動かない？？？

↓以下勘違い

このとき productTile.js 内で product.d.ts を読み込むには

export default class ProductTile extends LightningElement {
    /**
     * @type {import("../../../../../typings/product").Product}
     * Product__c to display. */
    @api
    get product() {
        return this._product;
    }

こんな感じ。悪くはないが毎回相対パスで上まで上がってくるのは面倒。

Shingo YamazakiShingo Yamazaki
  • 絶対パスで書いてもちゃんと認識してくれてそうだけど target: es5 だとだめなの謎
  • paths 指定でエイリアスで書ける？

あたりが疑問。

このスクラップは2021/10/07にクローズされました