TypeScript学习手册:
https://www.tslang.cn/docs/handbook/basic-types.html
一:定义函数的方法
1:一般函数定义的方法(es5)
//函数声明法
function run(){
return 'run';
}
//匿名函数
var run2=function(){
return 'run2';
}
2:ts里面定义函数的方法
函数声明法
//传递参数和返回值都要进行指定类型
//返回类型必须是string类型,不能写成别的数据类型,否则会报错
function run():string{
return '123';
}
run();
console.log(run())
匿名函数的写法
var run2=function():string{//指定返回值类型为string字符串类型
return '1243';
}
run2(); //调用方法
console.log(run2())
或者指定返回值类型为number类型
var run2=function():number{//指定返回值类型为number类型
return 234;
}
run2();//调用方法
console.log(run2())
注意:
//没有参数返回的时候,要定义返回的数据类型
var fun2=function():number{
return 123;
}
alert(fun2());
3:ts定义方法传参,参数是有类型的
//声明式
function getInfo(name:string,age:number):string{
return `${name} --- ${age}`;
}
console.log(getInfo('zhang',23));
//匿名式定义法
var getInfo = function(name:string,age:number):string{
return `${name} --- ${age}`;
}
console.log(getInfo('zhang',23));
//没有返回值的方法,void表示没有返回值
function run():void{
console.log('runnn')
}
run();
二:函数方法可选参数
es5里面方法的实参和形参可以不一样,但是ts中必须一样,如果不一样,必须配置可选参数。
方法可选参数,用问号表示,注意:可选参数必须配置到最后一个位置。
function getInfo(name:string,age?:number):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年龄保密}`;
}
}
console.log(getInfo('zhang'));
console.log(getInfo('zhang' ,2345));
//如果调用函数的时候,不传第二个参数,则要在第二个函数age?上加一个问号。
//问号就表示这个age可以传,可以不传。
三:函数方法默认参数
es5里面没有办法设置默认参数,es6和ts中都可以设置默认参数,如果没有传年龄的参数,则默认为number=20,如果传参数,就是传的那个年龄的参数,和上面的可选参数是类似的。
位置可以放在第一个参数,也可以放在最后一个参数的位置。
function getInfo(name:string,age:number=20):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年龄保密}`;
}
}
console.log(getInfo('zhang'));
console.log(getInfo('zhang' ,23));
四:函数方法剩余参数
求和:
function sum(a:number,b:number,c:number,d:number){
return a+b+c+d
}
sum (1,2,3,4);
console.log(sum (1,2,3,4,));
同理:求积
function sum(a:number,b:number,c:number,d:number){
return a*b*c*d
}
sum (1,2,3,4);
console.log(sum (1,2,3,4,));
三点运算符,接收形参传过来的值(剩余参数)(把sum里面所有传过来的参数全部赋值给result数组)
//三点运算符,接收形参传过来的值,
function sum(...result:number[]):number{
var sum=0;
//遍历result,拿到值
for(var i=0;i<result.length;i++){
sum+=result[i]
}
return sum;
}
sum (1,2,3,4,3);
console.log(sum (1,2,3,4,3));
另一种写法,把1赋给a,2赋给b,后面三个数赋给...result
//另一种写法
function sum(a:number,b:number,...result:number[]):number{
//把1赋值给a,把2赋值给b,把后面三个数赋值给三点运算符
var sum=a+b;
for(var i=0;i<result.length;i++){
sum+=result[i]
}
return sum;
}
sum (1,2,3,4,3);
console.log(sum (1,2,3,4,3));
五:TypeScript的函数重载
实现java里面的面向对象的一种编程的体验,ts为了兼容es5和es6重载的写法和Java中式有一定的区别的。
// ts重载,通过为同一个函数提供多个函数类型定义来实现多种功能的目的
//重载就相当于同名的函数,当es5中出现同名方法,下面的会替换上面的方法
function css(config){
}
function css(config,value){ }
TypeScript的重载,分别返回了字符串(王小婷)和number类型(20)
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));