はじめに

今日は TypeScript 3 で jQuery を使用した際に sort() を使う方法を２つご紹介します。

目次

1. そのまま実装したらエラーになった
2. 手っ取り早い any キャスト
3. キャストしないで対応
4. おわりに

1. そのまま実装したらエラーになった

jQuery で sort をするためには下記のようなコードで実装できます。

<ol>
  <li>B</li>
  <li>D</li>
  <li>C</li>
  <li>A</li>
</ol>
<script src="js/main.js"></script>

$("ol").html(
  $("li").sort(function(a, b) {
    return ($(a).text() > $(b).text()) ? 1 : 0;
  })
);

しかし、これをそのまま TypeScript のコードにしたところ、下記エラーが出てコンパイルができませんでした。

src\main.ts(2,11): error TS2339: Property 'sort' does not exist on type 'JQuery<HTMLElement>'.
src\main.ts(2,25): error TS7006: Parameter 'a' implicitly has an 'any' type.
src\main.ts(2,28): error TS7006: Parameter 'b' implicitly has an 'any' type.

下2行の変数 a, b については型指定がなくて怒られているので「a: HTMLElement」のようにすれば大丈夫でしょう。 問題は JQuery<HTMLElement> 型 に sort() 関数が定義されていないことです。

const $li:any = $('li');
$('ol').html(
  $li.sort((a: HTMLElement, b: HTMLElement): number => {
    return  ($(a).text() > $(b).text()) ? 1 : 0;
  })
);

$('li').get().sort((a: HTMLElement, b: HTMLElement): number => {
  return ($(a).text() > $(b).text()) ? 1 : 0;
}).forEach((value) => {
  $('ol').append($(value));
});