首页 > 其他分享 >[React Typescript] Ensure correct inference for prop types with satisfies & ComponentProps

[React Typescript] Ensure correct inference for prop types with satisfies & ComponentProps

时间:2023-08-07 15:13:02浏览次数:48  
标签:Typescript const buttonProps prop inference satisfies type ComponentProps

import { ComponentProps } from "react";
import { Equal, Expect } from "../helpers/type-utils";

const buttonProps = {
  type: "button",
  // @ts-expect-error
  illegalProperty: "I AM ILLEGAL",
} as const satisfies ComponentProps<'button'>;

<>
  <button {...buttonProps}>Click Me!</button>
</>;

const buttonPropType = buttonProps.type;

type test = Expect<Equal<typeof buttonPropType, "button">>;

In this example, you can omit as const, it still works

标签:Typescript,const,buttonProps,prop,inference,satisfies,type,ComponentProps
From: https://www.cnblogs.com/Answer1215/p/17611514.html

相关文章

  • 【标签属性补充】scoped/ref/props
    【一】scoped新建的组件加了scoped,表示样式只在当前组件生效如果不加,子组件都会使用这个样式<stylescoped></style>scoped是Vue.js中的一个样式作用域限定符,用于将样式限制在当前组件中生效,并不会影响子组件或父组件。使用scoped后,样式只会应用于当前组件的......
  • properties和yaml加载list
    properties和yml加载list方式一:shuhai:test:list:12,13,14@Value(“#{‘${shuhai.test.list}’.split(‘,’)}”)privateListlist;@Value(“${shuhai.test.list}”)privateListlist;方式二:shuhai:test:list:>121314@Valu......
  • 关于Objective-C头文件中的property为readonly,外部还能set成功
    起初是同事和我说,property为readonly,外部还能set成功。实在没想明白。常规的写法,.m中可以直接set成功,而外部创建的FCTest对象,无法set成功(见FCObject)。FCTest.h@interfaceFCTest:NSObject@property(nonatomic,copy,readonly)NSString*name;@endFCTest.m@inte......
  • [Vue warn]: Property or method "todoName" is not defined on the instance but ref
    错误原因先上报错截图报错翻译:解决办法首先需要保证初始化属性时该属性是被动的,两种情况是在数据选项中,是一些基于类的组件。在vue的template中使用了该属性,但是在data或者methods中还并没有被定义,就被使用了,造成了这个错误。在data中定义一下这个数据或者在met......
  • 理解OpenERP的BoM表的Properties
    关于BoM表维护的思考。  采用OpenERP的解决方法,同一型号的产品,根据客户的不同,有200个BoM。BoM的维护是个麻烦问题。例如,某产品的BoM稍有变更,则该产品下的200个BoM都必须做同样的变更。系统没有提供BoM变更维护的工具,因此,如果BoM变更较为频繁则是个很大的问题。目前尚未有好的......
  • OpenApi(Swagger)快速转换成 TypeScript 代码 - STC
    在现代的Web开发中,使用OpenAPI(以前称为Swagger)规范来描述和定义API已经成为一种常见的做法。OpenAPI规范提供了一种统一的方式来描述API的结构、请求和响应,使得开发人员能够更好地理解和使用API。然而,手动编写与OpenAPI规范匹配的客户端代码或服务端框架可能是一项繁......
  • 深入浅出 Typescript
    TypeScript是JavaScript的一个超集,支持ECMAScript6标准(ES6教程)。TypeScript由微软开发的自由和开源的编程语言。TypeScript设计目标是开发大型应用,它可以编译成纯JavaScript,编译出来的JavaScript可以运行在任何浏览器上。目录1TypeScriptVSJavaScript2TypeScri......
  • [Typescript] Partial autocompletion (string & {})
    constpresetSizes={xs:"0.5rem",sm:"1rem",};typeSize=keyoftypeofpresetSizes;//typeLooseSize=Size|string;//theresultwillbestringtypeLooseSize=Size|(string&{});//workingexportconstIcon=(pr......
  • "No appenders found for logger" and "Please configure log4j properly"
    WhydoIseeawarningabout"Noappendersfoundforlogger"and"Pleaseconfigurelog4jproperly"?Thisoccurswhenthedefaultconfigurationfileslog4j.propertiesandlog4j.xmlcannotbefoundandtheapplicationperformsnoexplici......
  • Java中properties文件中的中文乱码问题
    问题代码:1//目标:使用Properties读取属性文件中的内容。2//1、创建properties对象3Propertiesproperties=newProperties();456//2、使用properties对象加载属性文件中的键值对数据。7properties.load(newFileInputSt......