TS中的函数
Posted 青袂婉梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TS中的函数相关的知识，希望对你有一定的参考价值。
1.函数的定义
//ES5里定义函数方法
function run(){ //函数的申明法
return 'run'
}
var run = function{ // 匿名函数
return 'run'
}
//ts中定义函数的方法
function run:string(){ //函数的申明法
return 'run' //必须类型对应
}
var run = function：number{ // 匿名函数
return 123
}
2.ts中定义方法传参
function getInfo(name:string,age:number):string{
return `${name}---${age}`;
}
console.log(getInfo('liangc',26))
var getInfo = function(name:string,age:number):string{
return `${name}---${age}`;
}
console.log(getInfo('liangc',26))
//没有返回值的方法
function run():void{
console('123')
}
3.方法可选参数
//ES5里面方法的形参和实参可以不一样，ts中如果不一样就要配置可选参数
//可选参数必须配置在参数的最后面
function getInfo(name:string,age?:number):string{ //问号代表可传可不传
if(age){
return `${name}---${age}`;
}else{
return `${name},年龄保密`
}
}
console.log(getInfo('liangc'))
4.默认参数
//ES5里没法设置默认参数，ES6和ts中可以设置
function getInfo(name:string,age:number=20):string{ //问号代表可传可不传
if(age){
return `${name}---${age}`;
}else{
return `${name},年龄保密`
}
}
console.log(getInfo('liangc')) //liangc---20
console.log(getInfo('liangc',30)) //liangc---30
5.剩余参数
function sum (a:number,b:number,c:number,d:number){
return a+b+c+d
}
console.log(sum(1,2,3,4))
//三点运算符 接收新参传过来的值
function sum (...arr:number[]):number{
var sum =0;
for(var i=0；i<arr.length;i++){
sum +=arr[i]
}
return sum
}
console.log(sum(1,2,3,4))
//第二种
function sum (a:number,...arr:number[]):number{
var sum =0;
for(var i=0；i<arr.length;i++){
sum +=arr[i]
}
return sum
}
console.log(sum(1,2,3,4))
6.ts函数的重载
//ES5中下面会替换上面的方法
function css(config:any){}
function css(config:any){}
//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
}
}
getInfo('liangc')
getInfo(20)
以上是关于TS中的函数的主要内容，如果未能解决你的问题，请参考以下文章
如何在角度11中的component.ts中调用href中的函数
ts ES5/ES3 中的异步函数或方法需要 'Promise' 构造函数