MantineThemeColors are possibly "undefined" (loses types on TypeScript v4.8.2)

What package has an issue

@mantine/core

Describe the bug

I have a project that uses TypeScript 4.7.4 and compiles just fine. However, I recently noticed VS Code (which is using TypeScript 4.8.2) has started reporting errors for MantineThemeColors. At first, I thought it was a problem with my VS Code, but after upgrading my project’s TS version to 4.8.2, the compilation started failing.

Running tsc --version && tsc --no-emit with TS 4.7.4 (no errors):

Version 4.7.4

Running tsc --version && tsc --no-emit with TS 4.8.2:

Version 4.8.2
theme.colors.dark[9]
                ^
Object is possibly "undefined".

tsconfig.json

{
    "compilerOptions": {
        "incremental": true,
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "./dist",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "baseUrl": ".",
        "allowJs": true,
        "sourceMap": true,
        "preserveWatchOutput": true,
        "pretty": true,
        "newLine": "LF",
        "types": ["node"],
        "jsx": "react",
        "strict": true,
        "exactOptionalPropertyTypes": false,
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": true,
        "noImplicitOverride": true,
        "noImplicitReturns": true,
        "noUncheckedIndexedAccess": true,
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "forceConsistentCasingInFileNames": true
    },
    "include": ["src", "vite.config.ts"]
}

What version of @mantine/hooks page do you have in package.json?

5.2.5

If possible, please include a link to a codesandbox with the reproduced problem

Unable to create a codesandbox, since they don’t seem to allow running NPM scripts and the IDE’s TS version is stuck at 4.5.5 .

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

Removing (string & {}) from DefaultMantineColor seems to fix the type (i.e. I don’t get “possibly undefined” errors). However, it causes errors in other places, such as ThemeIcon.color which would no longer accept a string. (I’d sometimes use gray.0 instead of the theme object from useMantineTheme. There could be other errors that I have not encountered.

The alternative right now would be to simply use optional chaining.

theme.colors.dark?.[9]

[maxijonson]

A PR has been created in TypeScript and merged, this will be fixed in 4.9.0!

[rtivital]

I’m closing this issue as it seems not to be related to Mantine, if you think that there is something to be done on our side, then feel free to reopen it.