Почему присвоение имени интерфейсу «Props» не дает правильной проверки типов с функциональным компонентом?(машинопись и реакция-нативная)

Question

• tslint-microsoft-contrib версия : ^ 5.2.1
• Версия TSLint : ^ 5.11.0
• TypeScriptверсия : ^ 3.1.6
• Запуск TSLint через : VS Code

Код 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 не учитывает тот факт, что свойство color было использовано в компоненте, и сообщает: [tslint] Unused React property defined in interface: color [react-unused-props-and-state], вуровень интерфейса.

Однако, если функциональный компонент заменен на компонент класса или просто, если интерфейс назван не как Props, например, CardProps, - он воспринимает использование свойства, как и ожидалось.

Ожидаемое поведение

Я ожидаю, что компилятор обнаружит тот факт, что свойство используется внутри компонента, как это происходит в других сценариях, упомянутых выше.

Answer 1

К сожалению, это известная проблема с tslint-microsoft-contrib.Правило react-unused-props-and-state не работает с функциональными компонентами без контроля состояния (SFC).Одно из исправлений - использовать вместо этого компоненты с состоянием (классы).

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