10分钟让你吃透《TypeScript》函数

╰+攻爆jí腚メ 2024-04-25 20:13 6阅读 0赞

![ab558ff3f5e347b4afb5748d1c26391a.gif][]

**🎬 江城开朗的豌豆**：[个人主页][Link 1]

**🔥 个人专栏**:[《 VUE 》][VUE] [《 javaScript 》][javaScript]

**⛺️ 生活的理想，就是为了理想的生活 !**

![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center]

**目录**

函数声明

函数表达式

可选参数和默认参数

剩余参数（Rest Parameters）

this和箭头函数

重载

--------------------

TypeScript提供了丰富的函数类型定义方式，可以对函数参数、返回值进行类型注解，从而提供了更为强大的类型检查。

### 函数声明 ###

在TypeScript中，你可以在函数声明中对函数的参数和返回值进行类型注解。

function add(x: number, y: number): number {
        return x + y;
    }

在这个例子中，我们定义了一个`add`函数，它接受两个参数`x`和`y`，这两个参数都是`number`类型，函数的返回值也是`number`类型。

如果你尝试调用这个函数并传入一个非数字类型的参数，TypeScript编译器会报错：

add("Hello", 1); // Error: Argument of type '"Hello"' is not assignable to parameter of type 'number'.

### 函数表达式 ###

> 在JavaScript中，函数不仅可以通过函数声明的方式定义，还可以通过函数表达式定义。在TypeScript中，函数表达式也可以使用类型注解：

let myAdd: (x: number, y: number) => number = function(x: number, y: number): number {
        return x + y;
    };

> 在上面的例子中，我们首先定义了`myAdd`变量的类型为一个函数类型`(x: number, y: number) => number`，然后将一个匿名函数赋值给`myAdd`。这个匿名函数的参数`x`和`y`的类型是`number`，返回值的类型也是`number`。

### 可选参数和默认参数 ###

TypeScript支持可选参数和默认参数。你可以使用`?`来标记可选参数，或者使用`=`来指定参数的默认值：

function buildName(firstName: string, lastName?: string) {
        if (lastName)
            return firstName + " " + lastName;
        else
            return firstName;
    }
    
    let result1 = buildName("Bob");  // works correctly now
    let result2 = buildName("Bob", "Adams");  // ah, just right

在上面的例子中，`lastName`是一个可选参数。你可以不传这个参数调用`buildName`函数。

function buildName(firstName: string, lastName = "Smith") {
        return firstName + " " + lastName;
    }
    
    let result1 = buildName("Bob");  // returns "Bob Smith"
    let result2 = buildName("Bob", "Adams");  // returns "Bob Adams"

> 在上面的例子中，`lastName`有一个默认值"Smith"。如果你不传这个参数调用`buildName`函数，`lastName`的值将是"Smith"。

### 剩余参数（Rest Parameters） ###

> 当你不知道要操作的函数会有多少个参数时，TypeScript提供了剩余参数的概念。与JavaScript一样，你可以使用三个
> 
> 点`...`来定义剩余参数：

function buildName(firstName: string, ...restOfName: string[]) {
        return firstName + " " + restOfName.join(" ");
    }
    
    let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

在上面的例子中，`restOfName`就是剩余参数，它可以接受任意数量的参数。

### this和箭头函数 ###

箭头函数可以保留函数创建时的 `this`值，而不是调用时的值。在TypeScript中，你可以使用箭头函数来确保`this`的值：

在上面的例子中，`createCardPicker`函数返回一个箭头函数，这个箭头函数可以访问创建时的`this`值。

### 重载 ###

在JavaScript中，根据传入不同的参数调用同一个函数，返回不同类型的值是常见的情况。TypeScript通过为同一个函数提供多个函数类型定义来实现这个功能：

在上面的例子中，我们定义了两个重载：一个是接受`number`类型的参数，另一个是接受`string`类型的参数。然后我们在实现函数中处理了这两种情况。

> 请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
> 
> ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
> 
> ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
> 
> ✅ 对于文章中部分内容不理解
> 
> ✅ 解答我文章中一些疑问
> 
> ✅ 认为某些交互,功能需要优化,发现BUG
> 
> ✅ 想要添加新功能,对于整体的设计,外观有更好的建议
> 
> 最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧

![b14508487f55437abfbd7e51a1fa11c2.jpeg][]

[ab558ff3f5e347b4afb5748d1c26391a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/3d802ee5d98247be8aae49f35d24d682.gif
[Link 1]: https://blog.csdn.net/qq_48652579?type=blog
[VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html
[javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html
[7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/4aa8040f5e1a400b92c14a583a03eefc.gif
[b14508487f55437abfbd7e51a1fa11c2.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/21b2110fde6a480a9953c1f3012ceb0e.jpeg