TypeScript中的函数怎么定义与使用-创新互联
这篇文章主要讲解了“TypeScript中的函数怎么定义与使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“TypeScript中的函数怎么定义与使用”吧！
TypeScript中函数的定义和使用
１. 声明一个函数约束其传参类型，以及返回值类型
传入两个参数，没有返回值
const fun1 = (key: string, value: number): void => {
console.log(key, value);//"Typescript"，100
};
fun1("Typescript", 100);2.TypeScript中的函数配置可选参数，在ES5或者ES6中函数中的实参可以不传递进去，但是在TS中必须传递进去，如果需要设置非必传参数，就必须设置可选参数具体如下
const fun2 = (a: string, b?: number) => {
//形参后面加个?代表可以传递参数也可以不传递参数
console.log(a);//typescript
}
fun2("typescript");
注意：配置可选参数必须配置到最后一个参数，
否则ts会有报错提示(虽然编译可以通过但不建议这么使用)3.TypeScript的函数设置默认值
//设置了默认值，并传入实参，默认实参会代替默认值,这一点和ES6一致
const fun3 = (a: number, b: string = "ECMAScript"): void => {
console.log(a);//20
console.log(b);//typescript
};
fun3(20, "typescript");
/设置了默认值，没有传递实参，默认B的值就是true
const fun4 = (a: number, b: boolean = true): void => {
console.log(a);//60
console.log(b);//true
};
fun4(60);4.TypeScript函数的剩余参数
//接收多个参数，并放到一个容器里面，与ES6中的rest...三点运算符一样
const fun5 = (...result: number[]): void => {
//用变量result接收实参，并指明数据类型
let sum: number = 0;
for (let index = 0; index < result.length; index++) {
sum += result[index];
};
console.log(sum);//150
};
fun5(10, 20, 30, 40, 50);
//注意接收多个实参的变量必须放在最后一个，否则会报错
//接收参数，与变量名一一对应
const fun6 = (first: string, ...result: string[]): void => {
console.log(first);//string
console.log(result);//[ "number", "boolean", "function", "true" ]
}
fun6("string", "number", "boolean", "function", "true");5.TypeScript中的函数重载
// java中方法的重载：重载指的是两个或者两个以上同名函数，
但它们的参数不一样，这时会出现函数重载的情况。
// typescript中的重载：
通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
//TS中函数重载 TS为了兼容ES5和ES6 不能写大括号
//对实参类型进行约束
function dataFn(a: string, b: number): void
function dataFn(a: number, b: string): void
function dataFn(a: number, b: number): void
function dataFn(a: any, b: any): void {
//对传入的实参类型进行判断 如果符合某个函数就执行其函数体
if(typeof (a) === "string") {
console.log("This is 字符串")
};
if (typeof (a) === "number" && typeof (b) === "number") {
console.log("this is 数字");
};
if (typeof (a) === "number") {
console.log(a, b);//20,typescript
} else {
}
}
dataFn(10, 20);
dataFn(20, "typescript");6.TypeScript中的箭头函数
基本形式：
let func = num:number => num; //只有一个形参可以‘="后面写形参名,并约束其类型
let func = () => num;//如果有多个形参，在‘="后面写‘（）"把形参写在（）里面并约束其类型
let sum = (num1, num2) :number=> num1 + num2;//如果只有1条执行语句，
//直接在‘=>"后面写执行语句即可，还要指定其返回类型
如果有多条语句必须写{},将代码写在{}里面，重新指定返回值,以及类型
注意事项：
函数体内的this对象，就是定义时所在的上下文，如果箭头函数是全局里面的话，
还是指向window，建议在箭头函数外部再嵌套一层函数以便于控制里面的this
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。
如果要用，可以用 rest 参数代替。
const fun8 = (a: number, b: number): void => {
console.log(a, b)
}
fun8(10, 20);感谢各位的阅读，以上就是“TypeScript中的函数怎么定义与使用”的内容了，经过本文的学习后，相信大家对TypeScript中的函数怎么定义与使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联网站建设公司，，小编将为大家推送更多相关知识点的文章，欢迎关注！
网站题目：TypeScript中的函数怎么定义与使用-创新互联
URL链接：http://scjbc.cn/article/pcdco.html
