当前位置:   article > 正文

TypeScript---Ts中的函数总结_ts 函数

ts 函数

1、定义

【函数】封装了一些重复使用的代码,在需要的时候直接调用。

2、声明函数的方式

(1)使用函数声明方式

  1. //1.Js
  2. function add1(x, y) {
  3. return x + y
  4. }
  5. //2.Ts
  6. //命名函数
  7. function add2(x:number, y:number):number{return x + y }

(2)使用函数表达式方式

  1. //函数表达式
  2. //1.Js
  3. let myAdd = function(x, y) {
  4. return x + y;
  5. }
  6. //2.TS 匿名函数
  7. let myAdd=function(x:number, y:number):number{return x + y }

匿名函数自调用】

  1. (function () {
  2. var x = "Hello!!";
  3. console.log(x)
  4. })()
  5. //或者采用箭头函数表现形式
  6. (()=>{
  7. xxxx
  8. })()

(3)同时指定参数类型和返回值类型

  1. // sum2---变量名
  2. // (x: number, y: number) => number当前这个函数的类型
  3. // function (x: number, y: number): number { return x + y }符合上面函数类型的值
  4. const sum2(x: number, y: number) => number = function (x: number, y: number): number {
  5. return x + y
  6.     }
  7. console.log(sum2(12))

 (4)函数构造器(Function构造函数

【构造函数】var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

  1. var myFunction = new Function("a", "b", "return a * b");
  2. var x = myFunction(4, 3);
  3. console.log(x); //12

【递归函数】递归函数即在函数内调用函数本身。

(5)箭头函数

【Lambda 函数】Lambda 函数也称之为箭头函数。箭头函数表达式的语法比函数表达式更短。

箭头函数只有一行语句:( [param1, parma2,…param n] )=>statement;

  1. var foo = (x:number)=>1 + x
  2. console.log(foo(20)) //21

箭头函数是一个语句块:( [param1, parma2,…param n] )=> { // 代码块 }

  1. var foo = (x:number)=> {
  2. x = 1 + x
  3. console.log(x)
  4. }
  5. foo(20) //21

注意:单个参数 () 是可选的: var foo=x=>{};无参数时可以设置空括号:var foo=()=>{}

3、函数参数

【默认参数、可选参数、剩余参数】

默认参数:函数声明时,内部的参数有自己的默认值

可选参数:函数在声明时,内部的参数使用?进行修饰

剩余参数:声明时放在所有参数的最后

  1. const getInfo = function (name: string = "Lisa", hobby?: string, ...args: string[]): string {
  2. if (hobby) {
  3. return name + "喜欢" + hobby+args
  4.         } else {
  5. return name+args
  6.         }
  7.     }
  8. console.log(getInfo()) //Lisa
  9. console.log(getInfo("聪聪","","a","b","c")) //聪聪,a,b,c
  10. console.log(getInfo("大熊""跑步","a","b","c")) //大熊喜欢跑步,a,b,c

4、函数重载

【函数重载】函数方法名相同, 而参数(参数类型,参数数量,参数类型顺序)不同,返回类型可以相同也可以不同。每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。在JS中, 由于弱类型的特点和形参与实参可以不匹配,,是没有函数重载这一说法的, 但在TS中, 与其它面向对象的语言(如Java)就存在此语法。

  1. /*
  2. 函数重载: 函数名相同, 而形参不同的多个函数
  3. 需求: 我们有一个add函数,它可以接收2个string类型的参数进行拼接,也可以接收2个number类型的参数进行相加
  4. */
  5. // 函数重载声明
  6. function add(x: string, y: string): string
  7. function add(x: number, y: number): number
  8. // 定义一个add函数,可以接收2个string类型的参数进行拼接,也可以接收2个number类型的参数进行相加
  9. function add(x: string | number, y: string | number): string | number {
  10. // return x + y //  console.log(name)
  11. // 进行类型判断
  12. if (typeof x === 'string' && typeof y === 'string') {
  13. return x + y
  14.         } else if (typeof x === 'number' && typeof y === 'number') {
  15. return x + y
  16.         } else {
  17. return -1
  18.         }
  19.     }
  20. console.log(add("小明""开心")) //小明开心
  21. console.log(add(12)) //3
  22. // 函数重载作用---传入非法值,ts给出错误提示信息
  23. // console.log(add(1, "鲜美"))

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号