CODEWITHSUNDEEP
typescriptreact-nativestyled-componentstslintprettier
Kartik
Kartik

Reputation: 7917

Need help fixing or suppressing this TypeScript error: TS2742

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".

Upvotes: 8

Views: 15179

Answers (3)

Benny Code
Benny Code

Reputation: 54925

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>`...`

Upvotes: 2

Josh
Josh

Reputation: 3533

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.

Upvotes: 7

Josh
Josh

Reputation: 3533

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.

Upvotes: 1

Related Questions