3

How the types from d.ts files are resolved?

As per my understanding types from d.ts files should be automatically available, without having to explicitly import them, but they are not.

These 2 files are side by side in the same folder:

foo.d.ts

  export type Foo = {
    bar: string
  }

foo.ts

const getFoo = (): Foo => {
  return {
    bar: 'Foo'
  }
}

However, having an error TS2304: Cannot find name 'Foo'.

My tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "declaration": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "typeRoots": [ "./types", "./node_modules/@types"],
  },
  "include": ["src/**/*", "types/*"],
  "exclude": ["node_modules", "typings"]
}
anmatika
  • 1,581
  • 3
  • 21
  • 29
  • 1
    In this particular case, you should declare `Foo` type inside `foo.ts`. If you want to declare some global types, create `global.d.ts` or `globals.d.ts` file in the root of app and put there all global types. If you still want to create `foo.d.ts`, you should probably have `foo.js` file. In this case `foo.d.ts` will extend exported values from `foo.js`. See how it works in material-ui repo: https://github.com/mui-org/material-ui/tree/next/packages/material-ui/src/Accordion – captain-yossarian from Ukraine Jul 22 '21 at 11:36
  • Not really. I find resolving d.ts files a bit confusing still after reading that. In the accepted answer is said: *"let's say, my-module.js, if there is a my-module.d.ts next to it, then TypeScript will include its content"*. Does that mean d.ts file with the same name should be automatically included? Like in my case foo.ts should include automatically foo.d.ts? – anmatika Jul 22 '21 at 11:42
  • 1
    you can include `d.ts` file if you are working with pure js files and you want to provide some typings. IF you are working with ts files, you should not use d.ts files - at least you should not create them manually. There is once case when you need to create manualy d.ts - it is when you want to declare global type. Lets say you want to extends `DOcument` interface or any built in type – captain-yossarian from Ukraine Jul 22 '21 at 11:44
  • Oh. So `d.ts` files are only for adding typings for `js` files? Well that's confusing. I would have found that convenient for separating types from actual implementation, however I stand corrected, that they're not meant for that. – anmatika Jul 22 '21 at 11:47
  • It is up to you how you want to separate your types from other code. For instance in my team, we are adding `*.types.ts` prefix to the name of the file – captain-yossarian from Ukraine Jul 22 '21 at 11:49
  • Okay I see. And then manually import them where needed? – anmatika Jul 22 '21 at 11:50
  • 1
    Okay I see. It seems I've understood `.d.ts` files completely wrong. I thought that they were a convenient way to declare types without a need to manually import them where needed. But okay now I know better. Thanks. – anmatika Jul 22 '21 at 11:52

0 Answers0