【TS】函数和函数类型

在使用函数的时候,通常会给函数传值,或者给函数一个返回值调用,这个时候就会涉及到函数类型。
函数类型分为两个方面:
1、函数参数
2、函数返回值
语法: function 函数名( 参数 : 参数类型 ) : 返回值类型 { return 返回值 }
函数有几种不同的写法,分别为:声明函数、匿名函数。

声明函数: 也称为函数声明命名函数,下面是声明函数的写法:

  function add ( x : number ,y : number) : number {
    return x + y
  }
  console.log(add(1,2));  // 打印 3

函数add需要两个参数,xy,并且这两个参数的类型都为数字,且这个函数必须有一个返回值,返回值为numberadd() : number 这个 number 就是返回值规定的类型。


匿名函数: 也称为匿名函数函数表达式,以表达式的形式呈现,写法跟声明函数一样,在括号内规定数据类型,括号外面规定返回值类型。

const add2 = function ( x : number , y : number ) : number {
    return  x + y
}
console.log(add2(3,3)); // 打印 6

函数add需要两个参数,xy,并且这两个参数的类型都为数字,且这个函数必须有一个返回值,返回值为number。 add() : number 这个 number 就是返回值规定的类型。


无返回值
并不是所有的函数都有返回值,函数可以没有返回值,如果没有返回值,或者返回值为空,在函数()后面: () : xxx 换成void即可,void就是无返回值,写成any也行,any可以返回任何类型。

// 无返回值 无返回值使用 void 或 any 即可
const emptys = ( params : number) : void => {
  console.log(params);
}
emptys(2)


函数类型的完整写法

const add3 : ( x : number , y : number ) => number = function ( x : number , y : number ) : number {
    return x + y
}
console.log(add3(10,10));  // 打印 20

步骤拆解:
1、add3 : ( x : number , y : number ) : number 这里为规定的函数类型,在这个地方定义了后,函数里面传参必须符合这里定义的规则。传两个参数,类型为number,返回值为number
2、function ( x : number , y : number ) : number { return x + y } 这里就是给函数传参和函数返回值类型规范,这里的规范必须符合前面定义的规范,否则报错。
一般不会用这种写法, 比较繁琐,这里只是举例说明一下。


函数类型使用接口
在函数类型传参中,既然在传参这里规定了数据类型,直接写在函数体上比便于阅读,看起来复杂且长,所以可以使用接口来优化代码,使阅读起来更加简洁。

// 定义接口
interface IPerson {
  username : string
  age : number
}

const person = (data : IPerson) : string => {
   return  `姓名:${data.username},年龄:${data.age}`
}

person函数中,传入的值必须是符合 IPerson 接口的规范,函数必须有返回值,返回值为 string 类型

// 参数
let obj = {
  username : '东方不败',
  age : 18
}
console.log(person(obj));   // 打印 姓名:东方不败,年龄:18

另外,接口是可以继承的,也就是说可以将多个接口组装成一个新的接口,在函数类型中使用这个接口,来大大减少类型规范方面的代码量。关于接口继承方面,请看另一篇【TS】接口和接口继承


案例源码:https://gitee.com/wang_fan_w/ts-seminar

如果觉得这篇文章对你有帮助,欢迎点亮一下star

18 声望
5 粉丝
0 条评论
推荐阅读
css探索渐变-实现饼图-加载图-灯柱
css的渐变分为三种:线性渐变:linear-gradient()圆形渐变:radial-gradient()锥形渐变:conic-gradient()

兔子先森

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木172阅读 13.8k评论 10

手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen152阅读 17.7k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 6.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
18 声望
5 粉丝
宣传栏