Question

我是TypeScript的新手，目前正在使用Next.js，Redux，Jest等设置React应用程序。但是，在运行该应用程序时，我遇到了Type错误，该错误会停止该应用程序。

看来问题出在我传递的道具上。此组件从下一个HOC'withRouter'组件包装，该组件返回带有路由信息的同一组件，即{router：{pathname：/}} < / p>

我的组件（Logo.tsx）

import React, { SFC } from 'react';
import { withRouter, WithRouterProps } from 'next/router';
import LogoStyled from './Logo.styled';

interface LogoProps {
    router: { pathname: string };
}

const Logo: SFC<LogoProps & WithRouterProps> = ({ router }) => {
    const { pathname } = router;
    return pathname === '/' ? (
        <LogoStyled>Home</LogoStyled>
    ) : (
        <LogoStyled>Not Home</LogoStyled>
    );
};

export default withRouter(Logo);

我的笑话测试（Logo.test.tsx）

import React from 'react';
import { shallowToJson } from 'enzyme-to-json';
import 'jest-styled-components';
import { shallowWithTheme, mountWithTheme } from '../../../tests/testHelpers';

import Logo from './Logo';

const home = { pathname: '/' };
const about = { pathname: '/about' };

describe('Logo', () => {
    it('should render correctly', () => {
        const element = shallowWithTheme(<Logo router={home} />);
        expect(shallowToJson(element)).toMatchSnapshot();
    });
    it(`should display 'Home' for homepage`, () => {
        const element = mountWithTheme(<Logo router={home} />);
        expect(element.text()).toBe('Home');
    });
    it(`should display 'Not Home' for homepage`, () => {
        const element = mountWithTheme(<Logo router={about} />);
        expect(element.text()).toBe('Not Home');
    });
});

导致错误：

components/atoms/Logo/Logo.test.tsx:13:43 -
error TS2322: Type '{ router: { pathname: string; }; }'
is not assignable to type 'IntrinsicAttributes & Pick<LogoProps &
 WithRouterProps<Record<string, string | string[]>>, never> & { children?: ReactNode; }'.

Property 'router' does not exist on type 'IntrinsicAttributes &
Pick<LogoProps & WithRouterProps<Record<string, string | string[]>>,
never> & { children?: ReactNode; }'.

我猜想这很明显，我很想念，但是我现在正努力从中弄清楚。谢谢您能提供的任何帮助。

Next.JS，带有路由器的Typescript：“类型...无法分配给类型'IntrinsicAttributes＆Pick <>'”

0 个答案: