typescript 获取函数名 typescript定义函数

转载

数据解码者 2024-06-12 22:35:24

文章标签 typescript 获取函数名 typescript javascript 前端可选参数 文章分类 TypeScript 前端开发

TypeScript 函数

一、TypeScript 函数

1、函数定义

1. es5 定义函数的方法
2. ts 中定义函数的方法

2、函数返回值
3、带参数函数
4、可选参数
5、默认参数
6、剩余参数
7、函数重载

一、TypeScript 函数

1、函数定义

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

1. es5 定义函数的方法

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

2. ts 中定义函数的方法

// 函数声明法
function run():string {   
	return 'run';
}
//匿名函数
var fun2 = function():number{
	return 123
}

函数只有通过调用才可以执行函数内的代码。

var fun2 = function():number{
	return 123
}
fun2();

2、函数返回值

有时，我们会希望函数将执行的结果返回到调用它的地方。通过使用 return 语句可以实现，在使用 return 语句时，函数会停止执行，并返回指定的值。
语法格式如下所示：

function function_name():return_type { 
    // 语句
    return value; 
}

return_type 是返回值的类型。
return 关键词后跟着要返回的结果。
一般情况下，一个函数只有一个 return 语句。
返回值的类型需要与函数定义的返回类型(return_type)一致。

实例：

// 函数定义
function greet():string { // 返回一个字符串
    return "Hello World" 
} 
function caller() { 
    var msg = greet() // 调用 greet() 函数 
    console.log(msg) 
} 
// 调用函数
caller()

实例中定义了函数 greet()，返回值的类型为 string。
greet() 函数通过 return 语句返回给调用它的地方，即变量 msg，之后输出该返回值。

3、带参数函数

//1.函数声明法定义方法传参
function showInfo(name:string,age:number):string{
    return `姓名：${name},年龄：${age}`
}
//let str = showInfo('小明',18)
//console.log(str);     //打印结果为 姓名：小明,年龄：18

//2.匿名函数定义方法传参
var showInfo = function(name:string,age:number):string{
    return `姓名：${name},年龄：${age}`
}
// let str = showInfo('小明',18)
// console.log(str);		//打印结果为 姓名：小明,年龄：18

一般情况下，一个函数只有一个 return 语句。

没有返回值的方法

function run():void{
   console.log('run')
   }
   run();

4、可选参数

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

function disp(name:string,age?:number):string{
    if(age){
        return `姓名：${name},年龄：${age}`
    }else{
        return `姓名：${name},年龄：保密`
    }
}
console.log(disp("夏末",20));
console.log(disp("夏至"));

ts 中使用❓配置可选参数，可选参数必须配置到参数的最后面，如果上例我们想让 name 是可选的，age 必选，那么就要调整它们的位置，把 name 放在后面, 如果都是可选参数就没关系。

typescript 获取函数名 typescript定义函数_typescript 获取函数名

5、默认参数

可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数，注意：参数不能同时设置为可选和默认。
语法格式为：

function function_name(param1[:type],param2[:type] = default_value) { 
}

实例：

function disp(name:string,age:number=20):string{
    if(age){
        return `姓名：${name},年龄：${age}`
    }else{
        return `姓名：${name},年龄：保密`
    }
}
console.log(disp("夏末"));

以上实例函数的参数 age 设置了默认值为20，调用该函数时如果未传入参数则使用该默认值：

typescript 获取函数名 typescript定义函数_typescript 获取函数名_02

若给age 赋新值，那么结果就赋了新值：

console.log(disp("夏末",18));

typescript 获取函数名 typescript定义函数_可选参数_03

6、剩余参数

当我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

function sum2(a:number,...args:number[]){
     let sum = 0;
 for(const k of args){
 sum = sum + k;
 }
 console.log("a=",a);
 return sum;
}
let t = sum2(10,20,30)
console.log(t);

typescript 获取函数名 typescript定义函数_可选参数_04

结果中sum 和为除了a 之外的所有数值之和。

7、函数重载

重载是同名的函数传入不同的参数，可以执行不同的功能。
每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。
参数类型不同有三种情况：
1.参数类型不同：

function getInfo(string):void; 
function getInfo(number):void;

2.参数数量不同：

function getInfo(n1:number):void; 
function getInfo(x:number,y:number):void;

3.参数类型顺序不同：

function getInfo(n1:number,s1:string):void; 
function getInfo(s:string,n:number):void;

es5 中出现同名方法，下面的会替换上面的方法

function css(config){
}
function css(config,value){

}

ts中函数传入不同的参数，可以执行不同的功能。看一个实例：

function getInfo(name:string):string;
function getInfo(age:number):number;
function getInfo(str:any):any{
    if(typeof str === 'string'){
        return  '我叫' + str;
    }else{
        return '我的年龄是'+ str;
     }
}
console.log(getInfo('小明'));  //正确
console.log(getInfo(20));     //正确
console.log(getInfo(true));   //错误写法，未找到与参数匹配的

当调用字符类型时，可以正确匹配从而得到结果，数值型也是一样，可是当调用布尔型，因为在方法中未匹配参数，所以会报错误。

方法的覆盖与重载的区别