typescript - Kan ikke importere .tsx-fil fra .ts-fil (og omvendt)

Jeg har et prosjekt med .ts og .tsx-filer og jeg prøver å importere en .tsx-fil fra en .ts-fil, på denne måten:

src/index.ts

import WriteEditor from './write_editor';

src/write_editor.tsx

import Events from './events';
import Actions from './actions';

export default class WriteEditor extends React.Component { /*...*/ }

Nå forteller TypeScript meg

FEIL i ./src/index.ts Modul ikke funnet: Feil: Kan ikke finne './write_editor' i '/Users/luke/Projekte/writejs/code/writejs/src' @ ./src/index.ts 3:23-48 @ multi ./src/index.ts

Så jeg prøvde dette:

src/index.ts

import WriteEditor from './write_editor.tsx';

Nå forteller IDE-en min meg at jeg ikke skal skrive utvidelsene tsx, og jeg får en feil i src/write_editor.tsx fordi TypeScript ikke kan finne mine .ts-filer fra en .tsx-fil.

Så gikk jeg for å gi nytt navn til importene og la til .ts-utvidelsene

import Events from './events.ts';
import Actions from './actions.ts';

Nå får jeg massevis av feil som forteller meg at jeg ikke skal skrive utvidelser i det hele tatt.

Så hvordan kan vi importere tsx fra ts og omvendt?

Svar #1

Når du skriver

import WriteEditor from './write_editor';

Webpack vil automatisk lete etter

  • ./write_editor
  • ./write_editor.js
  • ./write_editor.json
  • (Og noen få andre)

Siden du bruker .ts og .tsx, må du fortelle det å se etter disse også i Webpack-konfigurasjonen din ved å bruke resolve.extensions:

{
  resolve: {
    extensions: [".js", ".json", ".ts", ".tsx"],
  },
}

Svar #2

I mitt tilfelle fikk jeg samme feil når jeg brukte typescript-eslint. Det er en app laget med create-react-app.

Måten er å legge til denne koden i .eslintrc.js.

module.exports = {
  // ...
  settings: {
    'import/resolver': {
      'node': {
        'extensions': ['.js','.jsx','.ts','.tsx']
      }
    }
  }
};

Relaterte artikler