現在のWindowサイズを取得するメソッドくらいなもんです。Windowサイズ定義をセットするメソッドも入れておきます。別にDefinitelyTypedリポジトリにプルリクする訳でもなく、自分が使うだけのこと。それなら、使うところだけを定義しておけばいいのです!定義の種類まず定義するに当たって、読み込むライブラリが何者なのかを調べます。型定義にはおおむね、下の4種類が多く見受けられます。各種クラスやインタフェース類、staticメソッドを集めた、名前空間としての定義staticなメソッドを持ち、かつnewでインスタンスを生成するクラスでもある定義。このうち1.のクラス定義は、クラスベースのTypeScriptでは最も馴染みやすいものです。[クラス名]としておき、中身はインタフェースを書く要領でpublicメンバーを書き連ねていきます。4.の複合型定義は、見かける頻度は高いんですが、書くのはしんどいです。クラスと名前空間を同じ名前で定義し、staticメソッドやインタフェース定義などを名前空間に集めておく書き方です。前回記事に挙げたSortableJSの定義が、このように作られています。Toolkitは、どんなものでしょう?ライブラリの使い方としては、下記のように書いてます。md以下のときの処理}これは、2.のインスタンスをimportしている、と考えてよいでしょう。型定義ファイルで書くdeclare構文。これは、そのライブラリをimportしたときに存在するはずのもの、を示しています。[クラス名]となります。Toolkitの場合はクラスでなくインスタンスになるため、存在するのは生成済みインスタンスの入れ物になる、変数名です。この場合は、const/varで宣言された変数をdeclareします。ResponsiveBootstrapToolkit;そして、そのインスタンスが持つべきメンバーを、インタフェースとして定義します。void;}declareしたインスタンスは上述のインタフェースを持つため、型を指定してやります。IResponsiveBootstrapToolkit;最後に、このライブラリはモジュールのため、存在宣言した変数をexportしてやります。Toolkit、生成済みインスタンスとして扱っていますが。これは、staticなメソッドを持つ名前空間、として見ることも出来ます。そのように、書き換えてみたのがこちら。ResponsiveBootstrapToolkit;これでも、ビルドは通ります。名前空間として考えるには、少し機能が小さすぎますかね?そのへんは、お好みで。Mopidy音楽サーバ"Mopidy"のフロントエンド「Mopidy.Finder」が出来るまで、第8回です。完成版Mopidy.Finderのライブデモはこちら。今回は、TypeScriptでライブラリを使う際の、型定義について、です。大正義@types前回記事でちらっと触れましたが、最近はライブラリ配布時にTypeScript用の型定義も、同梱していることが散見されるようになりました。同梱の定義が無いとしても。それをnpmパッケージとして取り込んだものが、@typesです。自分で型定義を書くことなんて無いのです!...そう。定義済みの型定義で用事が済むのであれば...。プロパティが足りない!Mopidy.Finderでは、プレイリスト編集機能のためにSortableJSを導入しました。ドラッグ&ドロップで要素を並べ替えできる、とても便利なライブラリです。ここで、その@types上の定義を見てみましょう。npmパッケージ名は、@types/sortablejsです。インストールして、中身を除いてみます。@types/sortablejs設定値をセットするための、Options定義がこちら。}}プレイリストの編集時は、複数のトラックを選択して並べ替えをしたい。MultiDragプラグインを使いたい。こちらの公式サンプルコードでは、このように書かれています。150});しかし、上述のオプション定義には、multiDrag項目が見当たらないのです...。このままTypeScriptでサンプルのように書いてしまうと、ビルドエラーになります。こんな場合は、慌てず騒がず。型定義ファイルに、手を入れればいいのです!型定義ファイルを配置するnode_modules下のファイルに直接手を入れるのは、ご法度です。他の環境ではビルド出来なくなってしまいますね。プロジェクトに型定義ファイル用のフォルダを作り、型定義ファイルをコピーします。Mopidy.Finderのプロジェクトでは、型定義配置用のフォルダtypesを作り、そこにライブラリ別に配置しています。SortableJSの型定義は、types/sortable/index.d.tsに配置しました。元になった@typesのパッケージをアンインストールします。@types/sortablejsその上で、TypeScriptに、コピーした型定義ファイルを参照させるように設定します。tsconfig.jsonのcompilerOptionsの中で、baseUrlとpathsを書きます。}}pathsを使用する際は、そのパスの基準となるbaseUrlが必要になるようです。ここでは、baseUrlはプロジェクトルートを示す./(=tsconfig.jsonがあるフォルダ)としています。実際にSortableJSを使うTypeScriptモジュールでは、下記のようにimportして使います。してあるのは、SortableJSの全プラグインが同梱されたsortable.complete.esm.jsを使うためです。公式ページのこちらに記載がありますね。Studioでは、型定義の参照先を変えた際、認識されない場合があります。Studioを再起動してみてください。型定義ファイルに手を入れるさて、型定義を好き放題にいじるための準備が整いました!そこで、公式ドキュメントに書いてある、MultiDragプラグインの定義を読んでみます。multiDragselectedClassmultiDragKeyonSelectonDeselectの5つの定義が増えたようです。multiDragは、複数選択可否の設定です。これをtrueとするとで、複数選択可能な状態にできる、と。選択したDom要素に付与するクラス名ですね。選択状態にした際にCSSによって背景色を変えたいので、これは使えそうです。multiDragKeyは、複数選択時にキーボードで押すキーのようです。常時複数選択にするつもりなので、これは使いませんでした。onSelectとonDeselectのイベントハンドル2つ。これは選択時と選択解除時に発火するイベントのようですね。それぞれの時点でDomを操作するときに使えるかも。クラス名を自動で付与してくれるなら、使わないかな?というわけで、Optionの定義に、multiDragとselectedClassを追加しました。}}そして、イベントオブジェクトのほうにも、値が増えています。itemsclonesoldIndiciesnewIndiciesitemsはDom要素の配列が入るようですね。cloneは...なんだろう?分からないまま、使わずじまいでした。oldIndiciesとnewIndicies。これは、Dom要素ごとの順序インデックスを、新旧で持っているようです。イベント定義記述のすぐ下に、Indiciesの定義が書いてありますね。それらを、Eventの定義に追記していきます。}}なお、ドキュメント上のIndexの定義ではHTMLElementはelement、と書いてます。実際にイベントをダンプしてみると、名前はmultiDragElementのようです。いうのは、実装に合わせて修正していきます。修正後の型定義でビルドしてみる型定義の修正が終わったら、実際にコードを書いて確かめます。SortableJSの生成箇所は、こんなコードになっています。true;}TypeScriptをビルドしてみると...はい、きちんと通ります!プレイリスト画面で、実際に並べ替えを試してみます。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。