七、TypeScript 函数

7.1 TypeScript 函数与 JavaScript 函数的区别

TypeScriptJavaScript含有类型无类型箭头函数箭头函数（ES2015）函数类型无函数类型必填和可选参数所有参数都是可选的默认参数默认参数剩余参数剩余参数函数重载无函数重载

7.2 箭头函数

1.常见语法

myBooks.forEach(()=>console.log('reading'));

myBooks.forEach(title=>console.log(title));

myBooks.forEach((title,idx,arr)=>
console.log(idx+'-'+title);
);

myBooks.forEach((title,idx,arr)=>{
console.log(idx+'-'+title);
});

2.使用示例

//未使用箭头函数
functionBook(){
letself=this;
self.publishDate=2016;
setInterval(function(){
console.log(self.publishDate);
},1000);
}

//使用箭头函数
functionBook(){
this.publishDate=2016;
setInterval(()=>{
console.log(this.publishDate);
},1000);
}

7.3 参数类型和返回类型

functioncreateUserId(name:string,id:number):string{
returnname+id;
}

7.4 函数类型

letIdGenerator:(chars:string,nums:number)=>string;

functioncreateUserId(name:string,id:number):string{
returnname+id;
}

IdGenerator=createUserId;

7.5 可选参数及默认参数

//可选参数
functioncreateUserId(name:string,id:number,age?:number):string{
returnname+id;
}

//默认参数
functioncreateUserId(
name:string="semlinker",
id:number,
age?:number
):string{
returnname+id;
}

在声明函数时，可以通过 ? 号来定义可选参数，比如 age?: number 这种形式。 在实际使用时，需要注意的是可选参数要放在普通参数的后面，不然会导致编译错误 。

7.6 剩余参数

functionpush(array,...items){
items.forEach(function(item){
array.push(item);
});
}

leta=[];
push(a,1,2,3);

7.7 函数重载

函数重载或方法重载是使用相同名称和不同参数数量或类型创建多个方法的一种能力。

functionadd(a:number,b:number):number;
functionadd(a:string,b:string):string;
functionadd(a:string,b:number):string;
functionadd(a:number,b:string):string;
functionadd(a:Combinable,b:Combinable){
//typeCombinable=string|number;
if(typeofa==='string'||typeofb==='string'){
returna.toString()+b.toString();
}
returna+b;
}

在以上代码中，我们为 add 函数提供了多个函数类型定义，从而实现函数的重载。在 TypeScript 中除了可以重载普通函数之外，我们还可以重载类中的成员方法。

方法重载是指在同一个类中方法同名，参数不同（参数类型不同、参数个数不同或参数个数相同时参数的先后顺序不同），调用时根据实参的形式，选择与它匹配的方法执行操作的一种技术。所以类中成员方法满足重载的条件是：在同一个类中，方法名相同且参数列表不同。下面我们来举一个成员方法重载的例子：

classCalculator{
add(a:number,b:number):number;
add(a:string,b:string):string;
add(a:string,b:number):string;
add(a:number,b:string):string;
add(a:Combinable,b:Combinable){
if(typeofa==='string'||typeofb==='string'){
returna.toString()+b.toString();
}
returna+b;
}
}

constcalculator=newCalculator();
constresult=calculator.add('Semlinker','Kakuqo');

这里需要注意的是，当 TypeScript 编译器处理函数重载时，它会查找重载列表，尝试使用第一个重载定义。如果匹配的话就使用这个。因此，在定义重载的时候，一定要把最精确的定义放在最前面。另外在 Calculator 类中，add(a: Combinable, b: Combinable){ } 并不是重载列表的一部分，因此对于 add 成员方法来说，我们只定义了四个重载方法。

八、TypeScript 数组

8.1 数组解构

letx:number;lety:number;letz:number;
letfive_array=[0,1,2,3,4];
[x,y,z]=five_array;

8.2 数组展开运算符

lettwo_array=[0,1];
letfive_array=[...two_array,2,3,4];

8.3 数组遍历

letcolors:string[]=["red","green","blue"];
for(letiofcolors){
console.log(i);
}

九、TypeScript 对象

9.1 对象解构

letperson={
name:"Semlinker",
gender:"Male",
};

let{name,gender}=person;

9.2 对象展开运算符

letperson={
name:"Semlinker",
gender:"Male",
address:"Xiamen",
};

//组装对象
letpersonWithAge={...person,age:33};

//获取除了某些项外的其它项
let{name,...rest}=person;

十、TypeScript 接口

在面向对象语言中，接口是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类去实现。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

10.1 对象的形状

interfacePerson{
name:string;
age:number;
}

letsemlinker:Person={
name:"semlinker",
age:33,
};

10.2 可选 | 只读属性

interfacePerson{
readonlyname:string;
age?:number;
}

只读属性用于限制只能在对象刚刚创建的时候修改其值。此外 TypeScript 还提供了 ReadonlyArray<T> 类型，它与 Array<T> 相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改。

leta:number[]=[1,2,3,4];
letro:ReadonlyArray<number>=a;
ro[0]=12;//error!
ro.push(5);//error!
ro.length=100;//error!
a=ro;//error!

10.3 任意属性

有时候我们希望一个接口中除了包含必选和可选属性之外，还允许有其他的任意属性，这时我们可以使用 索引签名 的形式来满足上述要求。

interfacePerson{
name:string;
age?:number;
[propName:string]:any;
}

constp1={name:"semlinker"};
constp2={name:"lolo",age:5};
constp3={name:"kakuqo",sex:1}

10.4 接口与类型别名的区别

1.Objects/Functions

接口和类型别名都可以用来描述对象的形状或函数签名：

接口

interfacePoint{
x:number;
y:number;
}

interfaceSetPoint{
(x:number,y:number):void;
}

类型别名

typePoint={
x:number;
y:number;
};

typeSetPoint=(x:number,y:number)=>void;

2.Other Types

与接口类型不一样，类型别名可以用于一些其他类型，比如原始类型、联合类型和元组：

//primitive
typeName=string;

//object
typePartialPointX={x:number;};
typePartialPointY={y:number;};

//union
typePartialPoint=PartialPointX|PartialPointY;

//tuple
typeData=[number,string];

3.Extend

接口和类型别名都能够被扩展，但语法有所不同。此外，接口和类型别名不是互斥的。接口可以扩展类型别名，而反过来是不行的。

Interface extends interface

interfacePartialPointX{x:number;}
interfacePointextendsPartialPointX{
y:number;
}

Type alias extends type alias

typePartialPointX={x:number;};
typePoint=PartialPointX&{y:number;};

Interface extends type alias

typePartialPointX={x:number;};
interfacePointextendsPartialPointX{y:number;}

Type alias extends interface

interfacePartialPointX{x:number;}
typePoint=PartialPointX&{y:number;};

4.Implements

类可以以相同的方式实现接口或类型别名，但类不能实现使用类型别名定义的联合类型：

interfacePoint{
x:number;
y:number;
}

classSomePointimplementsPoint{
x=1;
y=2;
}

typePoint2={
x:number;
y:number;
};

classSomePoint2implementsPoint2{
x=1;
y=2;
}

typePartialPoint={x:number;}|{y:number;};

//Aclasscanonlyimplementanobjecttypeor
//intersectionofobjecttypeswithstaticallyknownmembers.
classSomePartialPointimplementsPartialPoint{//Error
x=1;
y=2;
}

5.Declaration merging

与类型别名不同，接口可以定义多次，会被自动合并为单个接口。

interfacePoint{x:number;}
interfacePoint{y:number;}

constpoint:Point={x:1,y:2};

十一、TypeScript 类

11.1 类的属性与方法

在面向对象语言中，类是一种面向对象计算机编程语言的构造，是创建对象的蓝图，描述了所创建的对象共同的属性和方法。

在 TypeScript 中，我们可以通过 Class 关键字来定义一个类：

classGreeter{
//静态属性
staticcname:string="Greeter";
//成员属性
greeting:string;

//构造函数-执行初始化操作
constructor(message:string){
this.greeting=message;
}

//静态方法
staticgetClassName(){
return"ClassnameisGreeter";
}

//成员方法
greet(){
return"Hello,"+this.greeting;
}
}

letgreeter=newGreeter("world");

那么成员属性与静态属性，成员方法与静态方法有什么区别呢？这里无需过多解释，我们直接看一下编译生成的 ES5 代码：

"usestrict";
varGreeter=/**@class*/(function(){
//构造函数-执行初始化操作
functionGreeter(message){
this.greeting=message;
}
//静态方法
Greeter.getClassName=function(){
return"ClassnameisGreeter";
};
//成员方法
Greeter.prototype.greet=function(){
return"Hello,"+this.greeting;
};
//静态属性
Greeter.cname="Greeter";
returnGreeter;
}());
vargreeter=newGreeter("world");

11.2 ECMAScript 私有字段

在 TypeScript 3.8 版本就开始支持 ECMAScript 私有字段 ，使用方式如下：

classPerson{
#name:string;

constructor(name:string){
this.#name=name;
}

greet(){
console.log(`Hello,mynameis${this.#name}!`);
}
}

letsemlinker=newPerson("Semlinker");

semlinker.#name;
//~~~~~
//Property'#name'isnotaccessibleoutsideclass'Person'
//becauseithasaprivateidentifier.

与常规属性（甚至使用 private 修饰符声明的属性）不同，私有字段要牢记以下规则：

私有字段以 # 字符开头，有时我们称之为私有名称；
每个私有字段名称都唯一地限定于其包含的类；
不能在私有字段上使用 TypeScript 可访问性修饰符（如 public 或 private）；
私有字段不能在包含的类之外访问，甚至不能被检测到。

11.3 访问器

在 TypeScript 中，我们可以通过 getter 和 setter 方法来实现数据的封装和有效性校验，防止出现异常数据。

letpasscode="HelloTypeScript";

classEmployee{
private_fullName:string;

getfullName():string{
returnthis._fullName;
}

setfullName(newName:string){
if(passcode&&passcode=="HelloTypeScript"){
this._fullName=newName;
}else{
console.log("Error:Unauthorizedupdateofemployee!");
}
}
}

letemployee=newEmployee();
employee.fullName="Semlinker";
if(employee.fullName){
console.log(employee.fullName);
}

11.4 类的继承

继承（Inheritance）是一种联结类与类的层次模型。指的是一个类（称为子类、子接口）继承另外的一个类（称为父类、父接口）的功能，并可以增加它自己的新功能的能力，继承是类与类或者接口与接口之间最常见的关系。

继承是一种 is-a 关系：

ts入门详解,ts最详细教程

在 TypeScript 中，我们可以通过 extends 关键字来实现继承：

classAnimal{
name:string;

constructor(theName:string){
this.name=theName;
}

move(distanceInMeters:number=0){
console.log(`${this.name}moved${distanceInMeters}m.`);
}
}

classSnakeextendsAnimal{
constructor(name:string){
super(name);//调用父类的构造函数
}

move(distanceInMeters=5){
console.log("Slithering...");
super.move(distanceInMeters);
}
}

letsam=newSnake("SammythePython");
sam.move();

11.5 抽象类

使用 abstract 关键字声明的类，我们称之为抽象类。抽象类不能被实例化，因为它里面包含一个或多个抽象方法。所谓的抽象方法，是指不包含具体实现的方法：

abstractclassPerson{
constructor(publicname:string){}

abstractsay(words:string):void;
}

//Cannotcreateaninstanceofanabstractclass.(2511)
constlolo=newPerson();//Error

抽象类不能被直接实例化，我们只能实例化实现了所有抽象方法的子类。具体如下所示：

abstractclassPerson{
constructor(publicname:string){}

//抽象方法
abstractsay(words:string):void;
}

classDeveloperextendsPerson{
constructor(name:string){
super(name);
}

say(words:string):void{
console.log(`${this.name}says${words}`);
}
}

constlolo=newDeveloper("lolo");
lolo.say("Ilovets!");//lolosaysIlovets!

11.6 类方法重载

在前面的章节，我们已经介绍了函数重载。对于类的方法来说，它也支持重载。比如，在以下示例中我们重载了 ProductService 类的 getProducts 成员方法：

classProductService{
getProducts():void;
getProducts(id:number):void;
getProducts(id?:number){
if(typeofid==='number'){
console.log(`获取id为${id}的产品信息`);
}else{
console.log(`获取所有的产品信息`);
}
}
}

constproductService=newProductService();
productService.getProducts(666);//获取id为666的产品信息
productService.getProducts();//获取所有的产品信息

十二、TypeScript 泛型

软件工程中，我们不仅要创建一致的定义良好的 API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

设计泛型的关键目的是在成员之间提供有意义的约束，这些成员可以是：类的实例成员、类的方法、函数参数和函数返回值。

泛型（Generics）是允许同一个函数接受不同类型参数的一种模板。相比于使用 any 类型，使用泛型来创建可复用的组件要更好，因为泛型会保留参数类型。

12.1 泛型语法

对于刚接触 TypeScript 泛型的读者来说，首次看到 <T> 语法会感到陌生。其实它没有什么特别，就像传递参数一样，我们传递了我们想要用于特定函数调用的类型。

ts入门详解,ts最详细教程

参考上面的图片，当我们调用 identity<Number>(1) ，Number 类型就像参数 1一样，它将在出现 T 的任何位置填充该类型。图中 <T> 内部的 T 被称为类型变量，它是我们希望传递给 identity 函数的类型占位符，同时它被分配给 value 参数用来代替它的类型：此时 T 充当的是类型，而不是特定的 Number 类型。

其中 T 代表 Type ，在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。除了 T 之外，以下是常见泛型变量代表的意思：

K（Key）：表示对象中的键类型；
V（Value）：表示对象中的值类型；
E（Element）：表示元素类型。

其实并不是只能定义一个类型变量，我们可以引入希望定义的任何数量的类型变量。比如我们引入一个新的类型变量 U，用于扩展我们定义的 identity 函数：

functionidentity<T,U>(value:T,message:U):T{
console.log(message);
returnvalue;
}

console.log(identity<Number,string>(68,"Semlinker"));

ts入门详解,ts最详细教程

除了为类型变量显式设定值之外，一种更常见的做法是使编译器自动选择这些类型，从而使代码更简洁。我们可以完全省略尖括号，比如：

functionidentity<T,U>(value:T,message:U):T{
console.log(message);
returnvalue;
}

console.log(identity(68,"Semlinker"));

对于上述代码，编译器足够聪明，能够知道我们的参数类型，并将它们赋值给 T 和 U，而不需要开发人员显式指定它们。

12.2 泛型接口

interfaceGenericIdentityFn<T>{
(arg:T):T;
}

12.3 泛型类

classGenericNumber<T>{
zeroValue:T;
add:(x:T,y:T)=>T;
}

letmyGenericNumber=newGenericNumber<number>();
myGenericNumber.zeroValue=0;
myGenericNumber.add=function(x,y){
returnx+y;
};

12.4 泛型工具类型

为了方便开发者 TypeScript 内置了一些常用的工具类型，比如 Partial、Required、Readonly、Record 和 ReturnType 等。出于篇幅考虑，这里我们只简单介绍 Partial 工具类型。不过在具体介绍之前，我们得先介绍一些相关的基础知识，方便读者自行学习其它的工具类型。

1.typeof

在 TypeScript 中，typeof 操作符可以用来获取一个变量声明或对象的类型。

interfacePerson{
name:string;
age:number;
}

constsem:Person={name:'semlinker',age:33};
typeSem=typeofsem;//->Person

functiontoArray(x:number):Array<number>{
return[x];
}

typeFunc=typeoftoArray;//->(x:number)=>number[]

2.keyof

keyof 操作符可以用来一个对象中的所有 key 值：

interfacePerson{
name:string;
age:number;
}

typeK1=keyofPerson;//"name"|"age"
typeK2=keyofPerson[];//"length"|"toString"|"pop"|"push"|"concat"|"join"
typeK3=keyof{[x:string]:Person};//string|number

在 TypeScript 中支持两种索引签名，数字索引和字符串索引：

interfaceStringArray{
//字符串索引->keyofStringArray=>string|number
[index:string]:string;
}

interfaceStringArray1{
//数字索引->keyofStringArray1=>number
[index:number]:string;
}

为了同时支持两种索引类型，就得要求数字索引的返回值必须是字符串索引返回值的子类。 其中的原因就是当使用数值索引时，JavaScript 在执行索引操作时，会先把数值索引先转换为字符串索引 。所以 keyof { [x: string]: Person } 的结果会返回 string | number。

3.in

in 用来遍历枚举类型：

typeKeys="a"|"b"|"c"

typeObj={
[pinKeys]:any
}//->{a:any,b:any,c:any}

4.infer

在条件类型语句中，可以用 infer 声明一个类型变量并且对它进行使用。

typeReturnType<T>=Textends(
...args:any[]
)=>inferR?R:any;

以上代码中 infer R 就是声明一个变量来承载传入函数签名的返回值类型，简单说就是用它取到函数返回值的类型方便之后使用。

5.extends

有时候我们定义的泛型不想过于灵活或者说想继承某些类等，可以通过 extends 关键字添加泛型约束。

interfaceLengthwise{
length:number;
}

functionloggingIdentity<TextendsLengthwise>(arg:T):T{
console.log(arg.length);
returnarg;
}

现在这个泛型函数被定义了约束，因此它不再是适用于任意类型：

loggingIdentity(3);//Error,numberdoesn'thavea.lengthproperty

这时我们需要传入符合约束类型的值，必须包含必须的属性：

loggingIdentity({length:10,value:3});

6.Partial

Partial<T> 的作用就是将某个类型里的属性全部变为可选项 ?。

定义：

/**
*node_modules/typescript/lib/lib.es5.d.ts
*MakeallpropertiesinToptional
*/
typePartial<T>={
[PinkeyofT]?:T[P];
};

在以上代码中，首先通过 keyof T 拿到 T 的所有属性名，然后使用 in 进行遍历，将值赋给 P，最后通过 T[P] 取得相应的属性值。中间的 ? 号，用于将所有属性变为可选。

示例：

interfaceTodo{
title:string;
description:string;
}

functionupdateTodo(todo:Todo,fieldsToUpdate:Partial<Todo>){
return{...todo,...fieldsToUpdate};
}

consttodo1={
title:"LearnTS",
description:"LearnTypeScript",
};

consttodo2=updateTodo(todo1,{
description:"LearnTypeScriptEnum",
});

在上面的 updateTodo 方法中，我们利用 Partial<T> 工具类型，定义 fieldsToUpdate 的类型为 Partial<Todo>，即：

{
title?:string|undefined;
description?:string|undefined;
}

ts文件合并教程 (ts基础知识汇总)

七、TypeScript 函数

7.1 TypeScript 函数与 JavaScript 函数的区别

7.2 箭头函数

1.常见语法

2.使用示例

7.3 参数类型和返回类型

7.4 函数类型

7.5 可选参数及默认参数

7.6 剩余参数

7.7 函数重载

八、TypeScript 数组

8.1 数组 解构

8.2 数组展开运算符

8.3 数组遍历

九、TypeScript 对象

9.1 对象解构

9.2 对象展开运算符

十、TypeScript 接口

10.1 对象的形状

10.2 可选 | 只读属性

10.3 任意属性

10.4 接口与类型别名的区别

1.Objects/Functions

2.Other Types

3.Extend

4.Implements

5.Declaration merging

十一、TypeScript 类

11.1 类的属性与方法

11.2 ECMAScript 私有字段

11.3 访问器

11.4 类的继承

11.5 抽象类

11.6 类方法重载

十二、TypeScript 泛型

12.1 泛型语法

12.2 泛型接口

12.3 泛型类

12.4 泛型工具类型

1.typeof

2.keyof

3.in

4.infer

5.extends

6.Partial

8.1 数组解构