我应该使用哪种类型而不是任何类型

Question

代码

Slider.tsx

import { useSelector, connect } from "react-redux";
import { ProductType, ProductItem, StateType } from "types";
const Slider = ({ products, number }: any) => {    ------------------> what type?
//  const number = useSelector((state: StateType) => state.number);
return (
<S.Slider>
<S.SliderWrapper widthSize={number}>
{products}
...
<S.SliderWrapper>
</S.Slider>
);
};
export default connect((state: StateType, { products }: ProductType) => {
return { number: state.number, products };
}, null)(Slider);

types.ts

export interface ProductItem {
id: number;
title: string;
price: number;
bgcolor: string;
colors: { code: string; img: any }[];
}
export interface ProductType {
products: ProductItem[];
}
export interface StateType {
number: number;
}

我现在将类型设置为connect，但我不知道Slider Component的道具类型，所以我将其设置为"any"，效果很好。

我怎么能把它改成输入类型而不是"；任何"；？

Answer 1

您需要创建一个描述products类型的接口。我假设这个数字是number的类型，并创建一个产品，因为我不知道你的对象的形状，请根据你的需求进行调整。所以你会有这样的东西：

export interface IProduct{
id: number,
name: string,
}

并且，为滑块的道具创建一个界面，如下所示：

interface ISliderProps {
products: Array<Product>,
number: number
}
export const Slider = ({products, number}: ISliderProps) => {
// ...
}

或者直接在道具旁边定义：

export const Slider = ({products, number}: {products: Array<Product>, number: number}) => {
// ...
}

你也可以使用React.FC<>界面，允许你这样键入道具：

export const Slider: React.FC<ISliderProps> = ({product, number}) {
// ...
}

但请注意，最后一个解决方案默认情况下会将您的组件暴露给children，这不是您一直想要的。