7

Today I am using import aliasing to change the name of an import in React:

import { Something as SomethingElse } from 'somewhere';

However, after switching this file over to TypeScript, the same thing doesn't seem possible. Only after removing the alias am I able to use the import:

import Something from 'somewhere';

Is it possible to use an import alias in TypeScript?

arctic
  • 609
  • 3
  • 11
  • 19
  • 1
    The Typescript docs say that this should be possible: https://www.typescriptlang.org/docs/handbook/2/modules.html#additional-import-syntax What specific error is it causing? – kaya3 Feb 20 '22 at 02:31
  • I am trying to import a package and the specific error is: `Module '"react-tsparticles"' has no exported member 'Particles'. Did you mean to use 'import Particles from "react-tsparticles"' instead?`. I find it strange because it works in JavaScript (.jsx) but once I changed the file extension (.tsx), it no longer works. – arctic Feb 20 '22 at 02:43
  • Is `Particles` the "Something" or the "SomethingElse" in your example? – kaya3 Feb 20 '22 at 02:43
  • Sorry should have said that, it is the `Something` in the example. – arctic Feb 20 '22 at 02:45

1 Answers1

10

That's a default export, so you could just name it whatever you want:

import SomethingElse from 'somewhere';

These default exports are written like:

export default ...

and you can check out some other explanations here.

You may also be interested in the options allowSyntheticDefaultImports and esModuleInterop if you can't get it to work.

kelsny
  • 23,009
  • 3
  • 19
  • 48