使用多种道具类型反应 Typescript 组件

Posted 2023-03-13

【中文标题】使用多种道具类型反应 Typescript 组件

【英文标题】：React Typescript Component with Multiple Prop Types

【发布时间】：2021-09-07 08:54:30

【问题描述】：

我有以下组件，它将接受一个配置对象，该对象可以是一个包含 name 属性的对象，该属性将是一个字符串，或者在尚未填充配置对象的情况下为布尔值.

type Config = 
  name: string;
;

const Widget = ( config :  config: Config  | boolean) => 
  return <p>config.name</p>;
;

export default function App() 
  let config = 
    name: "Bob"
  ;
  // config = false;
  return (
    <div>
      <h1>Name:</h1>
      config && <Widget config=config />
    </div>
  );

TS 抱怨 Property 'config' does not exist on type 'boolean | config: Config; '.ts(2339)。什么是正确的 TS 修复？似乎用 any 类型对其进行注释似乎确实有效，但我显然想避免这种情况。

【问题讨论】：

应该是Widget = ( config : config: Config | boolean )

【参考方案1】：

我认为您只能使用null 解决您的问题。您的代码如下所示：

   type Config = 
        name: string
    
    
    const Widget = (config : Config | null) => 
    
        if(!config) 
           return !--- not populated config code
         else 
            <p>config.name</p>;
        
    ;

【参考方案2】：

错误与boolean有关。

在制作参数 config : config: Config | boolean 时，您是在说：

参数可以是 config: Config ，或者 参数可能是boolean。

对于 JSX 组件，参数是对象形式的 props。在什么情况下 JSX 道具会是布尔值？绝不。所以这很可能是错误。

改成：

const Widget = ( config :  config: Config ) => 
  return <p>config.name</p>;
;

或者如果您希望配置是可选的：

const Widget = ( config :  config?: Config ) => 
  return <p>config.name</p>;
;

或者如果您希望配置有时出于某种原因接受true/false（您可能不想这样做）：

const Widget = ( config :  config: Config | boolean ) => 
  return <p>config.name</p>;
;