TypeScript函数的基本使用

悟384

已于 2022-09-08 19:41:00 修改

阅读量519

点赞数

文章标签： typescript 前端 javascript

于 2022-09-08 19:28:07 首次发布

本文链接：https://blog.csdn.net/weixin_72173210/article/details/126770494

版权

1.TypeScript函数的基本使用

介绍
函数是JavaScript应用程序的基础。它帮助你实现抽象层，模拟类，信息隐藏和模块。在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方。TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用
函数定义的方式

匿名函数

const makeMoney = function(salary:number,reward:bumber):number{
    return salary+reward;
}

有名函数|命名函数|普通函数

//关键字 变量名(参数:数据类型,参数:数据类型):数据类型
function writeCode(hour:number,sleep:number):number{
    //返回 值
    return hour
}

箭头函数

const seeMeiMei = (time:number):void =>{
    console.log(`我每天要看${time}个小时MeiMei`);
}
seeMeiMei(6)

接口函数

// 接口函数,利用type声明一个函数
type myFunc = (x:number,y:number)=> number

// 函数具体实现
const relFunc:myFunc=(a:number,b:number)=> {
    return a+b;
}
relFunc(10,20)
let res = relFunc(10,20)
console.log(res)

2.函数参数的处理

可选参数:

在TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识?

默认参数:

我们也可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数，语法格式为

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

}

剩余参数:

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。...args :any[]

可选参数

// 可选参数
const func1:(a:number,b:number)=>number=(x:number,y:number)=>{
    return x;
}
const func2 = function(a:number,b?:number):number{
    return a;
}
func2(10)
func2(10,20)
func2(10,undefined)

参数的默认值

//参数的默认值
const func3=function(x:number=100,y:number=200,z:number=300){
    return x+y+z;
}
let res = func3(100,200)
console.log(res) //输出600
let res =func3(100,200,500)
console.log(res) //输出800（）

函数的剩余参数

//函数的剩余参数
const func4 = function(...args:any[]){
    console.log(args)
}
func4(10,20,30,"杨超越")

const func5 = function(a:number,b:string,...args:any[]){
    console.log(a);
    console.log(b);
    console.log(args);
}
func5(100,"杨超越","女明星",22)

3.构造函数

TypeScript 也支持使用JavaScript 内置的构造函数Function()来定义函数:

语法格式如下:

var res = new Function ([arg1[,arg2[,...argN]],]functionBody)

参数说明：

arg1,arg2,...argN : 参考列表
functionBody: 一个含有包括函数的JavaScript语句的字符串

//构造函数
//new 实例化 
var myFunction=new Function("a","b","return a*b");
var res = myFunction(10,20)
console.log(res)

4.函数重载

重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。

每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。

参数类型不同：

function disp(string):void
function disp(number):void

参数数量不同：

function disp(n1:number):void
function disp(x:number,y:number):void

参数类型顺序不同：

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

如果参数类型不同，则参数类型应设置为any。
参数数量不同你可以将不同的参数设置为可选。

export default{}


//不使用函数重载的问题
function add(a:number,b:number){
    return a+b;
}
add(10,20)

//定义函数重载
//关键字  变量名(参数:数据类型,参数:数据类型):返回数据类型
function addFunc(a:number,b:number):number;
function addFunc(a:string,b:string):string;
function addFunc(a:string,b:number):string;
function addFunc(a:number,b:string):string;


//使用函数重载
function addFunc(a:any,b:any):any{
    return a+b;
}
addFunc(10,20);
addFunc("杨超越","女")
addFunc("欧阳娜娜",25)
addFunc(25,"关晓彤")


//定义参数类型与参数数量不同
function star(s1:string):void;
function star(n1:number,s1:string):void;

function star(x:any,y?:any):any{
    console.log(x);
    console.log(y)
}
star("杨超越")
star(20,"ღ( ´･ᴗ･` )比心")