正文 

当前位置： 首页 > 源码 >

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

     2023-03-13     161

关键词：

【中文标题】TypeScript：如何告诉 TypeScript 我是哪种情况？【英文标题】：TypeScript: How to tell TypeScript in which If case I am? 【发布时间】：2019-03-27 18:56:48 【问题描述】：

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

我有一个<FlatList />，它包含两种类型的场所：餐厅和酒吧。 Restaurant 和 Bar 共享一些属性，但它们也不共享。例如属性servesFood 是餐厅独有的。

renderItem 函数如下所示：

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

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

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

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

注意：出于各种原因，我不能让他们共享一个属性并将first 的一个设置为true，另一个设置为false。

那么我如何告诉 TypeScript 在 If 子句/三元运算符项的一部分中是 Restaurant 类型，而在另一项中是 bar 类型，这样这些 linting 错误就会消失。

【问题讨论】：

下面的语法呢？ ：renderItem = (item: Restaurant | Bar) => return ... 这看起来不像'OOPish'。 Restaurant 和 Bar 使用方法 render() 实现公共接口怎么样？这两个类都有自己的实现或render()。那么这个方法将简单地在renderItem中引用。 【参考方案1】：

您可以做一个简单的比较对象的键/值，这样您就可以知道当前项目的属性 servingFood 是否存在。如果值是null，则意味着item 不包含属性servesFood 像这样的：

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
  ))

【讨论】：

【参考方案2】：

您可以使用类型保护来缩小参数的类型。

您可以使用基于servesFood 字段的可区分联合：

interface Restaurant
    servesFood: true

interface Bar 
  servesFood?: false

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

或者，如果接口不共享 servesFood，您可以使用 in 类型保护

interface Restaurant
    servesFood: true

interface Bar 
  drinks: true

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

【讨论】：

如何修复'Typescript“正在进行类型检查......”花费太长时间'？

】如何修复\\\'Typescript“正在进行类型检查......”花费太长时间\\\'？【英文标题】：Howtofix\'Typescript"Typecheckinginprogress..."takingtoolong\'?如何修复\'Typescript“正在进行类型检查......”花费太长时间\'？【发布时间】：2020-12-0301... 查看详情

如何告诉 Typescript 可以使用字符串类型而不是 `#$string`？

】如何告诉Typescript可以使用字符串类型而不是`#$string`？【英文标题】：HowdoItellTypescriptit\'soktouseastringtypeinsteadof`#$string`?如何告诉Typescript可以使用字符串类型而不是`#$string`？【发布时间】：2021-10-2704:54:03【问题描述】：我在Types... 查看详情

如何安装与旧版 TypeScript 兼容的 @types？

】如何安装与旧版TypeScript兼容的@types？【英文标题】：HowcanIinstall@typescompatiblewithanolderversionofTypeScript?【发布时间】：2018-04-0616:13:35【问题描述】：我的项目使用像@types/express和@types/body-parser这样的包。最近这些.d.ts文件已更新为... 查看详情

如何告诉 TypeScript 我的函数参数是 Enum 键？

】如何告诉TypeScript我的函数参数是Enum键？【英文标题】：HowtotellTypeScriptmyfunctionargumentisanEnumkey?【发布时间】：2020-07-2718:59:26【问题描述】：我有一个枚举，它将HTTP状态映射到他们的代码，如下所示：我可以通过访问它们的密... 查看详情

如何告诉 TypeScript 两个泛型类型是相同的？

】如何告诉TypeScript两个泛型类型是相同的？【英文标题】：HowtotellTypeScriptthattwogenerictypesarethesame?【发布时间】：2021-08-1607:09:11【问题描述】：考虑以下重载函数。functionscan<A>(this:A[],f:(a:A,x:A)=>A):A[];functionscan<A,B>(this:A[... 查看详情

如何告诉 Typescript 编译器在 .ts 文件中编译 JSX？

】如何告诉Typescript编译器在.ts文件中编译JSX？【英文标题】：HowtotellTypescriptcompilertocompileJSXin.tsfiles?【发布时间】：2017-02-1316:35:33【问题描述】：我有一些.ts文件，其中包含.jsx语法。我想告诉tsc编译我的这些.ts文件，就像编译.t... 查看详情

Vue TSX - 如何告诉 Typescript 在可重用组件中允许使用 HTML 属性？

】VueTSX-如何告诉Typescript在可重用组件中允许使用HTML属性？【英文标题】：VueTSX-HowtotellTypescriptthattheHTMLattributesareallowedinreusablecomponents?【发布时间】：2021-06-1511:19:40【问题描述】：假设我有这个输入组件：importdefineComponentfrom"@vue... 查看详情

如何告诉 Passport JS 中的 typescript req.user 永远不会被定义？

】如何告诉PassportJS中的typescriptreq.user永远不会被定义？【英文标题】：Howtotelltypescriptreq.userinPassportJSneverwillbeundefined?【发布时间】：2020-10-2809:49:27【问题描述】：使用PassportJS时，路由中的req.user被视为可能未定义。但是我的路... 查看详情

如何在 TypeScript 2 项目中为 Firebase 3 安装类型？

】如何在TypeScript2项目中为Firebase3安装类型？【英文标题】：HowtoinstalltypingsforFirebase3inaTypeScript2project?【发布时间】：2017-02-0921:15:42【问题描述】：npminstall@types/firebase--save-dev为v2.4.30而非v3安装类型定义文件。我的猜测是它们可能... 查看详情

如何在打字稿中声明全局变量[重复]

...明全局变量[重复]【英文标题】：HowtodeclareaGlobalVariableintypescript[duplicate]【发布时间】：2021-02-1710:27:33【问题描述】：我继承了一个Typescript项目（有.ts），但我呢？似乎无法锻炼如何在Typescript文件中创建全局变量并访问它。我是... 查看详情

Sequelize-typescript 'HasManyCreateAssociationMixin' 不是函数

】Sequelize-typescript\\\'HasManyCreateAssociationMixin\\\'不是函数【英文标题】：Sequelize-typescript\'HasManyCreateAssociationMixin\'isnotafunctionSequelize-typescript\'HasManyCreateAssociationMixin\'不是函数【发布时间】：2020-02-0423:27:04【问 查看详情

检查日期在 Typescript 中是不是有效？

】检查日期在Typescript中是不是有效？【英文标题】：CheckingwhetheraDateisvalidinTypescript?检查日期在Typescript中是否有效？【发布时间】：2020-01-2416:36:21【问题描述】：ThesearethecommonlyacceptedwaysofdoingitinJavascript.然而使用Typescript是我们做... 查看详情

typescript入门知识一（字符串特性）

一，TypeScript多行字符串　　传统JavaScript字符串换行需要+进行拼接，而TypeScript不需要+拼接。看下面实例：　　javaScript：　　varcontent="aaa"+　　　　　　　　"bbbb";　　TypeScript：　　varcontent=`aaa　　　　　　　　bbb`;（注意这里的... 查看详情

如何使用 TypeScript 加载 dojo 模块

】如何使用TypeScript加载dojo模块【英文标题】：HowtoloadadojomoduleusingTypeScript【发布时间】：2012-10-1014:28:09【问题描述】：如果我从CDN加载dojo，如何使用TypeScript导入模块？以下代码不知道在哪里寻找“dojo”：importdojo=module("dojo");有... 查看详情

如何使用 TypeScript 和 Sequelize

】如何使用TypeScript和Sequelize【英文标题】：HowtouseTypeScriptwithSequelize【发布时间】：2020-05-1718:31:05【问题描述】：我已经使用Fastify用Node、PostgreSQL、Sequelize编写了我的服务器应用程序。现在我想使用TypeScript。谁能告诉我如何开始... 查看详情

告诉 typescript 编译 json 文件

】告诉typescript编译json文件【英文标题】：telltypescripttocompilejsonfiles【发布时间】：2017-03-2103:34:43【问题描述】：当我使用导入json文件时，打字稿编译器工作正常consttasks=require(\'./tasks.json\')但是，当我运行tsc时，输出目录不包含t... 查看详情

如何在 Typescript 中正确使用环境变量？ [复制]

】如何在Typescript中正确使用环境变量？[复制]【英文标题】：HowtouseenvironmentvariableinTypescriptproperly?[duplicate]【发布时间】：2021-11-2004:32:11【问题描述】：我正在尝试使用typescript制作一个简单的api，当我使用任何env变量时，我从TS... 查看详情

typescript入门接口

 接口我感觉是很常用的一块定义标准：接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，... 查看详情