2022-12-03 19:29

TypeScript入门(7) — 函数

王姐姐

WEB前端

(305)

(0)

收藏

1.1. 函数返回值

TypeScript需要指定函数返回值类型。

// 返回一个字符串
function hello():string {
    return "Hello World!" 
}

1.2. 参数类型

参数必须指定类型。如果不指定参数类型报错:error TS7006: Parameter 'x' implicitly has an 'any' type.

//函数返回值为number,参数的数据类型也为number
function add(x: number, y: number): number {  
    return x + y;
}
let r = add(1,2)
console.log(r)

调用add方法必须传两个参数,并且必须为number类型才行。

1.3. 参数默认值

默认参数,可以设置参数的默认值,这样在调用函数的时候,如果不传入该参数的值,则使用默认参数,注意如果默认值不是在最后,调用时使用默认值需要传undefined。

function add(x:number=10, y: number): number {  
    return x + y;
}
let r = add(undefined,2)
console.log(r)//12
r = add(5,2)
console.log(r)//7
function sub(x:number, y: number=10): number {  
    return x + y;
}
r = sub(20) //10
r= sub(20,5)//15

1.4. 可选参数

function fullName(firstName: string, lastName?: string) { //此时lastName为可选参数,非必传
    if(lastName){
        return firstName + " " + lastName;
    }else {
        return firstName;
    }
} 
let name1 = fullName("ma");                
let name2 = fullName("ma", "wan");

ts函数设置可选参数时,只能少传,不能多传,相比之下,js函数的参数可以多传,按顺序取参数。

1.5. 剩余参数

剩余参数可以将一个不确定数量的参数作为一个数组传入,类似于java中的可变参数。注意剩余参数只能用逗号分隔开传入,不能传数组,如果不传值默认为空数组[ ]。


function  sum(i:number,...nums:number[]){
    console.log(nums);
    if(nums.length==0){
        return i;
    }
    return i+nums.reduce((a,b)=>a+b);
}
let total = sum(10,2,3,4);
console.log(total) //19


1.6. 匿名函数

匿名函数是一个没有函数名的函数,在运行时动态声明,除了没有函数名外,其他的与标准函数一样。可以将匿名函数赋值给一个变量,这种表达式就成为函数表达式。

var hello= function() {  //不带参数的匿名函数
    return "hello world!";  
}
console.log(hello())
var add = function(a,b) {  //带参数的匿名函数
    return a + b;  
}
console.log(add(2,3))

 

匿名函数自调用

(function () {
    var str = "Hello World!";  
    console.log(str)    
 })()

 

1.7. 构造函数

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

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)
let myadd = new Function("a","b","return a+b");
console.log(myadd(4,5))//9

1.8. 箭头函数

( [param1, parma2,…param n] )=>statement;

可以指定参数类型,也可以不指定函数的参数类型,通过函数内来推断参数类型。

var add = (x:number)=> {    
    x = 10 + x 
    console.log(x)  
}
add(100)

类型推断:

var func = (x:any)=> {
    if(typeof x=="number") {
        console.log(x+" 是一个数字")
    } else if(typeof x=="string") {
        console.log(x+" 是一个字符串")
    }  
}
func(10)
func("wanma")

无参数:

var sayHello =()=> {    
    console.log("hello world");
}

1.9. 函数重载

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

定义函数重载需要定义重载签名和一个实现签名。

重载签名定义函数的形参和返回类型,没有函数体。一个函数可以有多个重载签名对应于调用该函数的不同方式。

实现签名有参数类型和返回类型,还有实现函数的主体,且只能有一个实现签名。

示例1:

// 重载签名
function print(s1:string):void;
function print(n1:number,s1:string):void;
// 实现签名
function print(x: any,y?:any):void {
    console.log(x);
    console.log(y);
}
print("hello")// hello undefined
print(12,"hello") //12 hello

示例2:

// 重载签名
function greet(person: string): string;
function greet(persons: string[]): string[];
// 实现签名
function greet(person: unknown): unknown {
  if (typeof person === 'string') {
    return `Hello, ${person}!`;
  } else if (Array.isArray(person)) {
    return person.map(name => `Hello, ${name}!`);
  }
  throw new Error('Unable to greet');
}
console.log(greet("wanma"))// hello wanma
console.log(greet(["xiaoma","dama"]))//['Hello, xiaoma!', 'Hello, dama!']


0条评论

点击登录参与评论