ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【TypeScript 4.5】005-第 5 章 函数

2022-02-09 22:58:21  阅读:387  来源: 互联网

标签:4.5 function TypeScript 函数 示例 代码 number 005 类型


【TypeScript 4.5】005-第 5 章 函数

文章目录

一、函数类型表达式

1、概述

函数

函数是任何应用程序的基本构件

无论是本地函数

还是从模块中导入的函数

或者类上的函数等等

向其他很多值一样

这些函数也是一个值

TypeScript 有很多方法来描述如何调用函数

函数类型表达式

fn: (a: string) => void

2、代码演示

代码示例及解释

// 参数是一个函数
function greeter(fn: (a: string) => void) {
    fn("hello world!")
}
// 此函数符合 greeter 参数的标准
function printSth(s: string) {
    console.log(s)
}
// 调用 greeter 传入 printSth 函数
greeter(printSth)

执行结果

PS D:\MyFile\VSCodeProjects\study-ts\第 5 章 函数\dist> node .\01-function.js
hello world!

使用类型别名

两种写法等效,这种写法似乎更优雅一点点!

// 定义一个类型别名
type greeterFuntion = (a: string) => void
// 参数是一个函数
function greeter(fn: greeterFuntion) {
    fn("hello world!")
}
// 此函数符合 greeter 参数的标准
function printSth(s: string) {
    console.log(s)
}
// 调用 greeter 传入 printSth 函数
greeter(printSth)

二、调用签名

1、概述

说明

在 JavaScript 除了可调用之外

函数也可以有属性

然而函数类型表达式的语法不允许声明属性

如果我们想用属性来描述可调用的东西

可以在一个对象类型中写一个调用签名

2022.02.08 01:02:20 增补内容:

那么对象类型就像一个函数了!可以像调用函数一样调用对象!

比如:let message: string = "hello world" message(),其中的 message() 是会报错的!因为 message 没有调用签名!

参考下面的代码示例,DescribableFunction 里面有调用签名,调用签名就类似“函数部分”,有了它就可以像调用函数一样调用对象类型!可以使用诸如 message() 的形式进行调用,与调用函数一样!

代码示例

2022.02.08 09:19:02 增补内容:

调用签名实现了什么?实现了使得一个对象像一个函数一样调用!即带上括号,甚至有参数和返回值!

type DescribableFunction = {
    description: string, // 属性
    // 下面这行代码叫做【调用签名】
    (someArg: number): boolean // 函数类型表达式,注意这里使用的是冒号(:),而不是箭头(=>)!
}

2、代码演示

代码示例及解释

type DescribableFunction = {
    description: string, // 属性
    (someArg: number): boolean // 函数类型表达式
}
function doSth(fn: DescribableFunction){
    console.log(fn.description + "returned" + fn(6))
}
function fn1(num: number) {
    console.log(num)
    return true
}
// 必须给函数绑定属性,否则下一行会报错!
fn1.description = "hello world"
doSth(fn1)

执行结果

PS D:\MyFile\VSCodeProjects\study-ts\第 5 章 函数\dist> node .\02-sign.js
6
hello worldreturnedtrue

三、构造签名

1、概述

说明

JavaScript 的函数可以用 new 操作符来调用

TypeScript 将这些称之为构造函数

因为它们通常会创建一个新的对象

我们可以通过在调用签名之前加一个 new 关键字来写一个构造签名

代码示例

(s: string): Ctor 这些内容叫做【调用签名!】

// 多一个 new
type SomeConstructor = {
    new (s: string): Ctor
}

2、代码演示

代码示例及解释

2022.02.08 09:38:09 增补内容:

这里构造签名的参数与类的构造函数对应,具体参考第 8 章:类!

class Ctor {
    s: string
    constructor(s: string) {
        this.s = s
    }
}
type SomeConstructor = {
    new (s: string): Ctor
}
// SomeConstructor 可以将其理解为一个构造函数
function fn(ctor: SomeConstructor) {
    return new Ctor("难以理解的代码!")
}
const f = fn(Ctor)
console.log(f.s)

执行结果

PS D:\MyFile\VSCodeProjects\study-ts\第 5 章 函数\dist> node .\03-constructor.js
难以理解的代码!

3、同时使用调用签名和构造签名

type CallOrConstructor = {
    new (s: string): Date
    (n?: number): number
}
function fn(date: CallOrConstructor) {
    let a = new date("2022-2-7")
    let b = date(100)
}

四、泛型函数

1、概述

说明

在写函数的时候输入的类型与输出的类型常常存在一定关系

我们会使用发泛型来解决

代码分析

此处,函数输入与返回都是any,我们希望函数返回值类型就是数组元素的类型,这就用到了泛型!

function firstElement(arr any[]) {
    return arr[0]
}

泛型写法

字母 T 是随便写的!T 也就是 Type 的缩写!

function firstElement<T>(arr: T[]): T | undefined {
    return arr[0]
}

调用分析

const a = firstElement(["a", "b", "c"]) // a 是 string 类型
const b = firstElement([1, 2, 3]) // b 是 number 类型
const c = firstElement([]) // c 是 undefined 类型

2、代码示例

正确写法

function firstElement<T>(arr: T[]): T | undefined {
    return arr[0]
}
firstElement(["a", "b", "c"])

错误写法

表示我们实现了输入类型与返回类型的一致!

function firstElement<T>(arr: T[]): T | undefined {
    return 100 // 报错:不能将类型“100”分配给类型“T | undefined”。ts(2322)
}
firstElement(["a", "b", "c"])

另一种错误写法

报错原因:因为 T 类型并不是固定的是 number 类型!

function firstElement<T>(arr: T[]): T | undefined {
    return 100 // 报错:不能将类型“100”分配给类型“T | undefined”。
}
firstElement([1, 2, 3])

还有一种错误写法

这里的 可以不写,但是如果写了后面的数组元素类型就必须与其一致!

一般不写,TS 自动推断即可!

function firstElement<T>(arr: T[]): T | undefined {
    return arr[0]
}
firstElement<string>([1, 2, 3]) // 报错:不能将类型“number”分配给类型“string”。

3、多个泛型

代码示例及解释

说明:

  • 两个泛型参数 T、Q
  • 函数的第一个参数是 T 数组,第二个参数是返回 Q 的函数
  • 函数的返回值是 Q 数组
function map<T, Q>(arr: T[], fn: (arg: T) => Q): Q[] {
    // 此处调用的是数组的 map 方法,里面需要传入一个函数
    return arr.map(fn)
}
const parsed = map(['1', '2', '3'], n => parseInt(n))
console.log(parsed)

执行结果

PS D:\MyFile\VSCodeProjects\study-ts\第 5 章 函数\dist> node .\04-type.js
[ 1, 2, 3 ]

五、泛型函数-限制条件

1、概述

说明

有时候我们希望一个泛型是某个类型的子集

此时我们就需要对泛型的取值范围进行限制了

这和 Java 不一样

代码示例

T extends { length: number } 这使得 T 一定具有属性 length,且是 number 类型!

function longest<T extends { length: number }>(a: T, b: T) {
    if (a.length >= b.length) {
        return a
    } else {
        return b
    }
}

2、代码示例与解释

// 定义函数,要求类型 T 必须具有 length 属性,且是 number 类型
function longest<T extends { length: number }>(a: T, b: T) {
    if (a.length >= b.length) {
        return a
    } else {
        return b
    }
}
// 调用测试
const a = longest([1, 2, 3], [4, 5])
const b = longest("hello", "hi")
// const c = longest(1000, 200) // 报错:类型“number”的参数不能赋给类型“{ length: number; }”的参数。

六、泛型函数-使用受限值

1、代码分析

使用通用约束条件时的常见错误!

function minimumLength<T extends { length: number }> (obj: T, minimum: number): T {
    if (obj.length > minimum) {
        return obj
    } else {
        // 报错:不能将类型“{ length: number; }”分配给类型“T”。
        // "{ length: number; }" 可赋给 "T" 类型的约束,但可以使用约束 "{ length: number; }" 的其他子类型实例化 "T"。
        return { length: minimum }
    }
}

2、执行分析

function minimumLength<T extends { length: number }> (obj: T, minimum: number): T {
    if (obj.length > minimum) {
        return obj
    } else {
        // 报错:不能将类型“{ length: number; }”分配给类型“T”。
        // "{ length: number; }" 可赋给 "T" 类型的约束,但可以使用约束 "{ length: number; }" 的其他子类型实例化 "T"。
        return { length: minimum }
    }
}
// 测试
const arr = minimumLength([1, 2, 3], 5)
// 执行时报错:arr.slice is not a function
console.log(arr.slice(0))

七、泛型函数-指定类型参数

1、概述

说明

TypeScript 通常可以推断出通用的函数调用中预期的类型参数

但并非总是如此

此时我们需要在调用类型参数的时候指定类型参数

代码示例

const arr = combine<string | number>([1, 2, 3], ["hello"])

2、代码演示

function combine<T>(arr1: T[], arr2: T[]): T[] {
    return arr1.concat(arr2)
}
const arr1 = combine([1, 2, 3], [4, 5, 6])
// 报错:不能将类型“string”分配给类型“number”。
// 因为此时 ts 将类型推断为数值类型
const arr2 = combine([1, 2, 3], ["hello"])
// 我们可以主动告诉数组的类型为联合类型 string | number
const arr3 = combine<string | number>([1, 2, 3], ["hello"])

八、泛型函数-编写有些通用函数的准则

1、三个准则

  • 可能的情况下,使用参数本身,而不是对其进行约束;
  • 总是尽可能少得使用类型参数;
  • 如果一个类型的参数只出现在一个地方,请重新考虑你是否真的需要它。

2、代码演示

代码示例及解释(1)

可能的情况下,使用参数本身,而不是对其进行约束

// 此写法更规范,推断返回类型为 T
function firstElement1<T>(arr: T[]) {
    return arr[0]
}
// 推断返回类型为 any
function firstElement2<T extends any[]>(arr: T) {
    return arr[0]
}
// 调用
const x = firstElement1([1, 2, 3])
const y = firstElement2([1, 2, 3])
// 结论:可能的情况下,使用参数本身,而不是对其进行约束

代码示例及解释(2)

总是尽可能少得使用类型参数

// 写法1
function filter1<T>(arr: T[], func: (arg: T) => boolean) {
    return arr.filter(func)
}
// 写法2
function filter2<T, Func extends (arg: T) => boolean>(arr: T[], func: Func) {
    return arr.filter(func)
}
// 评论:第一种写法更好,第二种写法的 Func 除了使得函数更复杂之外,什么也没做!

代码示例及解释(3)

如果一个类型的参数只出现在一个地方,请重新考虑你是否真的需要它

// 完全没必要使用泛型
function greet<Str extends string>(s: Str) {
    console.log("hello " + s)
}
// 更简洁
function greet1(s: string) {
    console.log("hello " + s)
}

九、函数的可选参数

1、概述

JavaScript 中的一些函数经常需要一个可变数量的参数

2、代码分析

function f(n: number) {
    console.log(n.toFixed()) // 0个参数
    console.log(n.toFixed(3)) // 1个参数
}
// 我们可以在参数后面加一个问号(?)表示该参数是可选的
function fn(n?: number) {} // 此时可传入参数 n ,也可以不传!
// 扩展:默认参数,如果想不传参数也可以设置默认参数,如下:
function fn(n: number = 100) {} // 不传参数的时候 n 的值为 100

十、回调中的可选参数

1、概述

当为回调写一个函数类型时

永远不要写一个可选参数

除非你打算在不传递该参数的情况下调用函数

因为在编写调用回调的函数时容易出错!

2、代码演示

代码示例及解释

// 定义函数,这里的 index 是可选参数!
function myForEach(arr: any[], callback: (arg: any, index?: number) => void){
    for (let i = 0; i < arr.length; i++) {
        callback(arr[i], i)
    }
}
// 调用测试
myForEach([1, 2, 3], a => console.log(a))
myForEach([10, 20, 30], (a, i) => console.log(a, i))
// index 是可选参数,当不传入时
function myForEach1(arr: any[], callback: (arg: any, index?: number) => void){
    for (let i = 0; i < arr.length; i++) {
        callback(arr[i])
    }
}
myForEach1([1, 2, 3], a => console.log(a))
myForEach1([10, 20, 30], (a, i) => console.log(a, i))

执行结果

当回调函数的可选参数未传入时,为 undefined ,可能会导致很多错误!

PS D:\MyFile\VSCodeProjects\study-ts\第 5 章 函数\dist> node .\10-callbacks.js
1
2   
3   
10 0
20 1
30 2
1   
2   
3
10 undefined
20 undefined
30 undefined

十一、函数重载-基本语法

1、概述

说明

JavaScript 函数可以在不同参数数量和类型的情况下被调用

在 TypeScript 中我们可以通过编写重载签名

来指定一个可以以不同方式调用的函数

为此,我们通常要写一定数量的函数签名(两个或更多)

代码示例

// 前两个称之为 重载签名
function makeDate(timestamp: number): Date
function makeDate(m: number, d: number, y: number): Date
// 后面一个称之为 实现签名
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
    // ...
}

2、代码示例及解释

function makeDate(timestamp: number): Date
function makeDate(m: number, d: number, y: number): Date
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
    if (d !== undefined && y !== undefined) {
        return new Date(y, mOrTimestamp, d)
    } else {
        return new Date(mOrTimestamp)
    }
}

const d1 = makeDate(12345678)
const d2 = makeDate(2, 9, 2022)
// 报错:没有需要 2 参数的重载,但存在需要 1 或 3 参数的重载。
// 参数是由重载签名决定的,实现签名只是为了适配重载签名,且对外部是隐藏的!
// 所以这里没有能够传两个参数的重载!
const d3 = makeDate(2, 9)

十二、函数重载-重载签名和实现签名

1、三个问题

  • 参数不正确
  • 参数类型不正确
  • 返回类型不正确

2、代码演示

参数不正确

function fn(x: string): void // 重载签名带参数
function fn(){} // 实现签名无参数
// 此处传入参数并不报错,也就再次说明实现签名是隐藏的!
fn("hello")

参数类型不正确*

此处存疑!与老师讲的不同!

function fn(x: boolean): void
function fn(x: string): void
function fn(x: boolean | string) { // 此处只写一个 boolean 或者 string ,老师那里报错,学生们这里正常运行!
    console.log(typeof x)
    console.log(x)
}
// 测试
fn("hello")
fn(true)

返回类型不正确*

此处存疑!与老师讲的不同!

返回什么类型的值都可以,我觉得是不合理的,应该手动添加多个重载签名返回值类型的联合类型!

// 老师的这里会报错!学生们的不会!此处是按照学生的写的!
function fn(x: boolean): string
function fn(x: string): boolean
function fn(x: boolean) {
    if(Math.random() > 0.5){
        return 1
    } else {
        return "111"
    }
}
console.log(typeof fn("111")) // number (这不是固定的)
console.log(typeof fn(true)) // string (这不是固定的)

十三、函数重载-编写好的重载

1、准则

在可能的情况下

总是倾向于使用联合类型的参数

而不是重载函数

2、代码演示

出现问题

function len(x: string): number
function len(arr: any[]): number
function len(a: any) {
    return a.length
}

len("hello")
len([1, 2, 3])
// 报错了,我们不能传入一个可能是"hello"也可能是数组的参数,这个类型是联合类型 "hello" | number[]
len(Math.random() > 0.5 ? "hello" : [100, 200 ,300])

解决问题

// 解决方法:将函数重载换成联合类型
function len(x: string | any[]) {
    return a.length
}
len("hello")
len([1, 2, 3])
len(Math.random() > 0.5 ? "hello" : [100, 200 ,300])

十四、函数内的 this 声明

1、概述

说明

TypeScript 会通过代码流分析来推断函数中的 this 应该是什么

代码示例

const user = {
    id: 123,
    admin: false,
    becomeAdmin: function () {
        // 此处的 this.admin 即指代的是上面的 admin
        this.admin = true
    }
}
// this 作为函数的参数
interface DB {
    filterUsers(filter: (this: User) => boolean): User[]
}

2、代码演示

老师的写法

此处的 this 完全体现不出来作用!换成其他的也会得到同样的结果!

interface User {
    admin: boolean
}
// this 作为函数的参数
interface DB {
    filterUsers(filter: (this: User) => boolean): User[]
}
const db: DB = {
    filterUsers: (filter: (this: User) => boolean) => {
        let user1: User = { admin: true }
        let user2 : User = { admin: true }
        let user3: User = { admin: false }
        return [user1, user2, user3]
    }
}
const admins = db.filterUsers(function(this: User) {
    return this.admin
})
console.log(admins) // [ { admin: true }, { admin: true }, { admin: false } ]

我的写法*

我没有使用 this ,到底 this 怎么使用,还需要进一步探索!

interface User {
    admin: boolean,
    age: number
}
interface DB {
    filterUsers(filter: (user: User) => boolean): User[]
}
const db: DB = {
    filterUsers: (filter: (user: User) => boolean) => {
        let user1: User = { admin: true, age: 25 }
        let user2 : User = { admin: true, age: 18 }
        let user3: User = { admin: false, age: 22 }
        let users: User[] = [user1, user2, user3]
        let returnUsers: User[] = [];
        for (let i = 0; i < users.length; i++) {
            if(filter(users[i])) {
                returnUsers.push(users[i])
            }
        }
        return returnUsers
    }
}
const admins = db.filterUsers(function(user: User) {
    return user.admin && user.age > 20
})

console.log(admins) // [ { admin: true, age: 25 } ]

十五、需要了解的其他类型

1、void

概述

表示没有任何返回值的函数的返回值;

代码示例

自动推断返回值为 void

function go () { return } // 有没有 return 无所谓

2、object

概述

object 指的是任何不是基元的值:string、number、bigint、boolean、symbol、null、undefined

不同与 {} 、也不同于 Object

在 JavaScript 中函数值是对象

它们有属性

比如在原型链里有 Object.prototype

是 Object 的一个实例

可以调用 Object.key 等等

TypeScript 也有对应,也就是小写的 object

注意!小写的 object 不是 大写的 Object

在 TS 中始终使用小写的 object

3、unknown

概述

unknown 类型代表任何值

与 any 类型类似

更安全

因为对未知 unknown 值做任何使其都是不合法的!

代码示例

function fn1(a: any) {
    a.x // 正常
}
function fn1(a: unknown) {
    a.x // 报错:对象的类型为 "unknown"。
}

4、never

概述

never 表示永远不会被观察到的值

代码示例

返回值为 never 的情况:抛出异常;终止执行;死循环。

function fail(msg: string): never {
    throw new Error(msg)
}

联合类型无参数的时候

function fail(x: string | number) {
    if (typeof x === "string") {
        // do sth
    } else if (typeof x === "number") {
        // do sth
    } else {
        // 此时为 never 类型
    }
}

5、Function

概述

全局性的 Function 类型描述了诸如 bind、call、apply 和其他存在于 JavaScript 中所有函数值的属性

他还有一个特殊的属性

即 Function 类型的值总是可以被调用

这些调用返回 any

代码示例

返回类型是 any ,一般情况下我们避免这么做,因为 any 作为返回类型是不安全的!

function doSth(f: Function) {
    return f(1, 2, 3)
}

如果我们需要接受一个任意的函数,而不打算调用它,可以使用箭头函数的方式定义类型

() => void

十六、参数展开运算符-形参展开

1、概述

可选参数和函数重载可以让函数接收各种固定数量的参数

现在我们使用展开运算符来定义函数

可以接收无限数量的参数

2、代码示例

此处的 m 相当于一个数组,所有参数自第二个起被放进这个数组里面!

function multiply(n: number, ...m: number[]) {
    return m.map((x) => n * x)
}
const arr = multiply(10, 1, 2, 3, 4, 5)

十七、参数展开运算符-实参展开

1、概述

说明

上一节,我们可以把真实的参数合并带形参里

通过展开运算符放到一个变量里

相反,我们也可以将一个数组展开到一个调用函数里

代码示例

const arr100 = [1, 2, 3]
const arr200 = [4, 5, 6]
arr100.push(...arr200)

2、代码演示

代码示例

const arr100 = [1, 2, 3]
const arr200 = [4, 5, 6]
arr100.push(...arr200) // 与下效果相同
arr100.push(7, 8, 9, 10) // 与上效果相同
console.log(arr100)

执行结果

PS D:\MyFile\VSCodeProjects\study-ts\第 5 章 函数\dist> node .\17-spread.js
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

3、一个问题

代码分析

const arr100 = [8, 9]
const x = Math.atan2(8, 9) // 没问题
const y = Math.atan2(...arr100) // 报错:扩张参数必须具有元组类型或传递给 rest 参数。
// 此处是因为 Math.atan2() 的参数只能是两个,而 arr100 的元素个数是不确定的

解决问题

关于 as const 参考文章:https://blog.csdn.net/weixin_43263355/article/details/120943605

const arr100 = [8, 9] as const // 将 8 个 9 断言为常量(文字类型)
const x = Math.atan2(...arr100)

十八、参数解构

1、概述

我们可以使用参数重构的方法

将对象实参解压到函数主体的一个或多个局部变量中

2、代码示例

function sum({a, b, c}: {a: number, b: number, c: number}) {
    console.log(a + b + c)
}
sum({ a: 10, b: 20, c: 30 })

十九、返回 void 类型

1、概述*

函数的 void 返回类型可以产生一些不寻常的行为

这种行为我们看上去确实预期的

返回类型为 void 上下文类型

并不强迫函数不返回任何东西

一个具有 void 返回类型的上下文函数类型(type vf = () => void)

在实现时,可以返回任何其他值,但它会被忽略 问题:但是实际上可以打印出来返回值!

当一个字面的函数定义有一个 void 返回类型时

该函数必须不返回任何东西

2、代码演示

此时出现的必须注意的问题,我的 f1() f2() f3() 打印出来是有结果的!并非被忽略了!

// 情况一
type voidFunc = () => void
// 函数实现写法一
const f1: voidFunc = () => {
    return "hello"
}
// 函数实现写法二
const f2: voidFunc = () => true
// 函数实现写法三
const f3: voidFunc = function() {
    return 100
}
// 调用:老师讲的返回值会被忽略,但在我这里却可以正常打印!
console.log(f1()) // hello
console.log(f2()) // true
console.log(f3()) // 100
// 情况二
function go(): void {
    return "hello" // 报错:不能将类型“string”分配给类型“void”。
}

标签:4.5,function,TypeScript,函数,示例,代码,number,005,类型
来源: https://blog.csdn.net/qq_29689343/article/details/122851498

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有