TypeScript：如何告诉TypeScript在哪种情况下我是？

我正在使用TypeScript构建一个React本机应用程序。我的初创公司最近从JavaScript切换到TypeScript，我正在迁移代码

我有一个

，由两类场所组成：餐厅和酒吧。餐馆和酒吧共享一些财产，但它们也不共享。例如，

servesFood

属性是餐厅独有的

renderItem

函数如下所示：

renderItem = ({ item }: { item: Restaurant | Bar }) => {
  return item.servesFood ? (
    // ... Restaurant code
  ) : (
    // ... Bar code
  )

renderItem = ({ item }: { item: Restaurant | Bar }) => {
  return ((item["servesFood"] != null) ? (
    // ... Restaurant code, it exists the property servesFood
  ) : (
    // ... Bar code, it doesn't exists the property servesFood so it is null
  ))

问题是，在该三元运算符的条件下，TypeScript会抛出错误：

Property 'servesFood' does not exist on type 'Restaurant | Bar'.
  Property 'servesFood' does not exist on type 'Bar'

此外，在访问特定于类型的属性时，特定于类型的代码中也存在linting错误

注意：出于各种原因，我不能让他们共享一个属性，并在

第一个
上将其设置为true，在另一个
上设置为false

因此，我如何告诉TypeScript，If子句/三元运算符项的一部分是Restaurant类型，另一部分是bar类型，以便消除这些linting错误。
可以使用类型保护来缩小参数的类型

您可以根据
servesFood
字段使用有区别的联合：

interface Restaurant{
    servesFood: true
}
interface Bar {
  servesFood?: false
}
const renderItem = ({ item }: { item: Restaurant | Bar }) => {
      return item.servesFood ? (
        // ... Restaurant code
      ) : (
        // ... Bar code
      )

或者，如果接口不共享
servesFood
，您可以在
类型中使用

interface Restaurant{
    servesFood: true
}
interface Bar {
  drinks: true
}
const renderItem = ({ item }: { item: Restaurant | Bar }) => {
      return 'servesFood' in item ? (
        item.servesFood
      ) : (
        // ... Bar code
        item.drinks
      );

您可以对对象的键/值进行简单的比较，以便知道当前项是否存在属性servesFood。如果值为
null
，则表示
item
不包含属性
servesFood
大概是这样的：

renderItem = ({ item }: { item: Restaurant | Bar }) => {
  return item.servesFood ? (
    // ... Restaurant code
  ) : (
    // ... Bar code
  )

renderItem = ({ item }: { item: Restaurant | Bar }) => {
  return ((item["servesFood"] != null) ? (
    // ... Restaurant code, it exists the property servesFood
  ) : (
    // ... Bar code, it doesn't exists the property servesFood so it is null
  ))

以下语法如何
renderItem=（项目：餐厅|酒吧）=>{return…}
这看起来不像是“OOPish”。如何使用方法
render（）
实现公共接口。这两个类都有自己的实现或
render（）
。然后该方法将在
renderItem
中引用。