前端 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


目录
相关文章
|
1天前
|
存储 JavaScript 前端开发
vue 快速入门+vite前端构建工具
vue 快速入门+vite前端构建工具
4 0
|
1月前
|
前端开发 JavaScript
前端 TS 快速入门之三:class 类
前端 TS 快速入门之三:class 类
36 1
|
1月前
|
前端开发 JavaScript
前端 JS 经典:函数管道
前端 JS 经典:函数管道
7 0
|
1月前
|
前端开发
前端 TS 快速入门之六:枚举 enum
前端 TS 快速入门之六:枚举 enum
19 0
|
1月前
|
前端开发
前端 TS 快速入门之五:泛型 T
前端 TS 快速入门之五:泛型 T
22 0
|
1月前
|
前端开发
前端 TS 快速入门之二:接口
前端 TS 快速入门之二:接口
28 0
|
23天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
28 2
|
1月前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
50 1
|
1月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
1月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
40 2