title: How I suppress a TS2322 warning in WebStorm?
body: <p>I have a project in WebStorm created using <code>expo init</code> with the IDE configured to use ESLint with <code>@typescript-eslint</code> and with "Typescript Language Service" enabled (and TSLint disabled).</p>
  
  <p>If I replace the contents of <code>App.tsx</code> <a href="http://www.reactnativeexpress.com/component_api" rel="nofollow noreferrer">with</a> the code below, I get numerous inspection errors highlighted in the IDE's editor. I can (as expected) eliminate most of these with</p>
  
  <pre><code>/* eslint-disable @typescript-eslint/explicit-member-accessibility, @typescript-eslint/no-use-before-define, @typescript-eslint/explicit-function-return-type */
  </code></pre>
  
  <p>but some errors persist, notably </p>
  
  <p><a href="https://i.stack.imgur.com/qzJuQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qzJuQ.png" alt="enter image description here"></a></p>
  
  <p>associated with each <code>Component</code> in <code>App</code>'s <code>render</code>. As expected I can also disable these errors by disabling "Typescript Language Service", but not (despite the IDE suggesting it) with <code>@ts-ignore</code> (in any scope).</p>
  
  <p>The only thing that works cleanly is to replace</p>
  
  <pre><code>class Counter extends Component
  </code></pre>
  
  <p>with</p>
  
  <pre><code>class Counter extends Component&lt;any&gt;
  </code></pre>
  
  <p>What is the correct approach to suppressing the <code>TS2322</code> error in my project? Why does using <code>&lt;any&gt;</code> work (and should I use it) and why does <code>@ts-ignore</code> have no effect?</p>
  
  <hr>
  
  <pre><code>import React, { Component } from 'react'
  import { View, Text, StyleSheet } from 'react-native'
  
  class Counter extends Component {
  
    state = {count: 0}
  
    componentDidMount() {
      setInterval(() =&gt; {
        this.setState({count: this.state.count + 1})
      }, 1000)
    }
  
    render() {
      const {count} = this.state
      const {color, size} = this.props
  
      return (
        &lt;Text style={{color, fontSize: size}}&gt;
          {count}
        &lt;/Text&gt;
      )
    }
  }
  
  export default class App extends Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Counter color={'lightblue'} size={16} /&gt;
          &lt;Counter color={'skyblue'} size={32} /&gt;
          &lt;Counter color={'steelblue'} size={80} /&gt;
          &lt;Counter color={'darkblue'} size={140} /&gt;
        &lt;/View&gt;
      )
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
  })
  </code></pre>