TypeScriptでRouteComponentProps<{ id: string}>をextendするInforPropsを渡すには？

Question

React TypeScriptで実験的に次のようにテストコードを書き始めたのですが、

[Login.test.tsx]

import React from 'react';
import { shallow } from 'enzyme';
import Login from './Login';

describe('Login', () => {
    const login = shallow(<Login  />);
 
}); 

Type '{}' is missing the following properties from type 'Readonly<ILoginInfoProps>'というエラーが出てきます。

調べていたらLoginコンポーネントのPropsにデフォルト値を設定する必要があり、そしてその型は次のようなILoginInfoProps型で定義されているからそれに合わせる必要があるという所までわかりました。

[ILoginInfoProps.interface.ts]

import { RouteComponentProps } from 'react-router-dom';

export default interface ILoginInfoProps extends RouteComponentProps<{}>{
    id: string
}

次のようにデフォルト値を設定しようとしたのですが、コンパイルしません。

[Login.tsx]

import React from 'react';
import LoginInfo from '../interfaces/LoginInfo.interface';
import ILoginInfoProps from '../interfaces/ILoginInfoProps.interface';
import ILoginInfoState from '../interfaces/ILoginInfoState.interface';

class Login extends React.Component<ILoginInfoProps, ILoginInfoState>{

  public static defaultProps: ILoginInfoProps = {
    match: {
      id: '24';
    }
  };  
.......
.......

Type '{ id: string; }' is not assignable to type 'match<{}>'.
Object literal may only specify known properties, and 'id' does not exist in type 'match<{}>'.ts(2322)
index.d.ts(76, 5): The expected type comes from property 'match' which is declared here on type 'ILoginInfoProps'.というエラーが出てきてしまいます。

どのように直せばよいでしょうか？

Answer 1

エラーが起こっている原因は、ILoginInfoPropsを定義するときにフィールドの記述がいくつか欠けているからではないでしょうか。ここではhistory, match, locationがそれに該当すると思われます。interface ILoginInfoPropsはRouteComponentProps<{}>をextendしていますので。

下記のようにしてみてください。

public static defaultProps: ILoginInfoProps = {
    id: '24',
    history: undefined,
    location: undefined,
    match: undefined
}

Comments

[Sean2014]

ドンピシャでした！ありがとうございます！

Answer 2

次のようにデフォルト値を設定しようとしたのですが、コンパイルしません。

matchというプロパティがILoginInfoPropsに存在しないからではないでしょうか？
下記のようにidだけをdefaultPropsに指定した場合は動作しませんか？

public static defaultProps: ILoginInfoProps = {
  id: '24';
}; 

以下参考です。

• 【React + TypeScript】コンポーネントのdefaultPropsの型をきちんと指定する

Comments

[Sean2014]

回答ありがとうございます。ただ、ご提案いただいたコードの内容ではコンパイルエラーは解消されませんでした。