React-Typescript, declare interface in separate files or in the same file, which one better?

Question

I'm fairly new to either react and typescript. and in the world of PHP it is recommended to declare all of your classes, interfaces, abstracts and... in their own separate file which is recommended in SOLID principles too.
so I was wondering that should I declare propsInterface and stateInterface for each of my statefull components or it is fine to declare them in the same file. so my questions is:
1: which one is the preferred way in js/typescript
2: does declaring at least two interface (props and states) for each statefull component going to slow down the performance or it just don't matter because compiled js file doesn't contain those interfaces ?
I'm really confused

Answer 1

I do it in the same file, unless I need to reuse it. I prefer this approach because the interfaces that don't need to be used outside can remain 'private'.

For example in React (your question says you use it), the interface for internal state is rarely reused, so you can have it just in the component without the need of exporting/exposing it (and being misused by another component). If the interface is reused (sometimes happens with the props one), I take it to a separate file.

It doesn't affect performance at all, because in the final compiled js, all those abstractions disappear (interfaces, types, etc).

There isn't a hard rule for this, just sharing my preference.

Cheers, from La Paz, Bolivia

PS: I've been heading a big project for a while (with React and TS)