函数是JavaScript应用程序的基础。 它帮助你实现抽象层,模拟类,信息隐藏和模块。 在TypeScript里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义 行为的地方。 TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易地使用。
一、js中的三种定义函数的ts实现
二、ts中函数声明和实现分离的写法
(1)利用type声明函数
(2)利用interface声明函数
三、js函数参数的三种用法的ts实现
(1)可选参数
(2)默认参数
(3)剩余参数
和JavaScript一样,TypeScript函数可以创建有名字的函数和匿名函数。 你可以随意选择适合应用程序的方式,不论是定义一系列API函数还是只使用一次的函数。通过下面的例子可以迅速回想起这两种JavaScript中的函数:
// Named function
function add(x, y) {
return x + y;
}
// Anonymous function
let myAdd = function(x, y) { return x + y; };
一、js中的三种定义函数的ts实现
TS中的函数大部分和JS相同,不同之处在于ts会在函数的(参数)这中间和后面加上类型声明
// JavaScript定义函数的方法
// 命名函数
function say1(name) {
console.log(name);
}
// 匿名函数
let say2 = function (name) {
console.log(name);
}
// 箭头函数
let say3 = (name) => {
console.log(name);
}
// typescript定义函数的方法
// 命名函数
function say1(name:string):void {
console.log(name);
}
// 匿名函数
let say2 = function (name:string):void {
console.log(name);
}
// 箭头函数
let say3 = (name:string):void =>{
console.log(name);
}
二、ts中函数声明和实现分离的写法
(1)利用type声明函数
// 先利用type声明一个函数
type AddFun = (a:number, b:number)=>number;
// 再根据声明去实现这个函数
// 此时函数的参数和返回值可以不需要写类型声明了,因为ts可以通过这个函数声明推断出来类型了
let add:AddFun = function (x, y) {
return x + y;
};
let res = add(30, 20);
console.log(res);
(2)利用interface声明函数
// 先利用interface声明一个函数
interface AddFun {
(a:number, b:number):number
}
let add:AddFun = function (x, y) {
return x + y;
};
let res = add(30, 20);
console.log(res);
三、js函数参数的三种用法的ts实现
(1)可选参数
// 需求: 要求定义一个函数可以实现2个数或者3个数的加法
function add(x:number, y:number, z?:number):number {
return x + y + (z ? z : 0);
}
let res = add(10, 20);
let res = add(10, 20, 30);
注意事项:可选参数可以是一个或多个。
(2)默认参数
function add(x:number, y:number=10):number {
return x + y;
}
let res = add(10);
let res = add(10, 30);
(3)剩余参数
function add(x:number, ...ags:number[]) {
console.log(x);
console.log(ags);
}
add(10, 20, 30, 40, 50)
函数是一组一起执行一个任务的语句。您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的。函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。