typescript中的泛型的使用

1、泛型的定义：一种方法使返回值的类型与传入参数的类型是相同的。使用了类型变量，它是一种特殊的变量，只用于表示类型而不是值

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

2、泛型变量

function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

3、泛型类型

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

interface GenericIdentityFn {
    <T>(arg: T): T;
}

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

let myIdentity: GenericIdentityFn = identity;

 4、在React + ts的项目里使用泛型和Promise

1、在ts的配置里添加es2015
2、代码如下
// hooks -----
import { useRef, useCallback } from 'react';

function useLockFn<P extends any[] = any[], V extends any = any>(fn: (...args: P) => Promise<V>) {
  const lockRef = useRef(false);

  return useCallback(
    async (...args: P) => {
      if (lockRef.current) return;
      lockRef.current = true;
      try {
        const ret = await fn(...args);
        lockRef.current = false;
        return ret;
      } catch (e) {
        lockRef.current = false;
        throw e;
      }
    },
    [fn],
  );
}

export default useLockFn;

// 在页面里调用Hooks
import React, { FC } from 'react';
import useLockFn from '../hooks/useLockFn';
// 创建接口类型
export interface Iprops {
  value: number;
  // 表示undefined
  onIncrement: () => void;
  onDecrement: () => void;
}

export interface Dprops {
  value: number;
}

// 使用接口代替PropTypes 进行类型校验
// const Counter = ({ value }: Iprops) => {
//   return <p>Clicked: {value} times</p>;
// };
const Demo: FC<Dprops> = (props) => {
  const { value, ...restProps } = props;
  // 应该写一个promise的泛型
  // var demo =
  // const demo = new Promise((resolve: () => void, reject) => {
  //   console.log('123');
  // });
  // 自己总结下，在ts中怎么写和使用Promise
  // function red() {
  //   console.log('red');
  // }
  // function green() {
  //   console.log('green');
  // }
  // function yellow() {
  //   console.log('yellow');
  // }
  // function light(time: number, name) {
  //   return new Promise((resolve) => {
  //     setTimeout(() => {
  //       name();
  //       resolve();
  //     }, time);
  //   });
  // }
  // function step() {
  //   Promise.resolve().then(() => {
  //     return light(3000, red);
  //   });
  // }


  // 直接写会报错，必须符合泛型的数值使用
  function demo(): Promise<any> {
    // return new Promise((resolve) => {
    //   console.log('123');
    // });
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log('123');
        // alert('不可以');
      }, 100);
    });
  }
  // var promise = new Promise(function (reslove, reject) {
  //   setTimeout(
  //     function (res) {
  //       reslove(res);
  //     },
  //     1000,
  //     '成功'
  //   );
  // });
  // promise.then(function (res) {
  //   console.log(res); //'成功'
  // });
  // var demo = () => {
  //   console.log('234');
  // };

  useLockFn(demo);

  return <div onClick={useLockFn(demo)}>1111</div>;
};

export default Demo;