一、类的使用

1、implements 子句

类可以实现接口，使用关键字 implements
可以使用一个 implements 子句来检查一个类，是否满足了一个特定的接口。如果一个类不能正确地实现它，就会发出一个错误

注意点:

实现一个带有可选属性的接口并不能创建该属性

只要一个接口继承了某个类,那么就会继承这个类中所有的属性和方法,但是只会继承属性和方法的声明,不会继承属性和方法实现

与 extends 的区别：

extends:继承某个类,继承之后可以使用父类的方法，也可以重写父类的方法

implements:继承某个类,必须重写才可以使用

export default {}interface IPersonInfo{name:stringage:numbersex?:stringshow():void
}
interface IMusic{music:string
}class Person implements IPersonInfo,IMusic{name: string='吴谨言'age:number=21// sex:string='女'music:string='雪落下的声音'show(){console.log(`我叫${this.name}，是主演延禧攻略的主演，今年${this.age}岁了`);}
}
let p = new Person()
p.show()
// p.sex='女';//报错// 注意点:只要一个接口继承了某个类，那么就会继承这个类中所有的属性和方法
// 但是只会继承属性和方法的声明，不会继承属性和方法实现interface ITest extends Person{salary:number
}class Star extends Person implements ITest{name: string='关晓彤'age:number=20salary:number=100000
}let s = new Star()
console.log(s.name);
console.log(s.salary);

二、泛型

1、泛型的基本使用

泛型可以理解为宽泛的类型，通常用于类和函数。使用的时候我们再指定类型
·泛型不仅可以让我们的代码变得更加健壮,还能让我们的代码在变得健壮的同时保持灵活性和可重用性
通过用 <T> 来表示，放在参数的前面

export default {}const arr1:string[]=['李易峰','陈伟霆','杨幂'];
const arr2:Array<string>=['成毅','杨紫']
const arr3:Array<number>=[12,63,23,48]// 不使用泛型
let getArray = (value:number,item:number):number[]=>{return new Array(item).fill(value)
}
let arr = getArray(10,3)
// let arr = getArray('zhang',3);//报错
console.log(arr);let getArray1 = (value:any,item:number):any[]=>{return new Array(item).fill(value)
}
console.log(getArray1(10,3));
console.log(getArray1('白鹿',3));// 使用泛型
let getArray2 = <T>(value:T,item:number):T[]=>{return new Array(item).fill(value)
}
let res = getArray2<string>('鞠婧祎',2)
let res1 = getArray2<number>(2,2)
console.log(res);
console.log(res1);

2、泛型约束

在TS中，我们需要严格的设置各种类型，我们使用泛型之后，将会变得更加灵活，但同时也将会存在一些问题
我们需要对泛型进行约束来解决这些问题

export default {}// 演示可能出现的问题
// function getLength<T>(arr:T):T{
//     console.log(arr.length);
//     return arr
// }// 通用方法
function getLength<T>(arr:Array<T>):Array<T>{console.log(arr.length);return arr
}
getLength([1,2,3])
getLength(['赵丽颖','迪丽热巴','杨幂'])
// getLength('刘亦菲');//报错// 泛型接口
interface ILength{length:number
}
function getLengths<T extends ILength>(arr:T):number{return arr.length
}
getLengths([1,2,3])
getLengths(['赵丽颖','迪丽热巴','杨幂'])
getLengths('刘亦菲')

3、泛型接口

将泛型与接口结合起来使用，可以大大简化我们的代码，增加我们的代码可读性
泛型也可以使用默认值

export default {}interface IPerson{name:stringsex:string
}
let p:IPerson={name:'李易峰',sex:'男'
}interface IPersons<T1,T2>{name:T1sex:T2
}
let ps:IPersons<string,number>={name:'杨幂',sex:0
}interface IPersos<T1=string,T2=string>{name:T1sex:T2
}
let pi:IPersos={name:'蔡徐坤',sex:'男'
}

4、泛型类

泛型类看上去与泛型接口差不多。泛型类使用（<>）括起泛型类型，跟在类名后面。

export default {}// 泛型类使用<>括起泛型类型，跟在类名后面
class Person<T1,T2>{name:T1age:T2sex:T1constructor(name:T1,age:T2,sex:T1){this.name=namethis.age=agethis.sex=sex}
}
const p1 = new Person('白鹿',18,'女')
const p2 = new Person<string,number>('迪丽热巴',18,'女')
const p3:Person<string,number>=new Person('白鹿',18,'女')

三、其他补充类型

1、unknown类型

unknown类型代表任何值。这与any类型类似，但更安全，因为对未知unknown值做任何事情都是不合法的。
unknown类型被称作安全的any

export default {}// 1.任何类型都可以赋值给unknown类型
let str:unknown
str=18
str=true
str='范冰冰'// 2.不能将unknown类型赋值给其他类型
let val:unknown=18;
let num:number;
// num=val;//报错
// 使用类型断言
num = val as number;
// 使用类型缩小
if(typeof val == 'number'){num=val
}// 3.unknown与其它任何类型组成的交叉类型最后都是其他类型
type MyType1 = number & unknown;
type MyType2 = unknown & boolean;
let a:MyType1 = 18;
let b:MyType2 = true;// 4.unknown除了与any以外，与其它任何类型组成的联合类型最后都是unknown类型
type MyType3 = unknown | any;
type MyType4 = unknown | number;
type MyType5 = boolean | unknown;
type MyType6 = unknown | string | boolean;// 5.never类型是unknown类型的子类型
type MyType7 = never extends unknown ? true :false;

2、Map类型

Map 对象保存键值对，并且能够记;住键的原始插入顺序。

任何值(对象或者原始值)都可以作为一个键或一个值。

Map 是ES6中引入的一种新的数据结构

可以使用for of进行迭代

创建Map:

let myMap = new Map();

Map相关的函数与属性:

map.clear() 移除 Map对象的所有键/值对。
map.set() 设置键值对，返回该Map对象。
map.get() 返回键对应的值，如果不存在，则返回undefined。
map.has() 返回一个布尔值，用于判断 Map中是否包含键对应的值。
map.delete() 删除Map中的元素，删除成功返回true，失败返回false。
map.size() 返回Map 对象键/值对的数量。
map.keys() 返回一个Iterator对象，包含了Map对象中每个元素的键。
map.values() 返回一个新的lterator对象，包含了Map对象中每个元素的值。

export default {}// 创建Map对象
let myMap = new Map()// 设置Map对象
myMap.set('李易峰',1)
myMap.set('陈伟霆',2)
myMap.set('黄明昊',3)// 获取键对应的值
console.log(myMap.get('李易峰'));//1
console.log(myMap.get('唐嫣'));//因为不存在，所以是undefined// 判断Map中是否包含键对应的值
console.log(myMap.has('黄明昊'));//true
console.log(myMap.has('虞书欣'));//false// 返回Map对象键/值的对应的数量
console.log(myMap.size);//3// 删除
// console.log(myMap.delete('李易峰'));//true
console.log(myMap.delete('李易峰11'));//false// 移除Map对象的所有键/值对
// myMap.clear()
// console.log(myMap);// 迭代Map中的key
for(let key of myMap.keys()){console.log(key);
}// 迭代Map中的value
for(let value of myMap.values()){console.log(value);
}// 迭代Map中的key => value
for(let entry of myMap.entries()){console.log(entry);
}// 使用对象解析
for (let [key,value] of myMap) {console.log(key,value);
}

3、条件类型

条件类型的形式看起来有点像JavaScript中的条件表达式
T extends U ? TrueType : FalseType
应用场景:解决函数重载问题

export default {}// 复习三元运算符  x=y?a:b
let score=56
let result=''
result=score>=60?'及格':'不及格'
console.log(result);// 条件类型
type MyType<T>=T extends string ? string :any;
type res = MyType<string>interface IName{name:string
}
interface IAge{age:number
}
type Condition<T>=T extends string ? IName :IAge;function reLoad<T extends number | string>(idOrName:T):Condition<T>{throw "";
}
reLoad(19)
reLoad('bobo')

4、映射类型

当你不想重复定义类型，一个类型可以以另一个类型为基础创建新类型。通俗的说就是，以一个类型为基础，根据它推断出新的类型
Readonly : Partial关键字
Record : Pick 映射类型
Readonly，Partial和Pick是同态的，但Record不是。因为Record并不需要输入类型来拷贝属性，所以它不属于同态

export default {}// Record映射类型
//他会将一个类型的所有属性值都映刻到另一个类型上并创造一个新的类型type Name="person" | "animal";
type Person ={name:stringage:number
}type NewType=Record<Name,Person>;
let res:NewType = {person:{name:'唐艺昕',age:18},animal:{name:'云梦',age:15}
}
console.log(res);// Pick映射类型
// 将原有类型中的部分内容映射到新类型中
interface IPerson{name:stringage:number
}
type MyType = Pick<IPerson,'name'>;
let res1:MyType={name:'韩雪'
}
console.log(res1);

TypeScript 类的使用、泛型与其他补充类型相关推荐

TypeScript泛型与其他补充类型
一.类的使用 1.implements 子句类可以实现接口,使用关键字 implements 可以使用一个 implements 子句来检查一个类,是否满足了一个特定的接口.如果一个类不能正确地实现 ...
Typescript类，泛型，各种类型工具
一.TypeScript 类一个类可以包含以下几个模块: 1.属性 1.1 类属性 1.2 实例属性 2.构造函数(在python中叫初始化函数) 该函数在类实例化时会被立即调用 3.方法(也是函数 ...
TypeScript从入门到精通（二十一）类中的泛型
类中的泛型使用: 我们在写一个基本class类在构造函数中需要传递一组女角色的名称,然后通过getGirlsNmae发方法展示女角色的名称 class GirlRole{constructor(pr ...
ts泛型和补充类型基础
目录 implements字句泛型基本使用泛型约束泛型接口泛型类补充类型 unknown类型 map对象条件类型映射类型 implements字句类可以实现接口,使用笑键字implem ...
TypeScript（七）泛型、声明合并、扩展阅读
TypeScript(七)泛型.声明合并.扩展阅读文章目录 TypeScript(七)泛型.声明合并.扩展阅读 1. 泛型简单的例子多个类型参数泛型约束泛型接口泛型类泛型参数的默认类型 ...
java 通配符类_关于类：具有多个类的Java泛型通配符
我想要一个类对象,但是我想要强制它所代表的任何类来扩展类A和实现接口B. 我能做到: Class extends ClassA> 或: Class extends InterfaceB> ...
Java 中，类、类对象、泛型之间的转换
Java 中,类.类对象.泛型之间的转换 R 为非泛型获得类通过类型名来获得类通过对象来获得类通过类名字符串来获得类通过类来获得类名字符串通过类来获得对象使用 R 的无参数构造器来创建对 ...
.NET手撸绘制TypeScript类图——下篇
.NET手撸绘制TypeScript类图--下篇在上篇的文章中,我们介绍了如何使用 .NET解析 TypeScript,这篇将介绍如何使用代码将类图渲染出来. 类型定义渲染不出意外,我们继续使用 ...
.NET手撸绘制TypeScript类图——上篇
.NET手撸绘制TypeScript类图--上篇近年来随着交互界面的精细化, TypeScript越来越流行,前端的设计也越来复杂,而类图正是用简单的箭头和方块,反映对象与对象之间关系/依赖的好方 ...

TypeScript 类的使用、泛型与其他补充类型

一、类的使用

1、implements 子句

二、泛型

1、泛型的基本使用

2、泛型约束

3、泛型接口

4、泛型类

三、其他补充类型

1、unknown类型

2、Map类型

3、条件类型

4、映射类型

TypeScript 类的使用、泛型与其他补充类型相关推荐

最新文章

热门文章