TypeScriptの配列内の連想配列の型づけ

Question

TypeScriptの初学習者です。

React.jsにTypescriptを組み込み際に必要な型定義で困っているため質問しました。

例えば、渡ってくるオブジェクトが
__shops = [{id: 1, "name": "taro"}, {id:2, "name": "hoge"}]__の時に、下記のtsxファイルのようにinterfaceでshopsを型づけしようと考えています。

import * as React from 'react'

(中略)

interface P {
  shops: {id: number, name: string}[];
}

class TagDetail extends React.Component<P> {
　(中略)
}

このように設定した場合下記のエラーが出ます。

エラー文

TS2367: This condition will always return 'true' since the types '{ id: number; name: string; }[]' and 'nu
mber' have no overlap.

調べても解決できるようなページが見つからず困っています。

今回TypeScript のオブジェクト型リテラルいろいろを参考に上記のような型定義をしました。

Answer 1

interfaceをバラして書くのはどうでしょうか。

interface Shop {
    id: number,
    name: string
}

interface P {
  shops: Array<Shop>;
}

Comments

[yu-imu]

お答えいただきありがとうございます。無事解決できました。

エラー文の原因は他のソースコードに問題がありまして、
shops.length != 0 ? shops.map(shop =>{})という部分が
shops != 0 ? shops.map(shop =>{})となっていたため常にtrueという指摘が故でした。

実装方法は、参考になりましたのでベストアンサーにさせていただきます。

[NozomuIkuta]

解決したようでよかったです。