技術

TypescriptでMap使用時にコンパイルエラー

投稿日:

こんにちは

連想配列で重複を省く処理をしたい時にMapを使用することがあります。
例でuserCodeが同じであれば重複とみなして排除したいと思います。

 const arr = [
  {
    id: 1,
    name: '太郎',
    userCode: 1,
  },
  {
    id: 2,
    name: '花子',
    userCode: 2,
  },
  {
    id: 3,
    name: '太郎',
    userCode: 1,
  }
]

const map = new Map(
  arr.map(a => [a.userCode, a])
);
const items = Array.from(map.values());
console.log(items);
// 出力結果
// [
//   { id: 3, name: '太郎', userCode: 1 },
//   { id: 2, name: '花子', userCode: 2 }
// ]

これで重複排除は出来るのですがコンパイルエラーになります。
これはTypescriptの型推論がうまく動作しないで起きる現象です。

githubにもissueとして上がっています。
ES6 Map array constructor needs extra hints

解決作としてはユーザーが型をつけてあげれば解消できます。

const map = new Map(
  arr.map(a => [a.userCode, a])
);

↓

const map = new Map(
  arr.map<[number, User]>(a => [a.userCode, a])
);

これでコンパイル出来るようになりました。

参考資料
MDN Map
【JavaScript】Arrayの重複を排除する最もシンプルな方法

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[JS] イベントバブリングまとめ

どうも中田です いつも忘れちゃうんですよ。 javascriptのイベントバブリ …

no image

【Angular7】ファイルの指定をルート相対パスにする

こんにちは Angularで別ファイル(例えばcomponentからservic …

[ Rails ]ActiveRecord::RecordInvalidで怒られ、saveができない!

こんにちは。たなかです。 新しいプロジェクトの参画が決まって、今はrailsを書 …

no image

【Rails】helperからbrタグを含めた文字列を返したい時

こんにちは プライベートではもっぱらRailsを触っています。 触ってからそんな …

no image

[リアクティブフォーム]バリデーションチェックを任意のタイミングで走らせる。

Angularのリアクティブフォームで使っていると、 バリデーションを後付けした …