Typescript 基础（二）之函数

yeyan1996 发布于2019-08-23 10:22 / 3234人阅读

摘要：调用者容易迷惑，当传入函数的参数类型为时返回值的类型究竟是还是。前面两个是函数声明，最后一个是函数实现，有参数类型和返回值类型随意搭配的意思。

Typescript 中的函数

Javascrip 中函数是一等公民
一、Javascript 中的两种常见的定义函数的方式
1、函数声明

function myFunc(x,y){
    return x+y
}

2、函数表达式

let addFunc = function(x,y){
    return x-y
}

二、Typescript 中定义函数可同时定义函数接收的参数类型和函数的返回值类型

function myFuncTs (x:number,y:number):number {
    return x+y
}
let result = myFuncTs(12,13)

当函数的返回值类型没有指定时，typescript 会自动根据函数返回值推断返回类型

可以使用接口来定义一个函数需要符合的形状，如：

interface addFuncInteface{
    (x:number,y:number):number
}
let addF : addFuncInteface = (left:number,right:number)=>{ return left + right }

三、可选参数
JavaScript里，函数的每个参数都是可选的，可传可不传。没传参的时候，它的值就是undefined。在Typescript 中可以用？定义函数的可选参数,需要注意的是，可选参数必须在必须参数之后，否则报错。
下面的例子中，name 参数是可选参数，可传可不传。

interface callbackInterface{
    (result:any):void
}
function canChoiceParames(width:number,height:number,callback:callbackInterface,name?:string):object {
    let tempObj = {
        w:width,
        h:height,
    }
    callback(tempObj)
    return tempObj
}
 let res = canChoiceParames(100,200,function(res){
    
},"myName")

四、默认参数
与可选参数不同的是，带默认值的参数不需要放在必须参数的后面
下面的例子中 height 参数默认100

function defaultParams(width:number,height:number = 100){
}

五、剩余参数
必要参数和默认参数有一个共同点：他们都只表示某一个参数。但是有时候会有同时操作多个参数的需求，或者你并不知道会有多少个参数会传进来。在JavaScript里，你可以使用 arguments来访问所有传入的参数。在Typescript 中可以把所有参数、或者某部分参数收集到一个变量里。注意剩余参数只能是最后一个参数。

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

上面的例子中restOfName参数为一个包含了剩余参数的数组，该数组为["Samuel", "Lucas", "MacKinzie"]
六、函数重载
当函数入参使用联合类型同时返回值也有有多种类型时，函数重载允许对函数接受不同参数的数量和类型时作出不同的处理。
比如实现一个反转函数，输入为数字类型123时输出321，输入字符串类型 abc 时输出 cba
利用联合类型，该需求实现如下

function reverse(x: number | string): number | string {
    if (typeof x === "number") {
        return Number(x.toString().split("").reverse().join(""));
    } else if (typeof x === "string") {
        return x.split("").reverse().join("");
    }else{
        return x
    }
}

这样虽然能实现需求，但是函数参数与返回值的说明不够直观。调用者容易迷惑，当传入函数的参数类型为number 时返回值的类型究竟是 number 还是string。
函数重载可以解答这样的疑惑，使函数的类型定义表达更加直观。

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === "number") {
        return Number(x.toString().split("").reverse().join(""));
    } else if (typeof x === "string") {
        return x.split("").reverse().join("");
    }else {
        return x
    }
}

前面两个reverse 是函数声明，最后一个reverse 是函数实现，有参数类型和返回值类型随意搭配的意思。前面两个 reverse 对函数进行了声明，第一个reverse声明的内容为，当传入函数的参数类型为number 时，函数返回值类型为number 类型；第二个 reverse 声明的内容为，当传入函数的参数类型为string 时，函数返回值类型为string。
下面是另一个例子，动手试一下吧。
同样的，前面几个testOverload为函数声明，最后一个testOverload为函数实现：

function testOverload(x:string,y:boolean):number;
function testOverload(x:string,y:number):string;
function testOverload(x:number,y:number):string;
function testOverload(x:number,y:boolean):number;
function testOverload(x:string | number, y:number|boolean) :string | number  {
    return x
}
let o1 = testOverload("string",false); // 此时 o1 类型为numer,鼠标移动到 o1 变量上可看到类型
let o2 = testOverload("string",10);// 此时 o2 类型为string,鼠标移动到 o2 变量上可看到类型
let o3 = testOverload(12,10);// 此时 o2 类型为string,鼠标移动到 o2 变量上可看到类型
let o4 = testOverload(13,true);// 此时 o2 number,鼠标移动到 o2 变量上可看到类型

云服务器 GPU云服务器之基础篇黑客基础之DOS 零基础课程之c语言基础函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96285.html

Typescript 基础（一）之类型

摘要：基本数据类型包括数值字符串布尔值以及新增的。数值类型中的二进制表示法或者开头中的八进制表示法或者开头字符串类型普通字符串模板字符串模板字符串布尔值和类型在中使用和来定义这两个数据类型。一、基本数据类型 Javascript 的类型分为两种：原始数据类型和对象类型，TypeScript 支持与JavaScript几乎相同的数据类型，此外还提供了枚举、元组等实用的类型。基本数据类型包括：...

GitCafe 2019-08-26 12:08 评论0 收藏0
SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

caspar 2019-08-15 13:33 评论0 收藏0
SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

nihao 2019-08-21 18:39 评论0 收藏0
SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

Drummor 2019-06-28 14:38 评论0 收藏0
前端每周清单第 45 期: Safari 支持 Service Worker, Parcel 完整教

摘要：的另一个核心特性，苹果表示也正在开发中，按开发进度可能几个月后就能与我们见面。是基于的本地化数据库，支持以及浏览器环境。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端每周清单。本期是 2017 年的最后一...

赵春朋 2019-08-21 18:24 评论0 收藏0