How I suppress a TS2322 warning in WebStorm?

Issue

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

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',
  },
})

Solution

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> {...}

Answered By - lena