关于前端:Vue3源码中的TypeScript重载函数的作用

TypeScript 重载函数的作用案例

C++ 中的一个概念 (百度百科):

函数重载个别指重载函数。重载函数是函数的一种非凡状况，为方便使用，C++ 容许在同一范畴中申明几个性能相似的同名函数，然而这些同名函数的形式参数（指参数的个数、类型或者程序）必须不同，也就是说用同一个函数实现不同的性能。这就是重载函数。

简要总结就是

函数的名称雷同, 然而参数不同的几个函数, 就是函数的重载。

1.Vue3 ref 申明办法的源码中重载函数案例

2. 举一个利用场景中的案例毛病

function ToAdd (a: string | number, b: string | number): string | number | undefined {
// 只须要字符串合并
if (typeof a === 'string' && typeof b === 'string') {return `${a + b}`;
};
// 只须要数字想加
if (typeof a === 'number' && typeof b === 'number') {return a + b;};
} 

大量联结类型有两个毛病:

如果业务中有相似的需要，增加大量联结类型申明 须要专门的逻辑进行判断，而且最终返回值是 string 还是 number 也不能确定。

编辑器提醒无奈确定是 string 还是 number。

3. 应用重载函数解决问题

//  重载申明 2 次 不须要加函数体
function ToAdd(a: number, b: number): number;
function ToAdd(a: string, b: string): string;
function ToAdd(a: any, b: any): any {if (typeof a === 'string' && typeof b === 'string') {return `${a + b}`;
}
return a + b;
}

const test = ToAdd(1, '233'); // 异样提醒 

异样提醒

// 编辑器也能辨认出对应类型
const addString = ToAdd('233', '233'); // 正确 编辑器辨认出 const addString: string
const addNum = ToAdd(1, 1); // 正确 编辑器辨认出 const addNum: number