CODEWITHSUNDEEP
typescriptreact-nativewebstormeslint
orome
orome

Reputation: 48466

How I suppress a TS2322 warning in WebStorm?

I have a project in WebStorm created using expo init with the IDE configured to use ESLint with @typescript-eslint and with "Typescript Language Service" enabled (and TSLint disabled).

If I replace the contents of App.tsx with the code below, I get numerous inspection errors highlighted in the IDE's editor. I can (as expected) eliminate most of these with

/* eslint-disable @typescript-eslint/explicit-member-accessibility, @typescript-eslint/no-use-before-define, @typescript-eslint/explicit-function-return-type */

but some errors persist, notably

enter image description here

associated with each Component in App's render. As expected I can also disable these errors by disabling "Typescript Language Service", but not (despite the IDE suggesting it) with @ts-ignore (in any scope).

The only thing that works cleanly is to replace

class Counter extends Component

with

class Counter extends Component<any>

What is the correct approach to suppressing the TS2322 error in my project? Why does using <any> work (and should I use it) and why does @ts-ignore have no effect?

import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'

class Counter extends Component {

  state = {count: 0}

  componentDidMount() {
    setInterval(() => {
      this.setState({count: this.state.count + 1})
    }, 1000)
  }

  render() {
    const {count} = this.state
    const {color, size} = this.props

    return (
      <Text style={{color, fontSize: size}}>
        {count}
      </Text>
    )
  }
}

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Counter color={'lightblue'} size={16} />
        <Counter color={'skyblue'} size={32} />
        <Counter color={'steelblue'} size={80} />
        <Counter color={'darkblue'} size={140} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

Upvotes: 8

Views: 21933

Answers (3)

Lucas Basquerotto
Lucas Basquerotto

Reputation: 8063

You can now use @ts-expect-error instead of @ts-ignore. It works the same way, except that @ts-ignore won't error if it doesn't find an error.

// @ts-expect-error
<MyComponent value={myValue} />

<MyComponent
    value1={value1}
    value2={value2}
    // @ts-expect-error
    valueWithError={valueWithError}
/>

Sometimes, you'll want to ignore an error that later down the line gets fixed. If you're using @ts-ignore, it'll just ignore the fact that the error is gone.

But with @ts-expect-error, you'll actually get a hint that the directive is now safe to remove. So if you're choosing between them, pick @ts-expect-error.

(from: https://www.totaltypescript.com/concepts/how-to-use-ts-expect-error)

Upvotes: 2

Bullsized
Bullsized

Reputation: 577

The most painless solution I could find is this:

    let foo: string = 'foohoho';
    let bar: number = 42;
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    foo = bar;

For the record: I am using this in my spec.ts tests file when I want to test a crashing case. Please do not twist TypeScript's hands.

Upvotes: 2

lena
lena

Reputation: 93728

You can put @ts-ignore right above the component in JSX to get it suppressed, like:

  {/* 
  // @ts-ignore */}
  <Counter color={'lightblue'} size={16} />

(see https://github.com/Microsoft/TypeScript/issues/27552.)

But I'd strongly recommend re-writing your components in typescript way to get rid of compiler errors, like:

interface IProps {
    color: string;
    size: number;
}

interface IState {
    count: number;
};

export default class Counter extends Component<IProps, IState> {...}

Upvotes: 16

Related Questions