44

I have custom type in src/@types/app.d.ts ( export type AuthKeyT = string )

I would like to use it in tsx react file (using import { AuthKeyT } from '@types/app'), but I am getting an error:

Cannot import type declaration files. Consider importing 'app' instead of '@types/app'

So, when I use import { AuthKeyT } from 'app' I am getting:

Cannot find module 'app'.

So.. what is wrong? How should I import custom type?

I am using typescript 3.7.2 in react app.

3 Answers 3

87

You're facing this error because @types/... is a global import. For example import { AuthKeyT } from '@types/app' means your're trying to import from @types that is in node_modules.

You can fix this by changing @types to something like @customTypes or by changing the path for your types folder something like @src/types... while importing.

Sign up to request clarification or add additional context in comments.

4 Comments

ah, you saved me some hair, friend
@borgmater I hope you saved some hair in this year as well
going downhill by the year :-(
yep, I used alias in tsconfig but eslint error still appeared. This fixed the issue
13

As the error says, you can't import a .d.ts file in TypeScript.

import ... from 'app' mean implicitly import ... from 'app.ts' or this file doesn't exist so you get the second error.

If you want to use your types using this import, you have to write them in a simple .ts file like that:

src/@types/app.ts:

export type AuthKeyT = string

With this structure you will be able to import this type using:

import { AuthKeyT } from 'app'

4 Comments

And in which cases are used .d.ts files?
If you have a app.ts module you will write his types definition in app.d.ts. So when you import ... from 'app', TypeScript will also 'import' the definition file becaute it as the same name as the module.
what is situation to use ==> import type { somthing } from './typefile' ;
In my case, by removing the @ from the folder name, I was able to import without showing errors. Ex. src/types/config.ts
4

You can also add path to your compilterOptons in the tsconfig.json like this:

"compilerOptions": {
    "paths": {
      "types/*": [
        "./@types/*"
      ]
    }
}

and then import { AuthKeyT } from 'types/app'

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.