关于前端:TypeScript-的函数相关

●函数, 一个再相熟不过的话题了, 之前几章外面咱们也屡次提到过, 而且提到过各种各样的 TS 内和函数相干的内容
●明天, 咱们来具体说一下函数内的各种具体内容的应用函数的可选参数
●在 TS 中, 是能够给函数的参数增加类型限度的, 先来看一个例子

function fn(a: number, b: number): void {}

○这就是一个很简略的函数
○咱们应用的时候, 只有给两个 number 类型的数据作为参数即可
●当初呢, 我有一个想法, 就是我应用这个函数的时候, 第二个参数可不可以不填
○小伙伴: “ 这还不简略吗, 给形参来一个默认值 ”

function fn(a: number, b: number = 0): void {}

○实现工作了, 好简略
●然而我要说的不是这个, 而是当你的逻辑内须要判断用户是不是没有传递参数的时候

●咱们来看上面两个需要
○需要 1: 如果的确传递了两个参数, 那么我依照两个参数去计算结果, 如果第二个没有传递, 我给个默认值, 还是依照两餐参数去计算结果

// 比方, 咱们的随机数函数
function fn(a: number = 10, b: number = 0): number {return Math.floor(Math.random() * (Math.abs(a - b +1))) + Math.min()}

●你传了参数, 我就用你传的, 你没有传递的时候, 那么我就用我本人设定的默认值就好了
○需要 2: 如果传递了两个参数, 我执行两个参数的逻辑, 如果第二个参数没有传递, 那么我就依照一个参数来执行逻辑

// 比方, 咱们设置 cookie 的时候的一个简略的操作
function fn(a: string, b: string, c: number): void {
    let time
    if (c) {time = new Date()
        time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * c)
    }
    document.cookie = `${a}=${b};expires=${c}`
}

●你传递了参数 c, 那么我就用, 你没有传递 c, 那么我就不必就好了
●以上两段逻辑显著不一样
○其实, 说了这么多, 我就是想通知你们一个事件
○那就是函数的参数能够设置选填

function fn(a: number, b?: number): void {}

○只有在书写形参的时候, 在形参前面加上一个 问号(?) 就能够了○就像咱们在对象接口内书写选填成员一样○这样, 这个参数就能够不传递了, 也不会报错
●留神 1. 必选参数不能够放在选填参数的前面

2. 选填参数不容许设置默认值了

函数内的虚构 this
●这里咱们说的可不是函数内的 this 指向谁, 而是如何对函数内的 this 进行类型限度
●小伙伴: ” 什么, this 还须要限度吗 ? “
●当然了, 既然是类型限度, 那么咱们一个也不要放过了
●先来看一个函数

function fn() {console.log(this.innerHTML)
}

○这是一个非常简单的函数
○如果咱们把它当做某一个元素的事件处理函数, 是齐全没有问题的
○然而这里的 this 并没有做出任何限度, 那么在应用的时候会不会呈现问题呢 ?
○TS 肯定会思考这个问题, 所以会给你提醒一个谬误

●所以在 TS 的配置文件内, 有一个配置

{"noImplicitThis": true, // false}

○默认值是 true, 示意在你的我的项目内不容许呈现没有类型限度的 this
○选填是 false, 示意不论你的 this 是什么, ts 都不论了
○所以这是一个解决方案
●然而很显然, 这并不敌对, 咱们最好还是给 this 加上一个限度
○在这里, 咱们就能够在书写函数的时候, 在参数的第一个地位, 加上一个 this 的限度

function fn(this: HTMLDivElement) {console.log(this.innerHTML)
}

○这里的 this 并不是该函数的第一个参数, 而是一个虚构参数, 只是限定了该函数内的 this 数据类型
○既然在这里曾经做出了限度, 那么函数外在应用的时候就不会提醒错了
○然而也说了, 这个函数在调用的时候, 必须要让函数内 this 为 HTMLDivElement 类型

function fn(this: HTMLDivElement) {console.log(this.innerHTML)
}

// box 是获取到得以一个 div 元素
box.onclick = fn

这样就能够, 齐全没有问题的

function fn(this: HTMLDivElement) {console.log(this.innerHTML)
}
fn()

○这样就会提醒谬误了

○因为要求函数内的 this 必须是 HTMLDivElement 类型
○然而如果你间接调用 fn 函数的话, 外部的 this 并不是 HTMLDivElement 类型
○就会提醒谬误了
●留神: 咱们肯定要分清, 这个 this 限定并不是函数的第一个参数

函数的重载
●啥也不说了, 先看一个例子吧○有一个简略的函数, 实现字符串反转操作

function fn(x: string): string {return x.split('').reverse().join('')
}

○在来一个函数, 实现一个数字放大 100 倍的操作

function fn(x: number): number {return x * 100}

○因为某些起因, 我必须要要讲两个函数合并为一个函数

function fn(x: string | number): string | number {
    // 须要在函数内进行条件判断
    if (typeof x === 'number') {return x * 100} else {return x.split('').reverse().join('')
    }
}

●下面这个函数, 看起来没有任何问题, 咱们也能够失常应用
○然而, 我发现应用结束当前呈现了问题

●惊不惊喜, 意不意外, 这是为什么 ?

依据这个函数, 咱们来看
参数限定 : 能够是 string 也能够是 number
返回值限定 : 能够是 string 也能够是 number
看似没有问题, 然而呢 …
它并没有限度什么参数对应什么返回值
比方, 咱们如果参数是 string, 那么返回值能够是 string 或者 number
比方, 咱们如果参数是 number, 那么返回值也能够是 string 或者 number
并不是咱们一开始想要的
参数是 string 返回值也是 string
参数是 number 返回值也是 number
那么当咱们调用的时候, 不论你传递的是什么参数
ts 都会认为, 返回值是 string 或者 number 类型
当你用返回值调用 toFixed 的时候
ts 就会认为, 你有可能是一个 string 类型, 那么 string 类型是没有 toFixed 这个办法的, 所以就会提醒谬误
也就是说, 你这样写完
如果你再也不必返回值了, 那么没啥事
然而如果你要用返回值去调用一些办法, 那么只能调用两种数据类型共有的办法

●那我该怎么办 ?
●这个时候, 就能够用到 函数的重载 了
●其实就是在定义函数之前, 把这个函数我须要的几种状况列举进去

// 状况 1:
function fn(x: string): string
// 状况 2:
function fn(x: number): number
function fn(x: string | number): string | number {if (typeof x === 'number') {return x * 100} else {return x.split('').reverse().join('')
    }
}

○函数还是这个函数○然而在这个函数之前, 咱们列举了两种状况
■参数是 string, 返回值也是 string
■参数是 number, 返回值也是 number
●今后在调用的时候, 就只会呈现这两种状况了

●这样就不会报错了