学习TypeScript(第五天) 函数

函数作为javascript 的一等公民 ， 在TypeScript 里面的 地位肯定不会很低。让我们来一起看看函数的表示方法以及知识点。

主要从 7 个 方面来分享下函数。 主要展示形式为 js 与 ts 进行对比来展示

1.函数声明

JavaScript代码：

// js函数声明
function sum(x, y) {
	return x + y
}

TypeScript代码：

// ts 函数声明
function sum_ts(x: number, y: number): number {
	return x + y
}

对比 js 来说 ， 增加了 输入（传参）与 输出（返回值) 的类型 类型 判定，
不只是类型的判定 ，还有 个数 的判定。加粗样式

2.函数表达式

JavaScript代码：

let express = function (x, y) {
	return x + y
}

直接写可能会写成这样 ：

// 直接可能会写成这样
let express_t = function (x: number, y: number): number {
	return x + y
}

TypeScript代码：

// ts 函数表达式
let express_ts: (x: number, y: number) => number = function (
	x: number,
	y: number
): number {
	return x + y
}

注意点 ： 第二种写法也是可以运行的，但是左边声明变量的类型是被推断出来的。第三种是完整写法

3.接口定义函数形状

JavaScript代码：

let express = function (x, y) {
	return x + y
}

TypeScript代码：

// 定义接口
interface sun_inter {
	(x: number, y: number): number
}

let sum_tss: sun_inter = function (x: number, y: number): number {
	return x + y
}

console.log(sum_tss(1, 100)) // 101

注意接口的书写形式 ，给函数表达式用的哦

4.可选参数

JavaScript代码：

function sum(x, y) {
	console.log(x, y)
}
sum(1) // 1 undefined

TypeScript代码：

function sum(x: number, y?: number): void {
	console.log(x, y)
}
sum(1) // 1 ,undefined

可选参数 就是在参数传入个数不确定的是时候使用 ， 就是在 类型判断的 ： 前面加 ？ 就代表是可选参数。
注意点 ： 可选参数后面不能有必传参数 仔细想想如果后面有必传参数，那么函数该怎么去判断我们传入的参数是可选的还是必须的，所以这样的操作是不被允许的。

5.参数默认值

JavaScript代码：

function strAdd(x = 'hello', y) {
	 return  x + y
}

TypeScript代码：

function strAdd(x: string, y: string = 'hello'): string {
	return x + y
}
console.log(strAdd('world')) // worldhello

这边使用就和es6 一样 ， 但是建议把 必传的放在前面 ， 已经有默认传参（需要传参的放在中间）， 有默认传参（不需要传参的放在最后）

6.剩余参数

JavaScript代码：

function rema(first, ...arr) {
	const arrNew = [first, ...arr]
	return arrNew
}
console.log(rema(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]

TypeScript代码：

function rema(first: number, ...arr: any[]): any[] {
	const arrNew: any[] = [first, ...arr]
	return arrNew
}
console.log(rema(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]

看看使用方法就行了 ， 主要就是添加了类型限制

7.函数重载

函数重载我个人感觉听起来挺高大上的 ， 但是也没有啥 ，一起来看看，

场景 ： 大家都知道翻转数组的方法reverse ， 现在我打算 用 ts 写一个 ， 可以转变数组或字符串顺序的方法

TypeScript代码：

function reverse(x: number | string): number | string | void {
	if (typeof x === 'number') {
		return Number(x.toString().split('').reverse().join(''))
	} else if (typeof x === 'string') {
		return x.split('').reverse().join('')
	}
}
console.log(reverse(12346567)) ```

具体的逻辑大家自己看就可以 ， 个人感觉就是重新写了一个方法，不过这个方法还之前有的 ， 就叫重载 ， 可能还要挂载到 array 的 原型上面。over