一、定义函数方法

在 es5 中定时函数的方法有 命名函数和函数表达式(匿名函数)这门两种。那么同样的,在 TypeScript 中,函数的定义是什么样子的呢?

1-1 命名函数

这里需要注意的一点是: viod 类型,是函数不返回任何类型数据

TypeScript 语法

function func1(): string {
return '213';
} function func2(): number {
return 123;
} function func3(): Array<any> {
return [123, {}];
} function func4(): Array<number> {
return [123, 456];
} function func5(): Array<string> {
return ['123', '1233'];
} function func6(): void {
console.log(123);
}

被编译成 ES5JavaScript

"use strict";
function func1() {
return '213';
}
function func2() {
return 123;
}
function func3() {
return [123, {}];
}
function func4() {
return [123, 456];
}
function func5() {
return ['123', '1233'];
}
function func6() {
console.log(123);
}

1-2 函数表达式

这里需要简单的普及一个 ES6 的箭头函数,无大括号时,直接表示 return 这个值。

TypeScript 语法

const fun11 = (): string => {
return '123';
}; const fun12 = (): string => '123'; const fun13 = (): any => [123, '123']; const fun14 = function(): string {
return '123';
}; const fun15 = function(): any {
return { name: 123 };
};

被编译成 ES5JavaScript

"use strict";
var fun11 = function () {
return '123';
};
var fun12 = function () { return '123'; };
var fun13 = function () { return [123, '123']; };
var fun14 = function () {
return '123';
};
var fun15 = function () {
return { name: 123 };
};

二、定义函数传参

2-1 定义函数传参

这里需要简单的描述下,函数的传参的类型和之前文章中介绍到的数据类型定义方式是一致的。

TypeScript 语法

const parasFun1 = (x: string, y: number) => {
console.log(x + y);
}; let res1 = parasFun1('1', 2); // 猜猜返回啥?哈哈哈哈 可以子啊留言中写下你的答案

被编译成 ES5JavaScript

"use strict";
var parasFun1 = function (x, y) {
console.log(x + y);
};
var res1 = parasFun1('1', 2); // 猜猜返回啥?哈哈哈哈 可以子啊留言中写下你的答案

三、可选传参

3-1 定义函数的可选传参

这里需要简单的描述下,函数的可选参数,很明显就是可以选择传入这个参数也可以选择不传入这个参数,且可选参数一定是排在必传参数的后面。

TypeScript 语法

const parmaFunc1 = (name: string, age?: number) => {
if (age) {
return `我的名字是:${name} --- 我的年龄是: ${age}`;
} else {
return `我的名字是:${name} --- 我的年龄保密!`;
}
}; let res11 = parmaFunc1('zhangsan', 123);
let res12 = parmaFunc1('zhangsan'); const parmaFunc2 = (name?: string, age: number) => {
if (age) {
return `我的名字是:${name} --- 我的年龄是: ${age}`;
} else {
return `我的名字是:${name} --- 我的年龄保密!`;
}
};
// 这里的 parmaFunc2 会报错么?

被编译成 ES5JavaScript

"use strict";
var parmaFunc1 = function (name, age) {
if (age) {
return "\u6211\u7684\u540D\u5B57\u662F\uFF1A" + name + " --- \u6211\u7684\u5E74\u9F84\u662F\uFF1A " + age;
}
else {
return "\u6211\u7684\u540D\u5B57\u662F\uFF1A" + name + " --- \u6211\u7684\u5E74\u9F84\u4FDD\u5BC6\uFF01";
}
};
var res11 = parmaFunc1('zhangsan', 123);
var res12 = parmaFunc1('zhangsan');

四、默认传参

4-1 定义函数默认传参

这里的默认传参和 ES6 中默认传参的使用方式是一致的

TypeScript 语法

const defaultParamFunc1 = (x: string, age: number = 10): void => {
console.log(`我的名字是:${name} --- 我的年龄是: ${age}`);
}; let defaultRes1 = defaultParamFunc1('zhangsan');
// 这里会打印出什么呢?

被编译成 ES5JavaScript

"use strict";
var defaultParamFunc1 = function (x, age) {
if (age === void 0) { age = 10; }
console.log("\u6211\u7684\u540D\u5B57\u662F\uFF1A" + name + " --- \u6211\u7684\u5E74\u9F84\u662F\uFF1A " + age);
};
var defaultRes1 = defaultParamFunc1('zhangsan');

五、传递剩余参数

5-1 定义函数传递剩余参数(三点运算符)

这里的传递剩余参数和 ES6 中传递剩余参数的使用方式是一致的,只不过我们可能需要对剩余参数进行一个类型的定义

TypeScript 语法

// 写一个demo 就是,我们需要对一个对个求和,且我们不知道具体会有多少个参数

const restParamsFunc1 = (x: any, y: any, z: any): number => {
return x + y + z;
};
let restRes1 = restParamsFunc1(1, 2, 3); // 正常运行 // let restRes2 = restParamsFunc1(1, 2, 3, 4); // ts 会报错,说第四个参数未声明 const restParamsFunc2 = (...res: number[]): number => {
let sum = 0;
for (let index = 0; index < res.length; index++) {
sum += res[index];
}
return sum;
};
let restRes3 = restParamsFunc2(1, 2, 3, 4); // 这个时候又会得出什么结果呢?

被编译成 ES5JavaScript

"use strict";
// 写一个demo 就是,我们需要对一个对个求和,且我们不知道具体会有多少个参数
var restParamsFunc1 = function (x, y, z) {
return x + y + z;
};
var restRes1 = restParamsFunc1(1, 2, 3); // 正常运行
// let restRes2 = restParamsFunc1(1, 2, 3, 4); // ts 会报错,说第四个参数未声明
var restParamsFunc2 = function () {
var res = [];
for (var _i = 0; _i < arguments.length; _i++) {
res[_i] = arguments[_i];
}
var sum = 0;
for (var index = 0; index < res.length; index++) {
sum += res[index];
}
return sum;
};
var restRes3 = restParamsFunc2(1, 2, 3, 4); // 这个时候又会得出什么结果呢?

六、函数重载

6-1 JavaScript 中的函数重载

函数名称相同,但是函数的传入参数不同。执行不同的功能,这个时候就会出现函数重载。

TypeScript 语法

const reloadFunc1 = (name: string) => {
console.log(name);
};
const reloadFunc1 = (age: string) => {
console.log(age);
};
const reloadFunc1 = (name: string, age: number) => {
if (age) {
console.log(name, age);
} else {
console.log(name);
}
}; // 这个时候我们会发现 ts 已经给我们报了语法的错误,但是转译成 es5 的代码的时候依然可以运行,只不过后面定义的方式会覆盖前面定义的同名函数的方法

被编译成 ES5JavaScript

"use strict";
var reloadFunc1 = function (name) {
console.log(name);
};
var reloadFunc1 = function (age) {
console.log(age);
};
var reloadFunc1 = function (name, age) {
if (age) {
console.log(name, age);
}
else {
console.log(name);
}
};
// 这个时候我们会发现 ts 已经给我们报了语法的错误,但是转译成 es5 的代码的时候依然可以运行,只不过后面定义的方式会覆盖前面定义的同名函数的方法

这里我们需要区分一下 Java 中的函数重载和 ts 中的函数重载的区别

  • 在 Java 中 定义的同名重载函数,会根据传入数据类型的差异,直接执行对应的函数,但是 ts 不会。
  • 在 ts 中,即使定义了重载函数,编译成 ES5 以后,还是只剩下一个对应函数的判断。这里我们只做一个简单的了解,在前端写 JS 的时候还是需要注意命名空间和命名重叠的问题。

我们还是以代码的例子来做区分,例子一如下:

TypeScript 语法

const reloadFunc2 = (name: string):string;
const reloadFunc2 = (age: number):number;
const reloadFunc2 = (age:any):any => {
if(typeof age === 'number') {
console.log(name, age)
} else {
console.log(name)
}
} // 这个时候,ts 依然会报错,是为什么? 这里就要提到 const 、let 的作用域的问题,因为这里也是 ES6 的基础知识,不展开来说了。

被编译成 ES5JavaScript

var reloadFunc2 = function (name) { return ; };
var reloadFunc2 = function (age) { return ; };
var reloadFunc2 = function (age) {
if (typeof age === 'number') {
console.log(name, age);
}
else {
console.log(name);
}
};

我们还是以代码的例子来做区分,例子二如下:

TypeScript 语法

function reloadFunc3(name: string):string;
function reloadFunc3(age: number):number;
function reloadFunc3(str:any):any {
if(typeof str === 'number') {
console.log(name, str)
} else {
console.log(name)
}
};

被编译成 ES5JavaScript

function reloadFunc3(str) {
if (typeof str === 'number') {
console.log(name, str);
}
else {
console.log(name);
}
} // 这里编译出来,居然只有一个函数,惊叹了,为什么惊叹了呢?因为这里和 Java 中的函数重载差别有点大。

七、箭头函数

7-1 定义箭头函数

箭头函数的话,其实和 ES6 中的写法是一致的,然后需要我们注意的是,箭头函数中的上下文,指向的是起父级函数的上下文。

TypeScript 语法

const arrowFunc = (): number => {
return 123;
}; setTimeout(() => {
console.log('过了一秒');
}, 1000);

被编译成 ES5JavaScript

"use strict";
var arrowFunc = function () {
return 123;
};
setTimeout(function () {
console.log('过了一秒');
}, 1000);

八、总结

这一篇文章也只能算是基础入门级别的 ts 中函数的定义方式和方法,这个需要大家在日常的项目中多书写,才能避免一些问题,然后我们就会发现,我们在使用 ts 去书写一些函数和对应参数的时候,我们已经可以避免一些多余参数和错误的参数类型的传入导致的一些奇奇怪怪的bug。好了,这一章就先写到这里。


GitHub 地址:(欢迎 star 、欢迎推荐 : )

《前端之路》 - TypeScript(二)函数篇

《前端之路》- TypeScript(二) 函数篇的更多相关文章

  1. Sass进阶之路,之二(进阶篇)

    Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2 ...

  2. 前端之路(二)之JavaScript:菜鸟教程学习:http://www.runoob.com/js/js-intro.html

    JavaScript 语句和 JavaScript 变量都对大小写敏感. 键值对通常写法为 name : value (键与值以冒号分割). 键值对在 JavaScript 对象通常称为 对象属性. ...

  3. 《前端之路》- TypeScript (三) ES5 中实现继承、类以及原理

    目录 一.先讲讲 ES5 中构造函数(类)静态方法和多态 1-1 JS 中原型以及原型链 例子一 1-2 JS 中原型以及原型链中,我们常见的 constructor.prototype.**prot ...

  4. 《前端之路》- TypeScript (四) class 中各类属性、方法,抽象类、多态

    目录 一.TypeScript 中的类 二.TypeScript 中类的继承 三.TypeScript 中公共,私有与受保护的修饰符 3-1.属性的 public 3-2.属性的 private 3- ...

  5. Scala进阶之路-Scala函数篇详解

    Scala进阶之路-Scala函数篇详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.传值调用和传名调用 /* @author :yinzhengjie Blog:http: ...

  6. 【重走Android之路】【路线篇(二)】知识点归纳

    [重走Android之路][路线篇(二)]知识点归纳   参考:http://blog.csdn.net/xujing81/article/details/7313507   第一阶段:Java面向对 ...

  7. 《前端之路》之二:数据类型转换 && 隐式转换 || 显式转换

    目录 02:数据类型转换 && 隐式转换 || 显式转换 02:数据类型转换 && 隐式转换 || 显式转换 在上一个章节中,我们介绍了 JavaScript 的基本的 ...

  8. 单片机成长之路(51基础篇) - 015 关于sdcc的多文件编译范例二

    本文是续 单片机成长之路(51基础篇) - 009 关于sdcc的多文件编译范例(一)编写的. 在实际的工作中,单片机的头文件和功能函数不可能同全部放在同一个文件夹下面,我们把单片机成长之路(51基础 ...

  9. 《前端之路》 - 初试 TypeScript(一)基础数据类型

    一.先讲讲 TypeScript 什么是 typeScript ? typeScript 是 Javascript 的超集 我们用一张图来简单介绍下 ts 和 js 清清楚楚明明白白的关系- 为什么会 ...

随机推荐

  1. 安装VSCODE和typora黑屏

    工欲善其事必先利其器,本来是为了学git为了保存代码,然后网上一顿搜索研究之后发现,用git来保存笔记也不错,因为现在用的onenote搜索实在在在在是太不方便了,除了搜索不行,其他方面她还是很好的, ...

  2. Mysql的分页查询语句的性能分析

    MySql分页sql语句,如果和MSSQL的TOP语法相比,那么MySQL的LIMIT语法要显得优雅了许多.使用它来分页是再自然不过的事情了. 1.1最基本的分页方式: 在中小数据量的情况下,这样的S ...

  3. Java反射的实例

    JAVA反射机制是在运行状态中,对于任意一个类,都能够得到这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法;         这种动态获取的信息以及动态调用对象的方法的功能称为ja ...

  4. C++二级指针和指针引用传参

    前提 一级指针和引用 已经清晰一级指针和引用. 可参考:指针和引用与及指针常量和常量指针 或查阅其他资料. 一级指针和二级指针 个人觉得文字描述比较难读懂,直接看代码运行结果分析好些,如果想看文字分析 ...

  5. js中的call

    //例1 <script> window.color = 'red'; document.color = 'yellow'; var s1 = {color: 'blue' }; func ...

  6. Jenkins之邮件通知

    Jenkins默认有一个邮件通知功能,但功能比较单一,能自定义的东西很少,一般使用Extended E-mail Notification插件来发送邮件,EXT Email插件功能比较多,但设置也比较 ...

  7. 云服务器——之Linux下安装nginx

    第一步:下载 Nginx,下载地址:http://nginx.org/download/nginx-1.6.2.tar.gz 第二步:安装nginx需要安装的一些环境: 1.例如: yum insta ...

  8. SCSS 与 Sass 异同

    SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能.也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件.另外,SCSS 还 ...

  9. js的几个库

    http://www.w3.org/TR/FileAPI/ http://www.w3.org/TR/html-media-capture/ demo:http://jsfiddle.net/pmat ...

  10. PHPExcel之蛋疼

    限制了内存,处理个80+K的表就会GG,所以还要尽量删空行,选中某一行如A3,ctrl+shift+↓然后ctrl+小键盘的减号最后需要ctrl+s