What is the purpose of using `declare` and `export` together?

src/Components/Footer/Footer.d.ts

declare namespace IFooter {
    export interface IProps {}
}

export { IFooter };

[crisfcodes]

@futuredayv

In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well). https://www.typescriptlang.org/docs/handbook/modules.html

then according to the above, all you need is to remove all import and export from the file and automatically the declarations within the file will be available in the global scope.

src/Components/Footer/Footer.d.ts

declare namespace IFooter {
  interface IProps {}
}

src/Components/Footer/index.tsx

import React from 'react';

const Footer: React.FunctionComponent<IFooter.IProps> = (): JSX.Element => (
  <div className="footer">Footer</div>
);

export { Footer };

As you note here, you can still use IFooter.Iprops without having to import it into the file. This pollute the Global namespace.

[crisfcodes]

@futuredayv

pros

The TypeScript code we write is in the global scope by default. If we have multiple files in a project, the variables, functions, etc. written in one file are accessible in all the other files. So its easier to use types defined in other files.

cons

Your are polluting the global namespace, anybody can easily override variables declared in the global scope without even knowing they are doing so. This is a dangerous space as it can lead to conflicts/erros in the code.

“Magically available interfaces” or global types is highly discouraged and should mostly be left to legacy. Also, you should not be using ambient declaration files (e.g. d.ts files) for code that you are writing. These are meant to stand-in the place of external non-typescript code (essentially filling in the typescript types into js code so that you can better integrate it with javascript). For code you write you should be using plain .ts files to define your interfaces and types. https://stackoverflow.com/questions/42233987/how-to-configure-custom-global-interfaces-d-ts-files-for-typescript

Most large/mature TypeScript libraries avoid relying on ambient declarations and instead export anything that needs to be reused outside of the current file. For example, the Angular codebase has an interfaces.ts file for each module which is imported into each file that needs to reference the interfaces: https://stackoverflow.com/questions/48690533/typescript-declare-vs-export-best-practices

---

The thing here is why use export and declare together? There is a good reason to use this pattern?

some libraries like next/router use it:

export declare function useRouter(): NextRouter;