技術

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

関連記事

[Xcode] SDK Version Issue – This app was built with the iOS 12.0 SDK. Starting March 2019, all iOS apps submitted to the App Store must be built with the iOS 12.1 SDK or later, included in Xcode 10.1 or later.

こんにちは。たなかです。 2019年、ブログ初更新になります。今年もよろしくお願 …

[ Ionic ] A problem occurred evaluating project ‘:app’. > Failed to apply plugin [class ‘com.google.gms.googleservices.GoogleServicesPlugin’] > For input string: “+”

こんにちは。たなかです。 相変わらずモバイルアプリ開発やっています。 先日、Io …

Siriに笑って欲しいから [iOS 11、macOS High Sierra](「Siri」の笑い声まとめ)

iPhone Xが発売されて巷はiPhone Xの記事ばかり。 なんとなく見てい …

no image

document.querySelectorで色々なDOMを取得する

こんにちは javascriptでDOMを取得することは結構あるかと思います。 …

[Angular6] Angularのユニットテストでprivate変数を読み込む

Angularでテストコードを書いている時、component側で定義しているp …