TypeScript - PropTypes 精确函数

Question

如何将对象分配给使用exact()定义类型的变量？

例如，假设我有一种类型

export const MyType = PropTypes.exact({
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired
})

以及一个接收参数的函数

public function doSomething(x: InferProps<typeof MyType>) { // does something with x }

现在当我想用

调用该函数时

const y = {
  id: 1,
  name: "y",
}

我收到这样的打字稿错误：

 Argument of type { id: number; name: string; } is not assignable to parameter of type
InferProps<Requireable<Required<InferProps<{     id: Validator<number>;     name: Validator<string>; }>>>>
Property isRequired is missing in type { id: number; name: string; } but required in type
InferPropsInner<Pick<Requireable<Required<InferProps<{     id: Validator<number>;     name: Validator<string>; }>>>, "isRequired">>

Answer 1

反应19

PropTypes

已于 2017 年弃用，并且（与

defaultProps

一起）在 React 19 中被删除。

import { type ReactNode } from "react"

export type MyComponentProps = {
  id: number
  name: string
}

export function MyComponent(props: MyComponentProps): ReactNode {
  // ...
}

另一个选择是使用

React.FC

功能组件类型助手 -

import { type FC } from "react"

export type MyComponentProps = {
  id: number
  name: string
}

export const MyComponent: FC<MyComponentProps> = props => { 
  // ...
}