技術

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

関連記事

[Rails]「どのブラウザからのアクセスか」を判別する方法

こんにちは。たなかです。 前回以下のような記事を書きました。   [R …

どうも中田です。 Rails5.2から config/credentials.y …

[AWS Cli] brew install awscli が失敗!

どうも中田です awsコマンドがないよーって言われたので、再度インストールするこ …

no image

CSSのpositionで要素を真ん中寄せにする(JS不要)

positionを使って要素を真ん中寄せにする時は、transform: tra …

Sequel Proで本番DBに接続できない!

こんにちは。たなかです。 最近はDIY記事ばかりでしたので、久々にエラー解消記事 …