if you want typescript - Githubissues

ViktorZener commented 4 years ago


import classNames from 'classnames';
import Menu from './menu';
import usePages from '../hooks/usePages';

const Layout: React.FC<{}> = ({ children }) => {
  const { currentPage } = usePages();

  if (typeof currentPage !== 'undefined') {
    return (
      <div>
        <Head>
          <title>
            Sonos Kids Controller -
            {currentPage.title}
          </title>
        </Head>

        <section className="section">
          <div className="container">
            <Menu />

            <h1 className="title is-size-1 is-capitalized">
              <span className="icon mr-3"><i className={classNames('fad', currentPage.icon)} aria-hidden="true" /></span>
              <span>{currentPage.title}</span>
            </h1>
            {children}
          </div>
        </section>
      </div>
    );
  }
  return null;
}

export default Layout```

rename .js to .tsx and follow this doc: https://nextjs.org/docs/basic-features/typescript

ViktorZener commented 4 years ago

React.FC (FunctionalComponent) will just wrap your regular function with react specifics, like it can have prop children and it inherits from React children type already. If you want more specific props (which i prefer) you go with regular interfaces for props and you specify what type children can have, single element, multiple, ...you dont care .. and so on

ViktorZener commented 4 years ago

React.FC<{}> just means has no other props then regular react stuff. React.FC<{ isReady: boolean }> || interface MyProps { isReady: boolean } -> React.FC<MyProps> would be the definition for more props

gmb2012 / sonos-kids

if you want typescript #9