TS-函数重载的应用

163 阅读1分钟

例子

将string类型替换成string字面量联合类型,是为了TS的类型提示能够更精确,在TS中函数重载的意义也是如此。

我们来看一个例子:

function getName(person?: { name: string }): string | null {
	if (person) {
		return person.name;
	}
	return null;
}

const name1 = getName({name: 'zenos'}); 
const name2 = getName();

上面函数的返回类型为string或者null;当入参存在,函数的返回类型为string,当入参不存在,函数的返回类型就是null

但是参数的有无,并没有和返回值类型挂钩,所以就会存在下面这种情况

我们知道,name1的类型应该是string的,但却被推断为string | null,能不能让它更精确一点呢

借助函数重载,我们可以解决这个问题

function getName(person:{name: string}):string;
function getName():null;
function getName(person?: { name: string }): string | null {
	if (person) {
		return person.name;
	}
	return null;
}

const name1 = getName({name: 'zenos'}); 
const name2 = getName();

这样就可以告诉TS,当有入参的时候,函数的返回值类型为string;没有入参的时候,返回值类型为null

效果如下:

总结:

相比Java,TS中的重载显得不尽如人意,但TS仅仅就是这样一个工具,让类型提示更加精确。