如何在 create-react-app 中指定全局类型声明？

Question

I am having trouble with setting global types in my create-react-app project. Here is my tsconfig.json file.

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "components/*": [
                "src/app/components/*"
            ],
            "constants/*": [
                "src/app/constants/*"
            ],
            "services/*": [
                "src/app/services/*"
            ],
            "reducers/*": [
                "src/app/reducers/*"
            ],
            "selectors/*": [
                "src/app/selectors/*"
            ],
            "types/*": [
                "src/app/types/*"
            ],
            "pages/*": [
                "src/app/pages/*"
            ],
            "styles/*": [
                "src/static/styles/*"
            ],
        },
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "noImplicitAny": false,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "typeRoots": ["node_modules", "typings"],
    },
    "include": [
        "src"
    ],
    "exclude": ["node_modules", "**/*.js"]
}

As you can see, I have created a typings folder at the root of the project where I am going to keep global typings and some other typings. So in my typings folder, I have a global.d.ts file that has this declaration.

declare global {
    interface Window { fastlink: any; }
}

But inside my react component I have this typescript error

Property 'fastlink' does not exist on type 'Window & typeof globalThis'.

I have already investigated a lot of articles and posts here, also have read the docs, but with no result.

Answer 1

interface Window { 
  fastlink: any;
}

no need for declare global, you can directly define it in interface Window.

you can access it by doing window.fastlink

Be careful with using global variables.