【TypeScript入门】TypeScript入门篇——函数

        函数是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)

        函数是一组一起执行一个任务的语句。您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的。函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。

  • 18
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

肩匣与橘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值