CODEWITHSUNDEEP
reactjstypescriptcreate-react-appemotion
AlexanderKaran
AlexanderKaran

Reputation: 525

Create React App and Global Types not being picked up

I have two global types files emotion.d.ts and global.d.ts, and they're no longer being picked up.

Currently using emotion theme and created a global types file for in emotion.d.ts that looks something like this:

import "@emotion/react";

declare module "@emotion/react" {
    export interface Theme {
        platform: PlatformType;
        colors: {
            D1: string;
            D2: string;
            D3: string;
            D4: string;
            D5: string;
        };
        categoryColors: {
            GreenGradient: string;
            BlueGradient: string;
            PurpleGradient: string;
        };
    }
}

Everything was working fine but then I had to some global types as I was extending the Window. So I created global.d.ts file that looks like this:

declare interface Window {
    Intercom: (
        action: string,
        payload?: { [key: string]: string | number | boolean },
    ) => void;
}

declare interface Document {
    documentMode?: number;
}

However, now when I run the app, it can not find any of the types. My TS config looks like this:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "noFallthroughCasesInSwitch": true,
        "typeRoots": ["./src/global.d.ts", "./src/emotion.d.ts"]
    },
    "include": ["src", "src/global.d.ts", "src/emotion.d.ts"]
}

Should also note though the types do appear in auto-complete while typing in VS code

Upvotes: 0

Views: 2170

Answers (1)

AlexanderKaran
AlexanderKaran

Reputation: 525

When using create-react-app, it is fine for my emotion theme types to go in:

emotion.d.ts

However, other global types, such as my extension of the window, need to go inside:

index.d.ts

These files need to be in the src folder, and you need to the following to the tsconfig

"include": ["src/*"]

Upvotes: 2

Related Questions