时间戳

首页 > 解决方案 > 如何在 WebStorm 中抑制 TS2322 警告？

typescript - 如何在 WebStorm 中抑制 TS2322 警告？

问题描述

我在 WebStorm 中创建了一个项目，该项目使用expo init配置为使用 ESLint@typescript-eslint并启用和启用“Typescript 语言服务”（并禁用 TSLint）的 IDE。

App.tsx 如果我用下面的代码替换 的内容，我会在 IDE 的编辑器中突出显示许多检查错误。我可以（如预期的那样）消除其中的大部分

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

但一些错误仍然存​​在，特别是

在此处输入图像描述

与每个Componentin相关联App。render正如预期的那样，我也可以通过禁用“Typescript Language Service”来禁用这些错误，但不能（尽管 IDE 建议这样做）@ts-ignore（在任何范围内）。

唯一干净的就是更换

class Counter extends Component

和

class Counter extends Component<any>

TS2322在我的项目中抑制错误的正确方法是什么？为什么使用<any>工作（我应该使用它）以及为什么@ts-ignore没有效果？

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

标签： typescriptreact-nativewebstormeslint

解决方案

您可以将@ts-ignore其放在 JSX 中的组件正上方以抑制它，例如：

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

（参见https://github.com/Microsoft/TypeScript/issues/27552。）

但我强烈建议以打字稿的方式重新编写组件以消除编译器错误，例如：

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

interface IState {
    count: number;
};

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

推荐阅读