网站搜索

reactjs - 动态类型的函数参数可以被扩展吗?


这是可能的吗(如果可能,怎么做)?

type extendedValues = { name: string };

type Props<T> {
  values: T & extendedValues ?
}

const ReactFuncComponent = <T extends Props<T>>({ values }: Props<T>) => {
...
}

所以本质上我想说的是,你可以传入一个包含任何字段和任何值的对象,但它也必须包含一个类型为字符串的 name:

<ReactFuncComponent values={{ age: 0, name: '' }} />

答案#1

如果我正确理解了你的问题,你可以通过以下方式实现你想要的结果:

interface Credentials {
  name: string;
}

type ExtendedValues<T> = Credentials & T;

type Props<T> = {
   value: ExtendedValues<T>
}

const TestComponent = <T, >(props: Props<T>) => {
  return <p>Some text here</p>
};

// Example of usage

<TestComponent value={{name: "Name"}} /> // Will be OK
<TestComponent value={{name: "Name", age: 25}} /> // Will be OK
<TestComponent value={{age: 25}} /> // Error: property 'name' is missing