TS使用方法

1、数组对象定义及渲染

1.定义数组类型
2.定义数组
3.直接使用并渲染
interface productsType {
    id: number;
    name: string;
    code: number;
}
const AllProducts: React.FC<IProps> = (props) =>{
     // useState()括号里面的值给valueState
    // valueState数组值，valueState的值只能通过setDate()设置
    const [valueState,setDate] = useState<productsType[]>([
        {id: 1, name: '率矿住s', code: 38},
        {id: 2, name: '率矿住', code: 38},
        {id: 3, name: '率矿住', code: 38},
        {id: 4, name: '率矿住', code: 38}
    ])
    
    return (
        <div>
            <ul>
                {valueState.map(item => <li key={item.id}> {item.name} </li>)}
            </ul>
        </div>
    )
};

2、数组对象的定义方式有：

(1).

interface DataType {
    id: number;
    name: string;
    code: number;
}

const data: DataType[] = [
{id: 1, name: '率矿住s', code: 38},
{id: 2, name: '率矿住', code: 38},
]

(2).

const data: [{
    id: number;
    name: string;
    code: number;
}] = [
{id: 1, name: '率矿住s', code: 38},
{id: 2, name: '率矿住', code: 38},
]

借鉴于：blog.csdn.net/qq_37967853…