React-TS学习

TS我认为的定义

ts就是一个用于代码检查的工具，以避免在浏览器中运行后才出现错误，并且并不是很容易进行追踪

在代码顶部设置说明

interface SearchPanelProps{
  users:User[],
  param:{
    name:string;
    personId:string;
  },
  setParam:(param:SearchPanelProps['param'])=>void;
}

在函数中应用适当的类型说明

export const SearchPanel = ({users,param,setParam}:SearchPanelProps) => {}

检查代码中的出错项，并进行更改

使引入的js包具备ts功能

安装@types/qs

npm i --save-dev @types/qs

这时候node_modules中就有了翻译后的ts文件了

TS类型

number，string，boolean，函数，array，any，void，object，tuple，enum，null，undefined，unknown，never，interface
tuple： “数量固定，类型可以各异”版的数组
unknown： unknown是一个 "严格"版的 any 传入什么都可以 但是使用的时候就有限制了，比如不能点没有的属性，不能复制给任何人
never:

泛型

传入什么类型就导出什么类型
先定义占位符：将传入参数与返回参数绑定在一起

export const useDebounce = <V>(value:V,delay?:number) => {
    console.log(value);
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    // 每次在value变化以后，设置一个定时器
    const timeout = setTimeout(() => setDebouncedValue(value), delay);
    // 每次在上一个useEffect处理完以后再运行
    return () => clearTimeout(timeout);
  }, [value, delay]);

  return debouncedValue;
};

自定义setArray