04ts中的函数

最新推荐文章于 2024-06-26 17:28:07 发布

水木清华-蓝白

最新推荐文章于 2024-06-26 17:28:07 发布

阅读量1.4k

点赞数 2

分类专栏： TS 文章标签： typescript vue.js javascript

本文链接：https://blog.csdn.net/dongqian911/article/details/115143528

版权

TS 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文详细介绍了TypeScript中函数的定义、返回值类型指定、可选参数、默认参数、剩余参数以及函数重载的用法。通过示例展示了如何在TS中创建函数，如何确保函数返回值类型正确，并探讨了参数的多种处理方式，包括对象参数的类型注解。此外，还解释了函数重载的概念及其在实际应用中的作用。

摘要由CSDN通过智能技术生成

通过前面JS的学习，想必大家对函数已经非常了解了。 TS 定义函数的方法和 JS 基本一样，不同的是 TS 可以要求有无返回值。

接下来就介绍一下ts中有关函数的一些东西。

一、函数的定义

1.es5定义函数的方法

 //函数声明法
        function run(){
            return 'run';
        }
        
    //匿名函数
        var run2=function(){
             return 'run2';
        }

2.ts中定义函数

接下来我们同样写一个计算两个数之和的方法：

function total(one: number, two: number) {
  return one + two;
}
const total = getTotal(1, 2);

这时我们并没有定义total的返回值类型，虽然TypeScript可以自己推断出返回值是number类型。但是如果这时候我们的代码不小心写错了，比如：

function total(one: number, two: number) {
  return one + two + "i love you";
}

const total = total(1, 2);

这时候total的值就不是number类型了，但是不会报错。为了保证我们的结果也是number类型，有的时候你可以这样写：

const count: number = total(1, 2);

这样写虽然可以让编辑器报错，但是代码不够严谨，没有解决根本原因，这是total()函数的错误。所以合适的做法是给函数的返回值加上类型注解。

在ts中需要指定函数的返回值类型。

function total(one: number, two: number): number {
  return one + two;
}

const total = total(1, 2);

这样代码就比较严谨了。

二、定义函数返回值

1.ts中定义函数返回值

 //函数声明法
        function run():string{
             return 'run';
         }
      //错误写法
     function run():string{
           return 123;
      }
//匿名函数
     var fun2=function():number{
        return 123;
     }
   alert(fun2()); /*调用方法*/

2.函数无返回值

类型为：void

 function run():void{
        console.log('run'); //只打印出‘run’,没有返回值
     }
   run();

3.never返回类型

never返回类型前面已经介绍过了。如果一个函数是永远也执行不完的，就可以定义返回值为never，那什么样的函数是永远也执行不完的那?比如执行的时候，抛出了异常，这时候就无法执行完了。

function errF(): never {
  throw new Error();
  console.log("this is error");
}

还有一种是一直循环，也是我们常说的死循环，这样也运行不完，比如下面的代码：

function forever(): never {
  while (true) {}
  console.log("Hello,honey");
}

三、函数参数

可选参数
默认参数
剩余参数

1.ts中方法传参

方法传参刚才已经提到了，在传参的时候指定参数的类型：

  function getInfo(name:string,age:number):string{
                return `${name} --- ${age}`;
      }
     alert(getInfo('zhangsan',20));

2.参数为对象（解构）时

比如我们写一个对象参数:

function add({ num1, num2 }) {
  return num1 + num2;
}

const total = add({ num1: 1, num2: 2 });

在这里插入图片描述

这时直接报错了，意思是total有可能会是任何类型，那我们要如何给这样的参数加类型注解？

function add({ num1: number, num2: number }) {
  return num1 + num2;
}
const total = add({ num1: 1, num2: 2 });

你在编辑器中会看到这种写法是完全错误的。那正确的写法应该是这样的。

function add({ num1, num2}:{num1:number,num2:number}):number {
    return num1 + num2;
  }
  const total = add({ num1: 1, num2: 2 });
  console.log(total); //3

解构一个函数的参数是对象的方式是:在后面跟着一个对象类型注解.

如果参数只有一个属性时,应该这样写：

function getcount({ one }: { one: number }): number {
  return one;
}

const num = getcount({ one: 1 });

3.可选参数

es5里面方法的实参和行参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数

function getWorker(name:string,age?:number):string{
                if(age){
                    return `我的名字是：${name} --- 我的年龄是：${age}`;
                }else{
                    return `我的名字是：${name} --- 我的年龄是保密`;
                }
        }
        console.log(getWorker('孙玉鑫')); //我的名字是：孙玉鑫 --- 我的年龄是保密
        console.log(getWorker('潘小小',19)); //我的名字是：潘小小 --- 我的年龄是：19

注意:可选参数必须配置到参数的最后面

//错误的写法
function getWorker(name?:string,age:number):string{
                if(age){
                    return `我的名字是：${name} --- 我的年龄是：${age}`;
                }else{
                    return `我的名字是：${name} --- 我的年龄是保密`;
                }
        }
        console.log(getWorker('谭成铭'));

在这里插入图片描述

4.默认参数

es5里面没法设置默认参数，es6和ts中都可以设置默认参数

function getCodeFarmer(name:string,age:number=22):string{
    if(age==22){
        return `我的名字是：${name} ---我的年龄是默认值：${age}，我是一个码农`;
       }else{
           return `我的名字是：${name} ---我的年龄是：${age}，我是一个码农`;
       }
}

console.log( getCodeFarmer('代高飞'));//我的名字是：代高飞 ---我的年龄是默认值：22，我是一个码农
console.log( getCodeFarmer('高威',15)); //我的名字是：高威 ---我的年龄是：15，我是一个码农

5.剩余参数

刚才我们讨论的默认参数和可选参数有个共同点：它们表示某一个参数。有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。在JavaScript里，你可以使用 arguments来访问所有传入的参数。在TypeScript里，你可以把所有参数收集到一个变量里。剩余参数会被当做个数不限的可选参数。可以一个都没有，同样也可以有任意个。三点运算符接受新参传过来的值。

比如写一个多个数相加的函数

function sum(a:number,b:number,c:number,d:number):number{
             return a+b+c+d;
     }
 console.log(sum(1,2,3,4))

如果还有很多我们不确定的数相加，可以这样写：

function sum(...result:number[]):number{
                var sum=0;
                for(var i=0;i<result.length;i++){
                    sum+=result[i];  
                }
                return sum;
            }
 console.log(sum(1,2,3,4,5,6)) ;

普通参数可以和剩余参数同时传递：

 function sum(a:number,b:number,...result:number[]):number{
                var sum=a+b;
                for(var i=0;i<result.length;i++){
                    sum+=result[i];  
                }
                return sum;
            }
  console.log(sum(1,2,3,4,5,6)) ;

6.ts函数重载

typescript中的重载：通过为同一个函数提供多个函数类型定义来实现多种功能的目的。

在JS中依据不同参数类型或参数个数执行一些不同函数体的实现很常见，在TypeScript中，会有需要用到这种声明的地方。

关于函数重载，必须要把精确的定义放在前面，最后函数实现时，需要使用 |操作符或者?操作符，把所有可能的输入类型全部包含进去，以具体实现。

ts为了兼容es5 以及 es6 重载的写法和java中有区别。

//es5中出现同名方法，下面的会替换上面的方法 
     function getName(name){
            return name;
       }

      function getName(name,work){
          return name+work;

        }

在ts中我们写一个add函数，它可以接收string类型的参数进行拼接，也可以接收number类型的参数进行相加。

/函数重载
// 声明
function some (arg1: string, arg2: string): string
function some (arg1: number, arg2: number): number

// 具体实现
function some (arg1: string | number, arg2: string | number) {
  // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 arg1 + arg2
  if (typeof arg1 === 'string' && typeof arg2 === 'string') {
    return  `拼接两个字符串：${arg1} + ${arg2}`
  } else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
    return arg1 + arg2
  }
}

console.log(some("皮皮虾","跟我走")); //拼接两个字符串：皮皮虾 + 跟我走
console.log(some(12,12)); //24
console.log(some("你好"，25)) //错误

function getUser(name:string):string; 
function getUser(name:string,age:number):string;
function getUser(name:any,age?:any):any{
    if(age){
        return '我叫：'+name+'我的年龄是'+age;
    }else{

        return '我叫：'+name;
    }
}
  console.log(getUser('曹西西'));  /*正确*/

  console.log(getUser(123));  //错误

  console.log(getUser('韩尚尚',20)); //正确

TypeScript 中的函数重载也只是多个函数的声明，具体的逻辑还需要自己去写，它并不会真的将你的多个重名 function 的函数体进行合并。

interface Uodefarmer {
    name: string;
    age: number;
    work:string;  
  }
  interface ProductManager {
    name: string;
    age: number;
    work:string;
    rest:string; 
  }
  declare function doSomething(params: Uodefarmer | ProductManager, flag?: boolean): string;

在这个 doSomething函数里，我们的目的是当传入参数 params是 Uodefarmer（码农）时，不传 flag，当传入 params是 ProductManager（产品经理时）时，传入 flag。TypeScript 并不知道这些，当你传入 params为 Uodefarmer时，flag 同样允许你传入：

const user={
       name:"王冲冲",
       age:10,
       work:"码农"
 }
// 没有报错，但是不符合我们的设想
 doSomething(user,true)

使用函数重载能帮助我们实现：

interface Ucodefarmer {
    name: string;
    age: number;
    work:string;  
  }
  interface ProductManager {
    name: string;
    age: number;
    work:string;
    rest:string; 
  }
 declare  function doSomething(params: Ucodefarmer): string;
 declare  function doSomething(params: ProductManager, flag: boolean): string;
  
 const user={
       name:"王冲冲",
       age:10,
       work:"码农"
 }
 const user2={
    name:"张三",
    age:10,
    work:"码农",
    rest:"ahhah"
}
 doSomething(user，true) //error
 doSomething(user2,true) //正确

函数重载的意义在于能够让你知道传入不同的参数得到不同的结果，如果传入的参数不同，但是得到的结果（类型）却相同，那么这里就不要使用函数重载（没有意义）。如果函数的返回值类型相同，那么就不需要使用函数重载

function func (a: number): number
function func (a: number, b: number): number

// 像这样的是参数个数的区别，我们可以使用可选参数来代替函数重载的定义

function func (a: number, b?: number): number

// 注意第二个参数在类型前边多了一个`?`

// 或是一些参数类型的区别导致的
function func (a: number): number
function func (a: string): number

// 这时我们应该使用联合类型来代替函数重载
function func (a: number | string): number

水木清华-蓝白

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
04ts中的函数

通过前面JS的学习，想必大家对函数已经非常了解了。 TS 定义函数的方法和 JS 基本一样，不同的是 TS 可以要求有无返回值。接下来就介绍一下ts中有关函数的一些东西。一、函数的定义 1.es5定义函数的方法 //函数声明法 function run(){ return 'run'; } //匿名函数 var run2=function(){ return 'run2
复制链接

扫一扫

专栏目录