How to correctly import custom types in typescript

Question

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.

Answer 1

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.

Answer 2

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 don'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'