Typescript函数类型-简化基础

函数是非常重要的模块,每个函数执行一个任务来进行的。

1.函数以及箭头函数的定义类型和返回值

(1)函数声明式

typescript 复制代码
function add(x:number,y:number){
    return x + y
  }
console.log(add(3,5)) // 8

(2)函数表达式

typescript 复制代码
const add = function(x:number,y:number){
    return x + y
  }
  console.log(add(2,3)) // 5
  

(3)箭头函数式

typescript 复制代码
const add = (x:number,y:number):number => x+y
  console.log(add(3,3)) // 6
  

函数可以给每个参数添加类型且函数可以添加返回类型,这样能够推断返回值类型。另外:参数不能多一个也不能少一个。箭头函数是有自带返回,不需要加return。

2.函数默认参数or可选参数

(1)函数默认参数

typescript 复制代码
const add = (x:number = 10,y:number = 20):number => x+y
  console.log(add()) // 30

默认参数:传递的参数必须与期望的参数一致,保证在函数本身参数为默认值与结果的返回值一致。

(2)函数可选参数

typescript 复制代码
const add = (x:string,y?:number):string => x+y
  console.log(add("hello"))  // hello

可选参数,可以传也可以不传,当参数不传的时候,一般值就是undefined。一般参数后面添加?可以实现可选。 注意:函数默认参数和可选参数不能用在一起,否则会报错,如下:

typescript 复制代码
function xx(name:string,age?:number = 20){
     return name + age
 }
 // error

(3)函数参数为对象

typescript 复制代码
interface User{
    name:string,
    age:number
 }
 function res(user:User):User{
     return res
  }
  console.log(res({name:'xb',age:18})

可以看到,函数也可以支持对象,首先定义接口类型,然后在函数本身参数类型为User接口类型,且类型为Object。

3.剩余参数

typescript 复制代码
 const fn = (num:number[],...item:any):any =>{
     console.log(num,item)
     return item
 }
 const arr:Array<number>= [3,5,7]
 console.log(fn(arr,'4','5','6')) // 3, 5, 7 ] [ '4', '5', '6' ] [ '4', '5', '6' ]

剩余参数可以是不限的参数的,通过省略号可以在函数参数中使用数组。

4.函数this类型

typescirpt 复制代码
interface User{
    name:number[],
    fn:(this:User,num:number)=>void
 }
 let obj:User = {
     name:[1,2,3],
     fn(this:User,num:number){
         this.name.push(num)
      }
}
obj.fn(4)
console.log(obj) // {name:[1,2,3,4], fn:[Function:fn]}

this在函数中被调用的时候才会指定哪个。fn期望在User对象上调用,this是User的类型。

5.函数重载

函数重载允许同一个函数接收不同数量或者类型的参数 比如:需要实现一个reverse,输入数字123,输出为321,也可能输入字符串hello,输出为olleh 利用联合类型,如下

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('')
     }
 }

虽然还是缺陷的,不能够精确的表达,再来优化下,如下:

typescript 复制代码
function reverse(x:number):number;
function reverse(x:string):string;
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('')
    }
}

前面二个是函数定义,最后一次是函数实现。 注意:一般会有从前面的函数定义开始批评,所以多个函数定义。如果有包含关系,需要优先把精确的定义写在前面。

相关推荐
10年前端老司机2 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星2 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构4 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚5 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin6 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang4537 分钟前
React项目(移动app)
前端
用户61848240219519 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队20 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端
蓝倾1 小时前
如何使用Python通过API接口批量抓取小红书笔记评论?
前端·后端·api