爱学习IT200.cn
Search K

Appearance

带你体验一次类型编程实践 ​

TIP

🎄Hi~ 大家好，我是小鑫同学，资深 IT 从业者，InfoQ 的签约作者，擅长前端开发并在这一领域有多年的经验，致力于分享我在技术方面的见解和心得

在看 uniapp 的教程时看到大量的 API 还是使用的 callback 的方式来接收 API 的执行结果，大量的 API 嵌套使用又会造成回调地狱的现象出现，在 API Promise 化 这一篇中提到了有部分API是已经做了 Promise 化，我这边用 cli 命令初始化的 vite+ts 的项目发现没办法使用对应的 Promise 化 API，所以还是通过一个工具类来实现一下，顺便试着再写一写 TypeScript 类型编程代码。

工具类编写准备： ​

下面这块代码我相信你有过类似想法的jym应该在网上看到过，通过定义这样一个高阶函数来将uniapp api进行包装，并在执行这个高阶函数返回的函数时使用Promise来接管api成功失败所对应的回调函数。

JavaScript
export const promisify = (api) => {
	return (options, ...params) => {
		return new Promise((resolve, reject) => {
			api(Object.assign({}, options, {
				success: resolve,
				fail: reject
			}), ...params);
		});
	}
}
export const promisify = (api) => {
	return (options, ...params) => {
		return new Promise((resolve, reject) => {
			api(Object.assign({}, options, {
				success: resolve,
				fail: reject
			}), ...params);
		});
	}
}

注：高阶函数说的简单点就是传入一个函数并返回一个函数，切记返回的是函数还没有执行，遇到了多少写防抖节流的小伙伴是忘了执行还各个群里问 why 的~

发挥TypeScript类型的强大之处： ​

Typescript内置类型工具： ​

  1. Parameters<T>：提取函数类型的参数所组成的类型列表；
  2. NonNullable<T>：提取传入类型除 null、undefined 以外的类型；

类型编程分析： ​

  1. promisify 函数的输入类型约束：输入的内容均是uniapp api（函数），所以使用泛型来约束输入的类型；
JavaScript
const promisify = <P extends (...args: any) => any>(api: P) => {}
const promisify = <P extends (...args: any) => any>(api: P) => {}
  1. promisify 返回的函数的输入类型约束：这个输入类型实际是 uniapp api 执行的的形参类型，所以需要使用内置的类型工具（1）来提取，我们只提取类型列表的第一项即可，有实际需要可以再扩展：
JavaScript
type ParameterFirst<T extends (...args: any) => any> = Parameters<T>[0];

export const promisify = <P extends (...args: any) => any>(api: P) => {
    return (options: ParameterFirst<P>) => {}
}
type ParameterFirst<T extends (...args: any) => any> = Parameters<T>[0];

export const promisify = <P extends (...args: any) => any>(api: P) => {
    return (options: ParameterFirst<P>) => {}
}
  1. 执行完 promisify 返回的函数后 Promise 对象的类型约束：这里只能通过泛型约束成功状态的类型，成功状态的类型实际上是 uniapp api 选项中 success 属性（回调函数）返回的类型。我们需要先提取到 success 属性，然后再次使用内置类型工具（1）来提取回调函数的返回类型。
JavaScript
type ParameterSuccess<T extends (...args: any) => any> = ParameterFirst<NonNullable<Parameters<T>[0]['success']>>;
type ParameterSuccess<T extends (...args: any) => any> = ParameterFirst<NonNullable<Parameters<T>[0]['success']>>;

注：因为Parameters<T>存在可能得到一个 undefined 类型的情况，所以使用 NonNullable<T> 来进行包装。

完整的promisify工具类： ​

JavaScript
/**
 *  uni.request({
 *      url: 'https://jsonplaceholder.typicode.com/todos/1',
 *      success: (res) => {
 *          console.log(res.data);
 *      }
 *  });
 *  
 *   promisify(uni.request)({ url: '' }).then(res => {
 *     // res.data
 *   }).catch(err => {
 *
 *   });
 *  
 * @param api 
 * @returns 
 */

/**
 * 提取传入函数的第一个形参参数的类型
 */
type ParameterFirst<T extends (...args: any) => any> = Parameters<T>[0];
/**
 * 提取传入函数的第一个形参参数中key为success的参数的类型；
 * 因success类型为函数类型，所以再次提取success函数的第一个形参参数的类型
 */
type ParameterSuccess<T extends (...args: any) => any> = ParameterFirst<NonNullable<Parameters<T>[0]['success']>>;

export const promisify = <P extends (...args: any) => any>(api: P) => {
    return (options: ParameterFirst<P>) => {
        return new Promise<ParameterSuccess<P>>((resolve, reject) => {
            api(
                Object.assign({}, options, {
                    success: resolve,
                    fail: reject,
                }),
            );
        });
    };
};
/**
 *  uni.request({
 *      url: 'https://jsonplaceholder.typicode.com/todos/1',
 *      success: (res) => {
 *          console.log(res.data);
 *      }
 *  });
 *  
 *   promisify(uni.request)({ url: '' }).then(res => {
 *     // res.data
 *   }).catch(err => {
 *
 *   });
 *  
 * @param api 
 * @returns 
 */

/**
 * 提取传入函数的第一个形参参数的类型
 */
type ParameterFirst<T extends (...args: any) => any> = Parameters<T>[0];
/**
 * 提取传入函数的第一个形参参数中key为success的参数的类型；
 * 因success类型为函数类型，所以再次提取success函数的第一个形参参数的类型
 */
type ParameterSuccess<T extends (...args: any) => any> = ParameterFirst<NonNullable<Parameters<T>[0]['success']>>;

export const promisify = <P extends (...args: any) => any>(api: P) => {
    return (options: ParameterFirst<P>) => {
        return new Promise<ParameterSuccess<P>>((resolve, reject) => {
            api(
                Object.assign({}, options, {
                    success: resolve,
                    fail: reject,
                }),
            );
        });
    };
};

结语： ​

既然选择 TypeScript 来编写项目，就要尽可能的发挥出 TypeScript 作用，在万般无奈的时候再用 any 也不迟 ~~~