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.

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.

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.