前端 TS 快速入门之四:函数

简介: 前端 TS 快速入门之四:函数

1. 为函数定义类型

一般使用中,我们可以不必完整写出函数类型,因为 TypeScript 会为我们自动推断出类型。

// 书写完成函数类型
let sum: (num1: number, num2: number) => number;
sum = function(num1, num2) {
    return num1 + num2
}
sum(1,2) // 3

2. 可选参数

参数名后面接 ?,就是可选参数。注意:可选参数必须跟在必须参数后面

let square: (x: number, y: number, s?: number) => number;
square = function(width: number, height: number, scale?: number): number {
  if (scale) {
    return width * height * scale;
  } else {
    return width * height;
  }
};
square(5, 6); // 30
square(5, 6, 2); // 60

3. 默认参数

使用 = 给参数赋默认值。

没有给参数传值或传 undefined 时,参数的值就是默认值。

在所有的必须参数后带默认值的参数都是可选的。

有默认值的参数不一定放在必须参数后面,也可以放在前面,当传 undefined 的时,就取默认值。

function square(width = 6, height = 6, scale: number, cut = 10): number {
  return width * height * scale - cut;
}
square(5, undefined, 2); // 5 * 6 * 2 - 10 = 50

4. 剩余参数

function max(a: number, b: number, ...resArr: number[]): number {
  return Math.max(a, b, ...resArr);
}
max(10, 5, 6, 100, 200); // 200

上一章:前端 TS 快速入门之三:class 类

下一章:前端 TS 快速入门之五:泛型 T


目录
相关文章
|
3月前
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客:call、apply、bind,解锁函数新世界,你的前端之路因它们而精彩!
【8月更文挑战第23天】在 JavaScript 的世界里,`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文(即 `this` 的指向),但各有特点:`call` 接受一系列参数并直接调用函数;`apply` 则接收一个参数数组,在处理不确定数量的参数时特别有用;而 `bind` 不会立即执行函数,而是创建一个新版本的函数,其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧,提升代码灵活性和可维护性。
37 0
|
1月前
|
前端开发 JavaScript
前端:实现一个 sleep 函数
在前端开发中,实现一个 `sleep` 函数可以用来暂停代码执行,模拟延迟效果,常用于测试或控制异步操作的节奏。该函数通常基于 `Promise` 和 `setTimeout` 实现,简单易用。
|
2月前
|
存储 前端开发 JavaScript
前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值
本文介绍了JavaScript中作用域的概念,包括全局变量和局部变量的区别,预解析机制(变量提升),以及函数返回值的使用和类型。通过具体示例讲解了变量的作用域、函数的返回值、以及如何通过return关键字从函数中返回数据。
23 1
前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值
|
2月前
|
存储 前端开发 JavaScript
前端基础(十一)_函数声明及调用、函数的形参与实参、arguments参数、函数的参数类型、函数中的问题
本文介绍了JavaScript中函数的声明及调用、形参与实参的概念、arguments对象的使用、函数参数的类型以及函数中this的作用。通过示例代码详细解释了函数如何接收参数、如何处理参数个数不匹配的情况,以及函数在不同上下文中this的指向。
23 1
|
3月前
|
JSON 前端开发 API
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
|
3月前
|
SQL Java 关系型数据库
【前端学java】JDBC快速入门
【8月更文挑战第12天】JDBC快速入门
31 2
【前端学java】JDBC快速入门
|
2月前
|
JavaScript 前端开发
前端JS函数
【9月更文挑战第4天】前端JS函数
27 6
|
3月前
|
存储 前端开发 JavaScript
【前端学JAVA】有手就会!10min快速入门java的基础语法(2)
【8月更文挑战第8天】10min快速入门java的基础语法
41 2
【前端学JAVA】有手就会!10min快速入门java的基础语法(2)
|
3月前
|
JavaScript 前端开发 开发者
前端掌握 ts 的类型体操
【8月更文挑战第23天】前端掌握 ts 的类型体操
42 4
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中