Description
Just started out using typescript in a react app at work, and we've encountered situations like below:
import {AnalyticsContainer} from '../containers/analytics-container';
import {LocationTable} from '../components/table/location-table';
import {NormalizedTableData} from '../reducers/MonitoringReducer';
...
One of those imports (NormalizedTableData
) is a type, and at a glance it's difficult to determine that. There's nothing that indicates that all 3 aren't types.
I'd like input on this suggestion, but what I propose would be a special (optional?) syntax to denote type imports, so that the above would read as follows:
import {AnalyticsContainer} from '../containers/analytics-container';
import {LocationTable} from '../components/table/location-table';
import type {NormalizedTableData} from '../reducers/MonitoringReducer';
...
This way, it's definitely clear which imports are types and which aren't. I think an example that was more confusing than the one above is this one:
import {connect, MapStateToProps} from 'react-redux';
where both a function export and a type are being imported (especially since the name MapStateToProps
suggests it'd be a function and not a type). I think
import {connect, ...} from 'react-redux';
import type {MapStateToProps, ...} from 'react-redux';
makes it easier to distinguish between the two, and makes the code easier to read. Opinions/thoughts?