[TypeScript] Can't use <Link /> with Gatsby <Link />

I want to use the Gatsby Link component together with Chakras Link component. Unfortunately it seems not to work as expected because I’m getting compile errors:

import React from 'react';
import { Link as GatsbyLink } from 'gatsby';
import { Link } from '@chakra-ui/core';

export function Test() {
  return (
    <Link as={GatsbyLink} to="/me/">
      Me
    </Link>
  );
}

produces a

Type 'typeof GatsbyLink' is not assignable to type '"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... | undefined'.
  Type 'typeof GatsbyLink' is not assignable to type 'ComponentClass<any, any> & string'.
    Type 'typeof GatsbyLink' is not assignable to type 'string'.ts(2322)
index.d.ts(154, 3): The expected type comes from property 'as' which is declared here on type 'IntrinsicAttributes & ILink & IPseudoBoxProps & RefAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & LayoutProps & ColorProps & SpaceProps<ReactText> & ... 16 more ... & { ...; }'

[kripod]

@alexluong You may opt out of type checking for an entire file with // @ts-ignore, but I wouldn’t recommend that.

An other choice is to create an alias for Link like below:

import { Link as ChakraLink } from ‘@chakra-ui/core’;

const Link = ChakraLink as any;

Personally, I’m using Chakra with the router of Gatsby and it made sense to create a custom Link component, using the first approach:

import { Link as ChakraLink, LinkProps } from '@chakra-ui/core';
import { Link as GatsbyLink } from 'gatsby';
import React from 'react';

export default function Link({ href, isExternal, ...restProps }: LinkProps) {
  return (
    // TODO: Don't opt out from type checking once `ChakraLink` gets fixed
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    <ChakraLink
      {...(isExternal ? { href } : { as: GatsbyLink, to: href })}
      {...restProps}
    />
  );
}

[tony]

Thank you @kripod !

As of typescript-eslint 3.0.0, I believe the command will now be ban-ts-comment instead of ban-ts-ignore

import { Link as ChakraLink, LinkProps } from '@chakra-ui/core';
import { Link as GatsbyLink } from 'gatsby';
import React from 'react';

export default function Link({ href, isExternal, ...restProps }: LinkProps) {
  return (
    // TODO: Don't opt out from type checking once `ChakraLink` gets fixed
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    <ChakraLink
      {...(isExternal ? { href } : { as: GatsbyLink, to: href })}
      {...restProps}
    />
  );
}