Need help fixing or suppressing this tslint error: TS2742

user_1039555 0
Viewed 3800

I have this file in a react native project:

import styled, { withTheme } from 'styled-components';
import { BaseText } from '../BaseText';

export interface BodyProps {
  textAlign?: string;
  fontSize?: string;
}

export const Body = withTheme(styled(BaseText)<BodyProps>`
  text-align: ${props => (props.textAlign ? props.textAlign : 'center')};
  font-size: ${props => (props.fontSize ? props.fontSize : '16px')};
`);

I upgraded react native from 0.61.5 to 0.63.2 and started getting this lint error wherever withTheme is being used:

TS2742: The inferred type of 'Body' cannot be named without a reference to 'react-native/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.

I tried several things, but the error remains the same:

  1. Following this post, I added import React from "react";
  2. Tried to disable tslint by adding /* tslint:disable */ above the Body declaration
  3. Tried to disable tslint by adding // tslint:disable-next-line above the Body declaration
  4. Played with dependency versions. Currently I have "@types/react": "^16.9.49".
tslint prettier react-native styled-components typescript
4 Answers

Alternately, check your package-lock.json and yarn.lock -- are there multiple @types/react versions listed there? Try changing your package.json to have the same @types/react version as what react-native lists as a dependency.

It could be that you have multiple versions of the @types/react React typings, and the components are getting confused about which one to import from.

user_18304070

By "a reference", TypeScript means the specific project you're working on doesn't have a (regular/dev/peer/optional) dependency in its package.json. You might be relying on a neighboring package to declare the dependency, or have coincidentally installed globally on your computer.

To resolve this, add @types/react as a devDependency to your package.json and install with your package manager of choice. That will satisfy TypeScript because it'll guarantee your package definitely has a reference to the (React) types it needs -- not just coincidentally.

npm i @types/react --save-dev
yarn add @types/react -D

We should also note that "tslint" and tslint:disable refer to TSLint, a now-deprecated tool which is not the same as TypeScript. TSLint is a separate library that adds extra static analysis ("linting") onto TypeScript code. Put another way, TSLint is to TypeScript as ESLint is to JavaScript.

The error you're seeing is a TypeScript error, not a TSLint one.

user_18304070

The withTheme function returns a value of a specific type. In your case, TypeScript fails to properly infer this type which is why you get error TS2742.

You can fix the problem by adding an explicit type annotation to const Body. It will look somewhat like this (depending on your version of styled-components):

import styled, { withTheme, WithThemeFnInterface } from 'styled-components';

export const Body: WithThemeFnInterface<{}> = withTheme(styled(BaseText)<BodyProps>`...`
user_4516340

I fixed it by giving it any type (not sure if it's a real fix):

export const Body: any = withTheme(

I could have also used WithThemeFnInterface<DefaultTheme> type but I think it was giving some other error.

user_10395550
Related