Wix Veloで型のサポートを受ける方法

更新日：2022年8月9日

Veloのスクリプトを書いている時に関数の返り値がanyになってしまい、エディターのサポートが受けられないことがあります。

型サポートの紹介

今回はVeloで型を使う方法を紹介します。

下記の動画で紹介されているようにJSDocを使って型安全にする方法があります。

上記の動画は少し長いので要所だけ抑えて説明します。

動画内で紹介されているシナリオと問題点は、ざっくりいうと

コードの再利用時にpublic.jsを利用して複数ページで使いまわせるようなスクリプトを作成したいが、public.jsでは $w セレクタによる要素の型が特定できずエラーも起こらずランタイムのバグが容易に発生すること、エディターのサポートも受けられない。

個人的にこの問題はちょろっとVeloを書いたレベルの自分でも思いました。正直、Veloを触った時に昔jQueryを書いていた頃を思い出しながら、TypeScriptが書きたい...と思っていたのでこの動画ではこの問題をどのように解決するのか興味深く見ていました。

あと誤解を招きやすい点が、下記。動画内でこのようなスライドがあります。

VeloはTypeScriptコンパイラーを利用していますが、TypeScriptが書けるという訳ではない。残念！

代わりにユーザーはJsDocsの型宣言を利用して型を定義する必要があります。

少し動きを見てみます。

下記はTypeScriptの型定義で記述した文字列の変数です。ページ単位のページコード内のスクリプトではエラーになります。(現状自分が確認した範囲ではTypeScriptファイルを作成することはできません)

しかし、TypeScriptコンパイラーを利用しているため、型推論は有効です。

strはstring型なのでnumber型を代入しようとするとエラーになります。

では、型推論以外でどのように変数に型を定義するのかというと、JSDocの型定義を利用します。

@type を利用することで変数に型情報を定義できます。

もう少し複雑な型の場合は @typedefを用いることで自分で定義した型を利用することも可能です。

動きを軽く確認できたので、もう一度上記で説明したシナリオと問題点を再確認しましょう。

public.jsでは $w セレクタによる要素の型が特定できずエラーも起こらずランタイムのバグが容易に発生すること、エディターのサポートも受けられない。

$w セレクタの返り値に対して要素の型情報を付与したいんです。

どのようにするか？

publicコードに対して types.js というファイルを作成し、

下記のコードを貼り付けてください。下記のコードは VeloのリファレンスのWix Editor Elements ($w)

Subcategoriesからスクリプトで生成したものです。

下記のようにpublicファイルでも@typeを使って上記の定義から要素の型情報を付与することができます。

個人的に困っていた問題なのですが、ブログ記事の要素に対して$wセレクターが正しく型推論できていなかった部分がありました。

Before

/**@type {$w.PostPage} */ を設定することで any からちゃんと型が渡ってくるようになり、エディターのサポートも受けられるようになりました。

After

最近は他プロジェクトではもっぱらTypeScriptを使っており、あまりJSDocsは使ったことがなかったのですがまあ方情報が渡せたのでOKとしましょう。

個人的には型のエラーが発生している部分が一括で知れるものがあればいいのですが自分が見た感じ現状はファイルを開かないとエラーが確認できないかな？

次回はブログ記事の特定のカテゴリーを非公開記事にするスクリプトをVeloで作成したのでそれを紹介できればと思います。

それでは。