_appをラップしたい

//_app.js
import React from "react";
import App, { AppContext } from "next/app";
import Head from "next/head";
import styled from "styled-components";

import "~/scss/reset.scss";
import Wrapper from "~/layouts/Wrapper";

export default class extends App {
  static async getInitialProps({ Component, ctx}: AppContext) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return { pageProps }
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <Head>
          <title>E-PORT</title>
        </Head>
        <Wrapper>
          <Component {...pageProps} />
        </Wrapper>
      </>
    )
  }
};

//layout/Wrapper.tst
import * as React from "react";
import styled from "styled-components";
import { waitForDebugger } from "inspector";

export default (props) => (
  <Wrapper>
    {props.children}
  </Wrapper>
);

const Wrapper = styled.div`
  background-color: "#F5F5FC";
`;

このように書くと**Parameter 'props' implicitly has an 'any' type.**で怒られてしまいます。
調べてもそれといった解決策が見つからないかったのでよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

layout/Wrapper.tsxのコンポーネントの型定義を省いてるので、propsの型が暗黙的にanyになっているのではないですかね。関数コンポーネントの型はFCというものを使います。(コンポーネント名は適当です)

tsx
1const Hoge: React.FC = (props) => (
2  <Wrapper>
3    {props.children}
4  </Wrapper>
5);
6
7const Wrapper = styled.div`
8  background-color: "#F5F5FC";
9`;
10
11export default Hoge