为什么命名接口 'Props' 不能对功能组件进行正确的类型检查？ （打字稿和本机反应）

Question

• tslint-microsoft-contrib 版本: ^5.2.1
• TSLint 版本: ^5.11.0
• TypeScript 版本: ^3.1.6
• 运行 TSLint 通过：VS 代码

正在检查 TypeScript 代码

import * as React from 'react'
import { View } from 'react-native'

interface Props {
  name: string
  color: string
  price: string
}

const Card = ({ name, color, price }: Props) => (
  <View style={{ backgroundColor: color }} />
)

export default Card

tslint.json配置：

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended",
    "tslint-config-standard",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "jsRules": {},
  "rulesDirectory": ["node_modules/tslint-microsoft-contrib"],
  "rules": {
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "member-ordering": false,
    "jsx-no-lambda": false,
    "jsx-boolean-value": false,
    "interface-name": false,
    "semicolon": false,
    "react-unused-props-and-state": [
      true,
      { "props-interface-regex": "Props$", "state-interface-regex": "State$" }
    ]
  }
}

实际行为

Typescript 没有注意到颜色 属性 已在组件中使用这一事实，并报告：[tslint] Unused React property defined in interface: color [react-unused-props-and-state]，在界面级别。

但是，如果功能组件更改为 class 组件，或者简单地说，如果接口的名称不是 Props，例如CardProps - 它按预期使用 属性。

预期行为

我希望编译器能够意识到 属性 正在组件中使用，就像在上述其他场景中一样。

Answer 1

不幸的是，这是 tslint-microsoft-contrib 的一个已知问题。 react-unused-props-and-state 规则不适用于无状态功能组件 (SFC)。一种解决方法是改用有状态组件 (类)。

https://github.com/Microsoft/tslint-microsoft-contrib/issues/339