TypeScriptにて型が違うと怒られる

Question

実現したいこと

モックを使用し、ユーザー情報を用意したいのですが、型チェックで怒られるので解消したい

前提

ユーザー情報を用意したところ、型チェックで下記のエラーが出た

発生している問題・エラーメッセージ

型 '{name: string; address: string; }[]' を型 '[{ name: string; address: string; }]' に割り当てることはできません。
      ターゲットには 1 個の要素が必要ですが、ソースに指定する数はそれより少なくても構いません。

該当のソースコード

users.ts

import { rest } from './rest';

export type User = {
  links?: [
    {
      name: string;
      address: string;
    }
  ];
};

export type FetchUsersRequest = {
  user: User;
};

/**
 * ユーザー情報を取得。
 *
 * @param params 
 * @returns
 */
export const fetchUsers = async (params: FetchUsersRequest) => {
  const url = `/api/users/${params.id}`;
  const { data } = await rest.get<FetchUsersResponse>(url);
  return data;
};

index.ts

import { MockMethods, MockResponse } from 'axios-mock-server';
import log from 'loglevel';

import { FetchUsersResponse } from '../../../../users';

export const mockUserBasic = {
  links: [
    {
      name: 'テスト',
      address: '[e-mail]', 
    },
  ],
};

const mock: MockMethods = {
  get: async (): Promise<MockResponse> => {
    log.debug('called mock get api.');
    const data: FetchUsersResponse = {
      user: mockUserBasic,  ⬅︎ココで怒られる
    };
    return [200, data];
  },
};

export default mock;

Comments

[y_waiwai]

どの行でそのエラーが出たんでしょうか

[uniuonbiz]

index.tsに記載しております。
index.tsの下から７行目ですmm

Answer 1

ターゲットには 1 個の要素が必要ですが、ソースに指定する数はそれより少なくても構いません。

エラーメッセージのとおりです。[foo]はfoo1個と決まっているタプル、foo[]はfooが0個以上任意の個数となる配列であって、両者は別の型です。

どちらの型が意図通りなのか考えて、統一してください。

Comments

[uniuonbiz]

ありがとうございます。
素人意見で申し訳ないのですが、users.tsとindex.tsで同じ配列の記述をしていると思うのですが、
どこで違いが出ているのでしょうか？

[maisumakun]

> users.tsとindex.tsで同じ配列の記述をしていると思うのですが

タプルは明記しないとタプルにならないことがあります。そのため、users.tsでタプルを宣言したところにindex.tsから配列を渡す形となっています。

[maisumakun]

（「1個だけのタプル」（絶対に1個だけと決まっている）というのは、おそらく意図した形ではないと思われます）

[uniuonbiz]

index.tsでもタプルを宣言する必要があるということでしょうか？

[uniuonbiz]

users.tsに合わせる形にしたいと考えてます。

[maisumakun]

> users.tsに合わせる形にしたいと考えてます。

linksと複数形なのに、本当に「絶対に1個（0個だったり2個以上だったりが来ることはない）」で間違いないのですか？

[uniuonbiz]

すみません、データを渡す方であるindex.tsに合わせたいです。
users.tsを以下のように修正したところエラーが解消しました。
links?:
{
name: string;
address: string;
}[];
こちらの記述でご回答いただいた「0個以上任意の個数となる配列」は実現出来ているでしょうか？

[maisumakun]

はい。