Skip to content

Designating when an import is a type/interface #11220

Closed
@kengorab

Description

@kengorab

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    DuplicateAn existing issue was already created

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions