娱乐网站模板,缪斯形象设计高级定制,百度空间登录,上海网站改版方案ts的Functions
大部分基础内容可以通过这篇blog学习#x1f449;Functions - TypeScript Deep Dive
函数类型在TypeScript类型系统中扮演着非常重要的角色#xff0c;它们是可组合系统的核心构建块.
1.Parameter annotations
你可以像变量注解一样#xff0c;给functio…ts的Functions
大部分基础内容可以通过这篇blog学习Functions - TypeScript Deep Dive
函数类型在TypeScript类型系统中扮演着非常重要的角色它们是可组合系统的核心构建块.
1.Parameter annotations
你可以像变量注解一样给function类型进行注解.
// variable annotation
let sampleVariable: { bar: number }// function parameter annotation
function foo1(sampleParameter: { bar: number }) { }let foo2 (sampleParameter: { bar: number }) {}1.1剩余参数
const fn (array:number[],...items:any):any[] {console.log(array,items)return items
}console.log(fn([1,2,3],J4ck,true));
/*
output:
[ 1, 2, 3 ] [ J4ck, true ]
[ J4ck, true ]
*/1.2this参数
看起来有点像python的self只能写在参数列表的第1个.
interface Obj {name: string// 限定getName调用时的this类型getName(this: Obj): string
}
const obj: Obj {name: J4ck,getName() {return this.name},
}
obj.getName() //output:J4ck这样this就会指向调用getName()的obj了.
2.Overloading
TypeScript中提供了函数重载的机制不过这个重载其实从1个Javaer的角度来看感觉怪怪的。
实现一个padding()来举例熟悉css的同学肯定知道padding支持好几种写法
.sample1 {/* 应用于所有边 */padding: 5px;
}.sample2 {/* 上边下边 | 左边右边 */padding: 5px 5px;
}.sample3 {/* 上边 | 右边 | 下边 | 左边 */padding: 5px 5px 5px 5px;
}可以看到需要重载3个因此需要声明4个function header,并且在声明最后1个function header后实现整个方法这就是在我看来非常诧异的地方.
可以看到3个重载函数的实现逻辑都在最后1个function中用if(parameter undefind)这样的写法去判断传入了哪些parameter并跳到对应的代码块中.
// Overloads
function padding(all: number);
function padding(topAndBottom: number, leftAndRight: number);
function padding(top: number, right: number, bottom: number, left: number);
// Actual implementation that is a true representation of all the cases the function body needs to handle
function padding(a: number, b?: number, c?: number, d?: number) {if (b undefined c undefined d undefined) {b c d a;}else if (c undefined d undefined) {c a;d b;}return {top: a,right: b,bottom: c,left: d};
}TypeScript 中的函数重载没有任何运行时开销。它只允许你记录希望调用函数的方式并且编译器会检查其余代码。 不过这只是举1个例子其实对于能够使用可选参数实现的function并不推荐使用函数重载。
通过查阅一些资料我自己总结了一下.
TypeScript因为可选参数的存在所以在参数列表涉及数量多少的可以用可选参数实现。
function padding(all: number);
function padding(topAndBottom: number, leftAndRight: number);
////
function padding(a: number, b?: number);参数列表里参数类型不同的时候可以使用函数重载实现.
function showName(name:string): string;
function showName(names:string[]): string[];
function showName(names: unknown): unknown{if (typeof names string) {return ${names};} else if (Array.isArray(names)) {return names.map(name ${name});}
}console.log(showName(J4ck)); //output:J4ck
console.log(showName([J4ck,Ju11y])); //output:[ J4ck, Ju11y ]
