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?
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:
S, so it defaults to {}.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.{} 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.
For stateless components there is a special type:
interface StatelessProps {}
const stateless: React.SFC<StatelessProps> = (props) => {
return <div />
}
