Skip to content

chore(dev): enforce import types via eslint

Angelo Rivera requested to merge use-import-types into main

Description

As I've been getting familiar with the codebase, one thing I think that would benefit us greatly is enforcing the usage of import type {x} from 'some-module'. Currently, the codebase has regular imports everywhere.

This is an issue for several reasons:

  • we use esbuild to bundle the TSX and JSX code. Bundlers are pretty good at inferring type usage these days, but we reduce the likelihood of running into an edge case (importing code we didn't intend to import) with this new pattern.
  • Because we're operating in a cross-platform way (desktop v web ide), using import types is especially important so that we don't run into dependencies accidentally slipping in either platform
  • performance reasons, the typescript compiler can resolve entities quicker

From the TS folks themselves in 3.8 release:

import type only imports declarations to be used for type annotations and declarations. It always gets fully erased, so there’s no remnant of it at runtime. Similarly, export type only provides an export that can be used for type contexts, and is also erased from TypeScript’s output.

Here's a great breakdown of this issue from a StackOverflow answer: https://stackoverflow.com/a/64243357

I've foot-gunned myself with this very issue when working with Nextjs and some React applications.

Changes

I've added "@typescript-eslint/consistent-type-imports": "error", to our .eslintrc.json. I ran the fix with npm run autofix

I realize this is a ton of file changes. So I'm happy to help break up this MR into multiple MRs should we decide this is a valuable change.

Thank you, and let me know if any questions! 👍

Resolves #[issue_number]

How has this been tested?

Everything seems to be working OK for me locally. I am happy to discuss other ways we can test since I know this impacts our cross-platform 😄

Screenshots (if appropriate)

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Documentation
  • Chore (Related to CI or Packaging to platforms)
  • Test gap
Edited by Angelo Rivera

Merge request reports