Typescript Cannot find namespace declared in global .d.ts file

Question

I have declared namespace in a .d.ts which should be globally available like so:

/src/typings/content.d.ts

import * as something from 'something';

declare namespace Content {

...

    type Object = internal.Object;
}

I want to use this namespace for a Interface in a TSX file:

import * as React from 'react';

interface ExampleComponentProps {
    example: Content.Object;
}

export const ExampleComponent: React.FunctionComponent<ExampleComponentProps> = ({ example }) => {
    return <div>{example}</div>;
};

Typescript now tells me: Cannot find namespace 'Content'.

My tsconfig looks like this:

{
    "compilerOptions": {
        // General settings for code interpretation
        "target": "esnext",
        "module": "commonjs",
        "jsx": "react",
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "noEmit": true,
        "noEmitOnError": true,
        "removeComments": false,
        "resolveJsonModule": true,

        "baseUrl": "./src",
        ...
    },
    "include": [
        "./src/typings/*.d.ts",
        "./src/**/*"
    ]
}

Answer 1

Checkout this other issue

If your file has top-level import or export statement it is considered as a module. All its' content (types, interfaces, etc.) you are interested in needs to be exported explicitly.

Answer 2

The solution to this problem is pretty straightforward. Don't use an import at the top of the d.ts-File.

This StackOverflow answer goes into great detail about how to handle such a thing