TypeScript React Function Component name as type

Question

In React.js, I've got a Function Component, and when I use the function name as type, get an error.

code sample:

import * as React from "react";
import { render } from "react-dom";

interface NameViewProps {
  name: string;
}
function NameView({ name }: NameViewProps) {
  return <div>{name}</div>;
}

interface Props {
  // ts error: Cannot find name 'NameView'.ts(2304)
  children: NameView[];
}

class Demo extends React.Component<Props> {
  render() {
    return (
      <div>
        <h2>in demo component with children div array</h2>
        {this.props.children}
      </div>
    );
  }
}

How can I use a function component’s name as a type?

You can try the codesandbox here

What is that type supposed to mean? It makes no sense to use a function as a type. — Murat Karagöz
– Murat Karagöz, Commented Jun 27, 2019 at 11:10
How do you want to use Demo? Why do you want to limit its children to a specific type? — AsukaSong
– AsukaSong, Commented Jun 27, 2019 at 12:46
@AsukaSong I think it’s better to provide a specific type for children if we can. So we can prevent users of our component from passing the wrong children. — Jess
– Jess, Commented Jun 28, 2019 at 2:20
@MuratKaragöz I want to limit the Demo component only accepting children of NameView component, not others like div or span. — Jess
– Jess, Commented Jun 28, 2019 at 2:24
possible duplicate of stackoverflow.com/questions/44475309/… — AsukaSong
– AsukaSong, Commented Jul 3, 2019 at 8:25

tolotra · Accepted Answer · 2019-06-27 12:57:56Z

1

interface Props {
  children: (typeof NameView)[];
}

answered Jun 27, 2019 at 12:57

tolotra

3,2701 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Siddharth Pachori · Accepted Answer · 2019-06-27 11:20:16Z

0

Use typeof (function name) i.e typeof NameView

answered Jun 27, 2019 at 11:20

Siddharth Pachori

1698 bronze badges

Collectives™ on Stack Overflow

TypeScript React Function Component name as type

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related