为什么解构props在react与Typescript函数需要传递一个对象?

Question

我最近开始使用react with typescript，当我用可选/默认值解构道具时，似乎发生了一些奇怪的事情。例如，使用以下函数生成一个随机id:

interface GenKeyIdProps {
length?: number;
}
/**
* Generate a random id (mainly for use with rendering lists of components.
* genKeyId convert Math.random to base 36 (numbers + letters), and grab the first ${lenght} characters after the decimal.
* @param length (optional) specify how many characters the id should be. default is 5.
* @returns a string with number and letters of specified length.
*/
export const genKeyId = ({ length = 5 }: GenKeyIdProps) => Math.random().toString(36).substr(2, length);

问题是当我试图调用它时:

import { genKeyId } from '../../../helpers';
interface TextWrapperProps {
textLines: string[];
}
const TextWrapper = ({ textLines }: TextWrapperProps) => {
return textLines.map(line => (<div key={genKeyId()}>{line}</div>));
};
export default TextWrapper;

如果我不传递至少一个空对象给genKeyId，我得到以下错误:预期1个参数，但得到0.ts(2554)。

为什么我需要传递一个空对象?我的GenKeyIdProps接口是否指定道具需要成为对象的一部分?我对此有点困惑。

Answer 1

是否我的GenKeyIdProps接口指定道具需要成为对象的一部分?

是的，您已经将GenKeyIdProps定义为对象。所有interface定义都是对象。您的GenKeyIdProps大致相当于:

type GenKeyIdProps = {
length?: number;
};

即具有number类型的可选length属性的对象。

genKeyId不需要接受对象;它不是一个分量函数，它只是一个效用函数。您可以通过删除析构:

将其定义为直接接受length。

export const genKeyId = (length = 5) => Math.random().toString(36).substr(2, length);

或者，如果你想让它接受一个对象，但你希望它能够在没有对象的情况下被调用，你可以默认你正在解构的参数:

export const genKeyId = ({ length = 5 }: GenKeyIdProps = {}) => Math.random().toString(36).substr(2, length);
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^

现在你可以用一个有length的对象调用genKeyIdA);B)没有length的对象;C)没有任何参数

是让getKeyId接受一个数字还是一个具有length属性的对象，这取决于你。