ts-泛型

泛型

有时书写某个函数时，会丢失一些类型信息（多个位置的类型应该保持一致或有关联的信息）

泛型： 是指附属于函数、类、接口、类型别名之上的类型

泛型相当于是一个类型变量，在定义时，无法预先知道具体的类型，可以用该变量来代替，只有调用时，才能确定它的类型。
很多时候，TS会智能的根据传递的参数，推导出泛型的具体类型。

如果无法完成推导，并且又没有传递具体的类型， 默认为空对象

泛型可以设置默认值

如何在类型别名、接口、类中使用泛型

直接在名称后写上<泛型名称>

泛型约束

泛型约束，用于限制泛型的值

intreface hasNameProperty{
    name: string
}


function nameToUpperCase<T extends hasNameProperty>(obj: T): t{
}

const o = {
    name: 'fds',
    age: 22
}

nameToUpperCase(o);

多泛型

<!   将两个数组进行混合  [1, 3, 4] ['a', 'b', 'c']  返回：[1, 'a', 3, 'b', 4, 'c'] 两个数组的长度必须一致---->
function mixinArray<T, K>(arr1: T[], arr2: K[]) :(T | K)[] {
    if(arr1.length != arr2.length) {
        throw new Error('两个数组长度不等')
    }
    let result:(T | K)[] = [];
    for(let i = 0; i < arr1.length; i ++) {
        result.push(arr1[i]);
        result.push(arr2[i]);
    }
    return result;
}

开发一个字典类（Dictionary）， 字典中会保存键值对的数据

键值对数据的特点：

• 键可以是任何类型，但不允许重复
• 值可以是任何类型
• 每个键对应一个值
• 所有的键类型相同，并且所有的值类型相同

字典类中对键值对数据的操作：

• 按照键，删除对应的键值对
• 循环每一个键值对
• 得到当前键值对的数量
• 判断某个键是否存在
• 重新设置某个键对应的值，如果不存在，重新添加

非空断言: 在数据之后加上一个!, 告诉Ts, 不用考虑该数据为空的类型

export const BoardComp: React.FC<IProps> = function(props ) {

    // const isGameOver = props.isGameOver as boolean;
     const isGameOver = props.isGameOver!;  // 告诉Ts不用考虑数据为空的情况

   const list =  props.chesses.map((type, index) => {
        return (
            <ChessComp type={type} key={index}  onClick={() => {
                if(props.onClick && !isGameOver) {
                    props.onClick(index)
                }
            }}></ChessComp>
        )
    });
    return (
        <div className="board">
            {list}
        </div>
    )
}

BoardComp.defaultProps = {
    isGameOver: false
}