Create react app typescript does not load d.ts file

Question

I have created a project using create react app typescript. I have a few d.ts files where I have defined interfaces types and enums. When I run start script. It is not able to load the d.ts files.

following is my tsconfig file.

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "es2017"
    ],
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "pretty": true,
    "preserveConstEnums": true,
    "typeRoots": [
      "./node_modules/@types",
      "src/*"
    ]
  },
  "include": [
    "src/*"
  ]
}

typeRoot points to src/* , where i have my d.ts files but none of the d.ts is loaded. and I get following error:

Type error: Cannot find name 'IAlarmsDetails'. TS2304

interface IAlarmProps {
        alarm: IAlarmsDetails;
}       

This is the declaration for IAlarmsDetails in one of Alarm.d.ts

declare type IAlarmsList = IAlarmsDetails[];

Please let me know what I'm missing here. I do not want to use eject option and write my own build config.

Bilyeu

Can you show how you are defining IAlarmsDetails? – Behl

Answer 1

It seems that the only way to use a .d.ts file out of the box with create-react-app (version 3.0.1) is to name it global.d.ts and put it in the src directory:

src/global.d.ts

I'm not sure why this rule isn't documented anywhere but that was the only way I was able to get it to work.

Adenovirus

I wish I could give you a bounty. As you said, It's a pity that it's not better documented. On the other hand, how did you find out about it and do you have any idea as to why this works? – Ambi

global.d.ts is a common convention used in examples in the TypeScript handbook. I was just lucky enough to discover this based on it working in one of our repos (which had a global.d.ts by coincidence) but not in another where I was trying to use a file with a different name for some declarations. Perhaps the creators of create-react-app didn't realize this was just a convention rather than where all global type declarations must go...just guessing. – Adenovirus

Worked for me today, this solution is still relevant – Gorges

this does not work for me. – Loireatlantique

Answer 2

In Create React App version 4.0.3, at least, this issue can be solved by editing your app's tsconfig.json file.

Under the "includes" option, add "src/types/**/*". Keep your .d.ts definition files inside of this src/types directory.

Whether or not you include an export statement in these files, the app should compile. However, the export statement will prevent your code linter from finding the type definitions unless you also import them manually.

Solution discovered thanks to this github comment.

Raposa

it does not work for me. – Loireatlantique

Worked for me. I think my initial issue was this "the export statement will prevent your code linter from finding the type definitions unless you also import them manually." Removed the export and it works fine. – Rabbin

Answer 3

I had the same issue and the way that I resolved it was by renaming the .d.ts file to index.d.ts inside the same folder and then it was working without any exports inside the index.d.ts or imports.

Obaza