以下文章来自方英航的编程案例假设我们要做一个很简单的Show组件，用法如下：console.log(c)}/>Show组件会显示内容，并在用户点击内容时将内容传递给onClick。所以代码中的c和content总是相等的。您将如何实现Show组件？假设你这样写：interfaceProps{content:anyonClick?:(arg:any)=>void}functionShow(props:Props){const{content,onClick}=propsreturn({content}onClick?.(content)}点我
)}确实可以完成功能，但是它用了两个any，这个不是TypeScript，这是AnyScript_前端训练。Rewrite所以可以计划重写，发现content和onClick的参数一直是一样的，于是这样写：interfaceProps{content:TonClick?:(arg:T)=>void}但是这时候Show报错了：报错的内容是Props需要接受一个参数T，所以你让Show接受一个参数T，然后把T传给Props：functionShow(props:Props){...错误已消除。所以Show组件可以这样使用：contentT=string，所以可以简写如下：一大优点：c的类型不再有任何，但与内容一致：以上是泛型组件的简单演示。不过值得注意的是，上面的Show是我声明为普通函数的，并没有声明为React.FunctionComponent，因为一旦声明为React.FunctionComponent，就没有办法添加泛型了。另外，如果你喜欢使用Class组件，可以这样写Show组件：classShowextendsComponent>{render(){return({this.props.content}this.props.onClick?.(this.props.content)}点我
)}}exportdefaultfunctionApp(){return(console.log(c)}/>);}实际场景在实际工作中，什么时候会遇到泛型组件？这里有一个典型的例子：表格组件。假设我们的Table组件是这样使用的：三条数据，只显示name和age，如何保证cols中的key一定是data中的字段名？使用泛型即可：interfaceProps{data:T[],cols:{key:keyofT//cols的key必须是数据项title的字段名：string}[]}functionTable(props:Props){const{data,cols}=propsreturn({data.map(d=>{cols.map(c=>{d[c.key]})})})}即，当你需要将两个props的类型关联起来时，往往可以使用泛型组件来实现。我不明白，但我想知道下面的代码是如何翻译成TypeScript的：)我不知道如何将它翻译成TypeScript，尤其是将被放置的位置。
