重载允许函数(方法)接收不同类型或数量的参数时,做出不同的处理。
js本身作为动态脚本语言是支持重载的,typescript的重载更多的是类型系统的补全。
函数
function func(arg: number): number;
function func(arg: string): string;
function func(arg: number | string): number | string {
if (typeof arg === "number") {
return 0;
}
return "0";
}
lambda
lambda的重载需要通过定义 type 实现。
type TFunc = {
(x: number): number;
(x: number, y: string): string;
};
export const func: TFunc = (x: number, y = ""): any => {
if (y) {
return `optional: ${y}`;
}
return x;
};
方法
静态方法
class C {
static method(arg: string): string;
static method(): void;
static method(arg?: string) {
return arg;
}
}
实例方法
class C {
public handle(arg: string): string;
public handle(arg: boolean): void;
public handle(arg: string | boolean) {
if (typeof arg === "string") {
return arg;
}
return;
}
}
React组件
普通函数
interface IInputSelectProps<T> {
options: T[];
getOptionsLabel?: (arg: T) => string;
getOptionsValue?: (arg: T) => string;
}
export function InputSelect<T>(props: IInputSelectProps<T>): ReactElement;
export function InputSelect({
options,
getOptionsLabel = (arg) => arg,
getOptionsValue = (arg) => arg,
}: IInputSelectProps<string>): ReactElement {
return <div />;
}
<InputSelect
options={[{ label: "1", value: "2" }]}
getOptionsLabel={(arg) => arg.label}
getOptionsValue={(arg) => arg.value}
/>
lambda
interface IInputSelectProps<T> {
options: T[];
getOptionsLabel?: (arg: T) => string;
getOptionsValue?: (arg: T) => string;
}
type TInputSelect = {
(props: IInputSelectProps<string>): ReactElement;
<T>(props: IInputSelectProps<T>): ReactElement;
};
export const InputSelect: TInputSelect = ({
options,
getOptionsLabel = (arg) => arg,
getOptionsValue = (arg) => arg,
}: IInputSelectProps<string>): ReactElement => {
return <div />;
};
<InputSelect
options={[{ label: "1", value: "2" }]}
getOptionsLabel={(arg) => arg.label}
getOptionsValue={(arg) => arg.value}
/>;