Using typescript with react, stateless component

Question

I was wondering what the difference between these are, assuming I am not using state:

1. export class SkillList extends React.Component<SkillListProps> {}
2. export class SkillList extends React.Component<SkillListProps, any> {}
3. export class SkillList extends React.Component<SkillListProps, {}> {}

Or do they all behave in the same way?

Joe Clay · Accepted Answer · 2017-08-01 14:49:52Z

2

Let's take a look at the type definitions and find out:

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }
class Component<P, S> {
    /* ... */
}

Both P (the type parameter for the props) and S (the type parameter for the state) default to {}, meaning that both the props and state have the type of an empty object.

So in the cases you've specified:

You don't provide a type for S, so it defaults to {}.
You provide any as the type for S - this is not the same as {}, as it allows you to set the state to anything at all (a number, a string, etc.). I have no idea if that'll actually work in practice, given the way the setState API works, but you can try it if you want.
You provide {} as the type for S, which is the same as the default.

So in short, 1 and 3 are the same, but 2 is not.

answered Aug 1, 2017 at 14:49

Joe Clay

36.1k6 gold badges94 silver badges90 bronze badges

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

Comments

Daniel Khoroshko · Accepted Answer · 2017-08-01 14:53:36Z

0

For stateless components there is a special type:

interface StatelessProps {}

const stateless: React.SFC<StatelessProps> = (props) => {
    return <div />
}

answered Aug 1, 2017 at 14:53

Daniel Khoroshko

2,7391 gold badge20 silver badges28 bronze badges

Collectives™ on Stack Overflow

Using typescript with react, stateless component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related