• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

TypeScript + React 组件属性之间的依赖

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

考察如下场景:

  • 一个自定义的下拉选择框有个 type 属性包含两种可能的值 "native" | "simulate"
  • typesimulate 时还希望传递一个 appearence控制其样式
  • typenative 时则不希望传递 appearence 属性

appearence 属性是否通过 TypeScript 的类型检查依赖于 type 的值,请问组件的属性类型如何定义。

一开始会以为这里需要借助泛型等手段来构造一个复杂类型,其实大可不必。因为后来一想不防用 Union Types 试试,实践后证实,事情其实没想的那么复杂。

类型定义:

type SelectProps =
  | {
      type: "native";
    }
  | {
      type: "simulate";
      appearance: "default" | "link" | "button";
    };

使用:

function CustomSelect(props: SelectProps) {
  return <div>...</div>;
}

function App() {
  return (
    <>
    {/* ✅ */}
      <CustomSelect type="native" />
      {/* ❌ Type '{ type: "native"; appearance: string; }' is not assignable to type 'IntrinsicAttributes & SelectProps'.
  Property 'appearance' does not exist on type 'IntrinsicAttributes & { type: "native"; }'. */}
      <CustomSelect type="native" appearance="button" />
      {/* ❌ Type '{ type: "simulate"; }' is not assignable to type 'IntrinsicAttributes & SelectProps'.
  Property 'appearance' is missing in type '{ type: "simulate"; }' but required in type '{ type: "simulate"; appearance: "default" | "link" | "button"; }'. */}
      <CustomSelect type="simulate" />
    {/* ✅ */}
      <CustomSelect type="simulate" appearance="button" />
    </>
  );
}

The text was updated successfully, but these errors were encountered:


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[Vue+TS]UseDependencyInjectioninVueUsing@Injectand@ProvideDecoratorswithTypeScri ...发布时间:2022-07-18
下一篇:
typescript之参数特性发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap