ESLint：“any”的不安全分配和“any”类型值的不安全调用

Question

Consider the following test code:

import { isHtmlLinkDescriptor } from '@remix-run/react/links'
import invariant from 'tiny-invariant'
import { links } from '~/root'

it('should return a rel=stylesheet', () => {
  const response = links()

  invariant(isHtmlLinkDescriptor(response[0]))

  expect(response[0].rel).toBe('stylesheet')
})

and the implementation:

import { LinksFunction } from 'remix'
import tailwindProdUrl from '~/styles/tailwind.css'

export const links: LinksFunction = () => {
  const href =
    process.env.NODE_ENV !== 'production' ? './tailwind.css' : tailwindProdUrl

  return [{ rel: 'stylesheet', href }]
}

Where LinksFunction is defined here and here .

Why is ESLint complaining about "Unsafe assignment of an any value." and "Unsafe call of an any typed value." in the line below?

const response = links()

Answer 1

You have a wrong import in the second snippet. It should be:

import { LinksFunction } from '@remix-run/server-runtime';

or also, if you are working with TypeScript 3.8 or later:

import type { LinksFunction } from '@remix-run/server-runtime';

The fact that LinksFunction is being only used as a type in the code you are showing means that the TypeScript compiler could still succeed in compiling your modules under certain circumstances, despite the missing type definitions.