这篇文章主要讲解了“打印稿中函数与类的概念是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“打印稿中函数与类的概念是什么”吧!
函数与类
函数
“蹦”蹦:跳跳,好几天不见,我最近在学习打印稿又遇到了新问题,亟需你的解答。
"跳跳”:啥问题呀,蹦蹦。
“蹦”蹦:什么是快乐星球,什么是……不对不对 什么是函数?TS的函数和JS的函数有啥区别?
「跳跳」:那就带你一起研究。
介绍
「跳跳」:函数是定义行为的语法,其实是为JS添加额外的功能。同样的可以创建有名称的函数和匿名函数。
function add(num1:number,num2:number):number{ return num1 + num2; } console.log(add(1,2));//3 let addNum = (num1:number,num2:number):number => num1+num2; console.log(addNum(1,2));//3
我们可以给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型,因此我们通常省略它。
简而言之,函数类型包含「参数类型」和「返回值类型」两个部分,当写出完整类型的时候,两部分都需要完整书写。其实,可以以参数列表的形式写出参数类型,为每一个参数指定一个名字和类型,增加代码的可读性。
只要参数类型是匹配的,那么就认为它是有效的函数类型,而不在乎参数名是否正确。
第二部分是返回值类型。如之前提到的,返回值类型是函数类型的必要部分,如果函数没有返回任何值,你也必须指定返回值类型为 void而不能留空。
在赋值语句的一边指定了类型但是另一边没有类型的话,TypeScript编译器会自动识别出类型。
函数参数定义的方式
1.直接声明函数参数
function add(num1:number,num2:number):number{ return num1 + num2; } add(1,2);//3
2.解构赋值声明函数参数
function add({num1,num2}:{num1:number,num2:number}):number{ return num1 + num2; } add({x:1,y:2});//3
3.剩余参数声明函数参数
function add(...rest:number[]){ return rest.reduce((pre,cur)=>pre+cur); } add(2,3,4,5);//14 add("yichuan",3);//报错,不能使用字符串
4.命名式声明函数参数
type add = (num1:number,num2:number)=>number; interface add{ (x:number,y:number):number }
调用方式:
let addFun:add=>(num1,num2)=>num1+num2;
5.可选参数和默认参数
function add(num1:number,num2:number,num3?:number):number{ return num1 + num2; }
显而易见:num1和num2是默认参数,num3是可选参数。切记,默认参数放前面,可选参数放后面。
this
在JS中的this指向问题很恼火,this的指向是在函数被调用时进行指定的,但是得整明白函数调用的上下文是什么,这是比较困扰的。其实两者没多大区别。
幸运的是,TS能够通知你错误地使用了this的地方。
函数重载
函数重载或方法重载是使用相同名称和不同参数数量或类型创建多个方法的一种能力。
function addFun(num1:number,num2:number):number; function addFun(num1:string,num2:string):string; function addFun(num1:string,num2:number):string; function addFun(num1:number,num2:string):string; function addFun(num1:any,num2:any):any{ if(typeof num1 === "string" || typeof num2 === "string"){ return num1.toString() + num2.toString(); } return num1 + num2; } console.log(addFun(1,2));
「蹦蹦」:我们可以看到大多数的库源码都是进行函数重载的方式,这是为什么?null