时间戳

首页 > 解决方案 > 使用 TS 检查两个可选参数是否已通过或未定义

typescript - 使用 TS 检查两个可选参数是否已通过或未定义

问题描述

我正在用 React native 和 Typescript 编写一个应用程序，我有一个问题。

让我们想象一下，我们有一个简单的组件，它具有三个属性，一个是必需的，两个是可选的：

interface Props {
  requiredProp: string;
  optionalPropA: boolean;
  optionalPropB: Function;
}

在我的应用程序逻辑中，要么必须传递两个可选属性，要么都不传递它们，我想知道如何使用 TS 进行检查？

我只能想到两种方法来实现这一目标：

  1. 在不使用 TS 的情况下，只需if在之前的某个地方检查我的状况return
  2. 将两个可选属性合二为一。使用两个键（每个属性一个键）创建一个对象，并创建一个 TS 类型，以确保它们都存在或都不存在

一些例子：

// Should be good because all params were passed
<SimpleComponent
  requiredProp={'Hello world'}
  optionalPropA={true}
  optionalPropB={() => {}}
/>

// Should be good because only required param was passed
<SimpleComponent
  requiredProp={'Hello world'}
/>

// Should complain that optionalPropB wasn't passed
<SimpleComponent
  requiredProp={'Hello world'}
  optionalPropA={true}
/>

// Should complain that optionalPropA wasn't passed
<SimpleComponent
  requiredProp={'Hello world'}
  optionalPropB={() => {}}
/>

标签： typescriptreact-native

解决方案

您需要为您的功能重载：

这里：

TypeScript 和 React：如何重载高阶组件/装饰器？

或在这里：https ://howtodoinjava.com/typescript/function-overloading/#:~:text=In%20TypeScript%2C%20function%20overloading%2C%20or,number%20of%20parameters%20or%20types.&text=Also %20note%20that%2C%20function%20implementation,with%20all%20the%20overloaded%20signatures。

您的函数应如下所示：

interface PropsInterface {
   requiredProp: string
}

interface OptionalPropsInterface extends PropsInterface {
   optionalPropA: string,
   optionalPropB: string
}

function simpleComponent(data: PropsInterface): JSX.Element
function simpleComponent(data: OptionalPropsInterface): JSX.Element
function simpleComponent(): { 
   // ...
}

export {
   simpleComponent
}

它现在将检查 2 个重载之一是否匹配。如果不是，它会抛出一个错误/用红色下划线

推荐阅读