❌

普通视图

发现新文章，点击刷新页面。
今天 — 2025年8月20日技术

学Python，先把这“三板斧”练到炉火纯青！（零基础也能看懂）

✇掘金 前端
作者 跟橙姐学代码
2025年8月20日 14:15
今天我就用最白话的方式，带你把这三块地基踩实。不需要背诵复杂的定义，也不用怕看不懂数学符号，保证你能“秒懂+立刻上手”。 一、顺序结构 —— “排队做事，先来后到” 编程世界里最基础的，就是顺序执行。

JavaScript事件处理程序全揭秘：从HTML到IE的各种事件绑定方法！

✇掘金 前端
作者 coding随想
2025年8月20日 12:11
在前端开发的江湖中，事件处理程序就像武林高手手中的秘籍，既能化解用户交互的千变万化，又能掌控浏览器行为的暗流涌动。然而，许多人对事件处理程序的认知仍停留在"点击按钮弹窗"的初级阶段。今天，我们将深入J

TypeScript 函数重载入门：让你的函数签名更精确

✇掘金 前端
作者 烛阴
2025年8月20日 11:22

一、什么是函数重载？

函数重载的核心思想是：对外声明多种调用方式，对内用一个统一的实现来处理。

一个完整的函数重载包含两个主要部分：

  1. 重载签名：定义了函数的各种调用形式，包括参数的类型、数量和返回值的类型。这些签名没有函数体。
  2. 实现签名：这是函数 唯一 的实现，它包含函数体。它的签名必须能够 兼容 所有重载签名。

示例： 一个 add 函数，既可以用于数字相加，也可以用于字符串拼接。

// 1. 重载签名 (Overload Signatures)
function add(x: number, y: number): number;
function add(x: string, y: string): string;

// 2. 实现签名 (Implementation Signature)
function add(x: any, y: any): any {
    // 3. 函数体实现
    if (typeof x === 'number' && typeof y === 'number') {
        return x + y;
    }
    if (typeof x === 'string' && typeof y === 'string') {
        return x + y;
    }
    throw new Error('Invalid arguments');
}

// 调用
const numSum = add(5, 10); // numSum 的类型被推断为 number
console.log(numSum); // 15
const strSum = add('Hello, ', 'World!'); // strSum 的类型被推断为 string
console.log(strSum); // Hello, World!

分析：

  • 外部可见性：当外部代码调用 add 函数时，TypeScript 会看到两个重载签名。它会根据你传入的参数，从上到下查找第一个匹配的签名。
  • 内部实现：实现签名 function add(x: any, y: any): any 对外部是不可见的，你不能用 (any, any) 的方式直接调用 add 函数（除非强制类型转换）。
  • 兼容性：实现签名必须涵盖所有重载签名。在这里，x: any, y: any 可以接受 (number, number) 和 (string, string) 的情况。

二、重载的顺序

函数重载的顺序至关重要，因为 TypeScript 在解析调用时会 按顺序检查。一旦找到匹配的签名，它就会停止搜索。

  • 顺序一般是代码中从上而下的顺序。
  • 注：在有类型包含关系的情况下一般有小而大，例如：先number，再any 

function move(p: Point): void; 
function move(p: any): void; 

// ... 实现 ...
function move(p: any): void {
  // ...
}

move({ x: 1, y: 2 }); // OK, p 的类型被正确推断为 Point

三、常见的几种函数重载的优化方案

1. 联合类型的应用

参数类型不同，但逻辑和返回类型相似

// 使用重载 (显得冗余)
function printId(id: number): void;
function printId(id: string): void;
function printId(id: number | string): void {
  console.log("Your ID is: " + id);
}

// 使用联合类型 (更简洁)
function printIdSimple(id: number | string): void {
  console.log("Your ID is: " + id);
}

2. 可选参数 或 默认参数

如果只是参数数量不同，可以使用 可选参数 或 默认参数 。

// 使用重载
function greet(person: string): string;
function greet(person: string, greeting: string): string;
function greet(person: string, greeting?: string): string {
  return `${greeting || "Hello"}, ${person}!`;
}

// 使用可选参数 (更简洁)
function greetSimple(person: string, greeting?: string): string {
    return `${greeting || "Hello"}, ${person}!`;
}

3. 泛型

当函数的输入类型和输出类型之间存在一种模式或关联，但具体的类型是可变的，泛型 是最佳选择。

// 使用重载 (无法穷举所有类型)
function getFirstElement(arr: number[]): number | undefined;
function getFirstElement(arr: string[]): string | undefined;
function getFirstElement(arr: any[]): any | undefined {
    return arr[0];
}

// 使用泛型 (终极解决方案)
function getFirstElementGeneric<T>(arr: T[]): T | undefined {
    return arr[0];
}

const firstNum = getFirstElementGeneric<number>([1, 2, 3]); // 推断为 number
console.log(firstNum);
const firstStr = getFirstElementGeneric<string>(['a', 'b', 'c']); // 推断为 string
console.log(firstStr);

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多JavaScript/TypeScript开发干货

❌
❌