技術

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

ActiveRecord::Relationのklassメソッドでmodelを取得できる。

こんにちは。コーテッグのこやまです。 モデルに対してallやwhereメソッドを …

no image

VivaldiのWEBパネルに登録して便利だったサイトを紹介する

こんばんは VivaldiのWEBパネルはとても便利です。 今回はWEBパネルに …

no image

【Vagrant】はじめまして!はじめました!

どうも中田です。 仮想マシンと言えば、VMWare、EC2、VirtualBox …

no image

【Angular】Full calendarで横スクロールを実装

こんにちは Full Calendarにはいくつかの表示モードがあります。 こち …

AWSのデフォルトリージョンを東京にしたい!

こんにちは。たなかです。 AWSにログインすると、リージョンがデフォルトでオハイ …