ts——使用泛型定义函数的参数

一个例子

定义函数

function identity<T>(arg : T) : T{
    return arg;
}

调用函数

let out = identity<string>("yivi");

自定义hooks+泛型

定义hooks

// 筛选项的筛选功能
interface FilterProps<T> {
    /**默认值——不可修改*/
    values: T;
}
export function useFilter<T = any>({ values }: FilterProps<T>) {
    const [data, setData] = useState(values);
    const handleReset = () => {
        setData(values);
    };
    const handleChangeData = ({
        e,
        keyword,
        newValue
    }: {
        // event事件
        e?:
            | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
            | SelectChangeEvent<string>
            | SelectChangeEvent<string[]>
            | null;
        // 搜索字段
        keyword: string;
        // 直接提供值—— autocomplete 的多选可以直接提供这个参数&&自定义修改时
        newValue?: any;
    }) => {
        let val;
        if (newValue) {
            val = newValue;
        } else {
            val = e?.target.value;
        }
        setData({ ...data, [keyword]: val });
    };
    return { data, handleChangeData, handleReset };
}

使用hooks

interface SearchValues {
    name: string;
}

const values: SearchValues = {
        name: ''
};
const { data, handleChangeData, handleReset } = useFilter<SearchValues>({ values });

函数的调用签名

接口形式

let myIdentity : <U>(arg : U) => U = identity;

interface IdentityInterface{
    <T>(arg : T) : T;
}
let myidentity : IdentityInterface = identity;

由泛型定义的函数参数没有length属性

我们只需要实现一个接口，让该泛型有这个属性，就可以防止编译器报错了；

interface Length{
    length : number;
}

function identity<T extends Length>(arg : T) : T{
    console.log(arg.length);
    return arg;
}

注意：

• 虽然编译器不会报错了，但如果使用了没有该属性的类型，也是同样会报错；

• 可以传入数组