#TypeScript does not understand custom property

8 messages · Page 1 of 1 (latest)

devout radish
#

Hey there, I have a global.d.ts file with the following content:

import { type Axios } from 'axios';
import type routeFn from 'ziggy-js';
import type * as React from 'react';

declare global {
  interface Window {
    axios: Axios
  }

  declare module 'react' {
        // eslint-disable-next-line @typescript-eslint/ban-types
        type FC<P = {}> = React.FC<P> & {
          layout?: (page: React.ReactNode) => React.ReactNode
        };
  }

  let route: typeof routeFn;
}

export {};

Here I declare the react module with a custom FC type. The editor understands and references to the global.d.ts just fine as seen in the screenshot but TypeScript keeps complaining about it. Any idea on how to fix?

image.png
devout radish
#

Bump

#

My tsconfig.json looks as follows

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "esModuleInterop": true,
        "jsx": "react",
        "lib": [
            "ES2017",
            "ESNext",
            "DOM"
        ],
        "module": "ESNext",
        "moduleResolution": "Node",
        "paths": {
            "@/*": ["./resources/js/*"]
        },
        "skipLibCheck": true,
        "strictNullChecks": true,
        "target": "ESNext",
        "types": [
            "google.maps",
            "node",
            "react",
            "vite-plugin-svgr/client",
            "vite/client"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}
normal canopy
#

@devout radish Not the direct answer to your question, but if you don't use FC (which I'd recommend anyway) this issue goes away.

#

And you probably don't want to add it as a optional property to FC anyway, since you'd have to null-check everywhere before using it.

#

!reactfc

earnest coyoteBOT
normal canopy
#

That both has reasons to not use React.FC but also the workaround you'd use to attach extra properties to a FC if you need to:

const  Select: React.FC<SelectProps> & { Item: React.FC<ItemProps> } = (props) => {/* ... */ }
Select.Item = (props) => { /*...*/ }