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=18// sex:string="女"music:string="爱的供养"show(){console.log(`我是${this.name}，年龄是${this.age}，主演古剑奇谭`)}
}
let p = new Person
p.show()interface ITest extends Person{salary:number
}class Star extends Person implements ITest{salary: number=10000000name:string="赵丽颖"
}
let s = new Star()
console.log(s.salary)
console.log(s.name)

泛型

泛型的基本使用

泛型可以理解为宽泛的类型，通常用于类和函数。使用的时候我们再指定类型

泛型不仅可以让我们的代码变得更加健壮,还能让我们的代码在变得健壮的同时保持灵活性和可重用

·通过用<T>来表示，放在参数的前面

export default {}// const arr1:string[]=["请问","阿斯顿","自行车"]
// const arr2:Array<string>=["请问","阿斯顿","自行车"]
// const arr3:Array<number>=[1,2,3,4,5]
// let res = new Array(3).fill("自行车")
// console.log(res)// let getArray = (value:number,items:number):number[]=>{
//     return new Array(items).fill(value)
// }
// let res1 = getArray(10,5)
// console.log(res1)// let getArray = (value:any,items:number):any[]=>{
//     return new Array(items).fill(value)
// }
// let res2 = getArray("刘亦菲",5)
// let res3 = getArray(10,5)
// console.log(res2)
// console.log(res3)let getArray = <T>(value:T,items:number):T[]=>{return new Array(items).fill(value)
}
let res4 = getArray<string>("刘亦菲",5)
console.log(res4)
let res5 = getArray<number>(6,5)
console.log(res5)

泛型约束

在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,4,5])
// getLength(["刘亦菲","杨幂","赵丽颖"])
// getLength("刘亦菲")interface ILength{length:number
}
function getLength<T extends ILength>(arr:T):number{return arr.length
}
getLength([1,2,3,4,5])
getLength(["刘亦菲","杨幂","赵丽颖"])
getLength("刘亦菲")

泛型接口

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

泛型也可以使用默认值

export default {}// interface IPerson<T1,T2>{
//     name:T1
//     age:T2
// }
// let p:IPerson<string,number>={
//     name:"刘亦菲",
//     age:18
// }
// console.log(p)interface IPerson<T1=string,T2=number>{name:T1age:T2
}
let p:IPerson={name:"刘亦菲",age:18
}
console.log(p)

泛型类

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

export default {}// <>里T有几个取决于有几种属性类型
class Person<T1,T2>{name:T1age:T2sex:T1constructor(name:T1,age:T2,sex:T1){this.name=namethis.age=agethis.sex=sex}
}
let p = new Person<string,number>("刘亦菲",18,"女")
console.log(p)

其他补充类型

unknown类型

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

unknown类型被称作安全的any

1.任何类型都可以赋值给unknown类型

2.不能将unknown类型赋值给其它类型

3.unknow与其它任何类型组成的交叉类型最后都是其它类型

4.unknown除了与any以外，与其它任何类型组成的联合类型最后都是unknown类型

5.never类型是unknown类型的子类型

export default {}// 1.任何类型都可以赋值给unknown
let str:unknown;
str="刘亦菲"
str=18
str=true// 2.不能将unknown类型赋值给其他类型
let val:unknown=18
let num:number
// num=val
// 类型断言
num=val as number
// 类型缩小
if(typeof val=="number"){num=val
}// 3.unknown类型与其他类型组成的交错类型最后都是其他类型
type MyType = number & unknown
type MyType2 = unknown & string// 4.unknown除了与any，与其他类型组成的联合类型最后都是unknown类型
type MyType3 = unknown | string
type MyType4 = number | unknown
type MyType5 = unknown | any// 5.never类型是unknown类型的子类型
type MyType6 = never extends unknown?true:false

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()-返回一个lterator对象，包含了Map对象中每个元素的键。

map.values()-返回一个新的lterator对象，包含了Map对象中每个元素的值。

export default {}let nameMap = new Map()// 设置Map对象
nameMap.set("刘亦菲",1)
nameMap.set("杨幂",2)
nameMap.set("赵丽颖",3)// 获取键对应的值
// console.log(nameMap.get("刘亦菲"))
// console.log(nameMap.get("刘亦菲1"))// 判断Map中是否包含键对应的值
// console.log(nameMap.has("杨幂"))
// console.log(nameMap.has("唐嫣"))// 返回Map对象键/值对的数量
// console.log(nameMap.size)// 删除
// console.log(nameMap.delete("赵丽颖"))
// console.log(nameMap.delete("赵丽颖1"))// 移除Map对象的所有键/值对
// nameMap.clear()
// console.log(nameMap)// 迭代Map中的key
// for(let key of nameMap.keys()){
//     console.log(key)
// }// 迭代Map中的value
// for(let value of nameMap.values()){
//     console.log(value)
// }// 使用对象解析
for(let [key,value] of nameMap){console.log(key,value)
}

条件类型

条件类型的形式看起来有点像JavaScript中的条件表达式.

T extends U ? TrueType : FalseType

·应用场景:解决函数重载问题

export default {}// 三元运算符
// let f = 60
// let j =""
// j=f>=60?"及格":"不及格"
// console.log(j)interface IName{name:string
}
interface IAge{age:number
}// 条件类型
type Condition<T>=T extends string?IName:IAge
function reload<T extends string|number>(idOrname:T):Condition<T>{throw ""
}
reload("赵丽颖")
reload(18)

映射类型

当你不想重复定义类型，一个类型可以以另一个类型为基础创建新类型。通俗的说就是，以一个类型为基础，根据它推断出新的类型

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:3}
}
console.log(res)// Pick映射类型
// 将原有类型中的部分内容映射到新类型中
interface IPerson{name:stringage:number
}
type MyType=Pick<IPerson,"name">
let res2:MyType={name:"崔弗"
}
console.log(res2)

TypeScript类型相关推荐

TypeScript 类型声明书写踩坑全解析
本文总结了TypeScript类型声明的书写,很多时候写TypeScript不是问题,写类型就特别纠结,我总结下,我在使用TypeScript中遇到的问题.如果你遇到类型声明不会写的时候,多看看lod ...
typeScript类型学习
typeScript类型学习 1. 字面量 1.1 什么是字面量 1.2 为什么要有字面量 1.3 ts中的字面量 2.|(联合类型) 3.any 4.unknown 5.unknown和any的区别 ...
TypeScript类型检查机制
类型推断指不需要指定变量的类型,TS编译器可以根据某些规则自动推断出类型. 什么时候会有类型推断? 声明变量时没有指定类型函数默认参数函数返回值 ...... let a; // 这时自动推断为 ...
typescript索引类型_复杂场景下的 typescript 类型锚定（1） ----- 对象索引提取-阿里云开发者社区...
前言:在编写 typescript 应用的时候,有时候我们会希望复用或者构造一些特定结构的类型,这些类型只从 typescript 靠内建类型和 interface.class 比较难以表达,这时候我 ...
react改变checkbox的文字类型_reactjs – React复选框事件和处理程序的Typescript类型？...
我在Typescript中构建类似 this React example的东西.目标是让父项具有状态,并创建几个无状态子组件,将其点击返回到父组件. 由于示例是在Javascript中,我不知道输入框 ...
Typescript 类型的常用知识与技能
Typescript 类型系统本文主要整理与翻译自 lib.es5.d.ts与微软Typescript文档.MDN文档. 邮箱 :291148484@163.com CSDN 主页:https:// ...
Typescript 类型推断
TypeScript 能根据一些简单的规则推断(检查)变量的类型,你可以通过实践,很快的了解它们. #定义变量变量的类型,由定义推断: `let foo = 123; // foo 是 'numbe ...
你所不了解的TypeScript 类型编程
点击上方"前端开发博客",选择"设为星标" 回复"2"加入前端群前言作为前端开发的趋势之一,TypeScript正在越来越普及,很多人像 ...
【TypeScript】（一）快速上手TypeScript类型语法
文章目录 1.概述 2.TS中的类型 2.1.类型推断 2.2.类型定义 2.3.复杂类型 2.3.1.联合 2.3.2.泛型 2.4.type关键字 3. 总结 1.概述 TypeScript(TS ...
零基础入门Typescript—类型推论，联合类型和类型断言
类型推论 - type inference 在类型脚本中,有的地方使用类型推论在没有明确类型注释时提供类型的信息例如: let x = 3; 我们没有声明类型,但是类型推论其为number类型联合 ...

TypeScript类型