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

admin管理员组

文章数量:1242842

I'm fairly new to either react and typescript. and in the world of PHP it is remended to declare all of your classes, interfaces, abstracts and... in their own separate file which is remended in SOLID principles too.
so I was wondering that should I declare propsInterface and stateInterface for each of my statefull ponents 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 ponent going to slow down the performance or it just don't matter because piled js file doesn't contain those interfaces ?
I'm really confused

I'm fairly new to either react and typescript. and in the world of PHP it is remended to declare all of your classes, interfaces, abstracts and... in their own separate file which is remended in SOLID principles too.
so I was wondering that should I declare propsInterface and stateInterface for each of my statefull ponents 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 ponent going to slow down the performance or it just don't matter because piled js file doesn't contain those interfaces ?
I'm really confused

• javascript
• reactjs
• typescript

Share Improve this question Follow asked Dec 2, 2018 at 21:08 AH.PooladvandAH.Pooladvand 2,05922 gold badges1515 silver badges2828 bronze badges 1

• which one is the preferred way in js/typescript - there's no preferable way in JS because types don't exist in JS. does declaring at least two interface (props and states) for each statefull ponent going to slow down the performance - I'd suggest to read how TS works before moving any further. Types don't exist at runtime. They cannot affect performance. – Estus Flask Commented Dec 2, 2018 at 21:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 16

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 ponent without the need of exporting/exposing it (and being misused by another ponent). 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 piled 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)

本文标签：