20

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.

Jeroen
  • 1,168
  • 1
  • 12
  • 24
Anurag Sharma
  • 241
  • 1
  • 2
  • 7

3 Answers3

50

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.

Matt Browne
  • 12,169
  • 4
  • 59
  • 75
  • 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? – Mateja Petrovic Aug 05 '20 at 20:30
  • 2
    `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. – Matt Browne Aug 05 '20 at 20:40
  • Worked for me today, this solution is still relevant – Dan M. CISSOKHO Mar 24 '22 at 10:14
  • this does not work for me. – ZhefengJin Apr 07 '22 at 07:00
2

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.

Artan M.
  • 817
  • 1
  • 11
  • 16
1

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.

Isaiah
  • 11
  • 1