1、接口 interface
1.1、什么是接口
接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现, 然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法;
1.2、接口的作用
1、TypeScript的核心原则之一是对值所具有的结构进行类型检查。 在TypeScript里,接口的作用就是为 这些类型命名和为你的代码或第三方代码进行定义。
2、接口是一种规范或约束,通常使用接口(Interfaces)来定义对象的类型;
//接口是一种规范,通常用于定义对象的类型
//1、定义一个IPerson接口
interface IPerson{
name:string,
age:number
}
//2、定义一个tom变量,它的类型是IPerson类型的
//约束tom的形状必须和IPerson的一致
let tom:IPerson = {
name:'Tom',
age:18
}
//3、定义的属性比接口多一些属性,或少一些属性是不允许的
let cat : IPerson = {
name:'Cat',
}
//Property 'age' is missing in type '{ name: string; }' but required in type
'IPerson'
//4、可选属性 ? 表示该属性不是必须的,可有可无
interface IPerson{
name:string,
age?:number
}
1.3、类型别名 type
类型别名用来给一个类型起个新名字。 类型别名type和接口interface都可以描述一个对象或函数;不同点 是类型别名type还可以声明基本类型别名,联合类型,元组等类型。
一般来说,如果不清楚什么时候用interface/type,能用 interface 实现,就用 interface , 如果 不能就用 type。
type User = {
name:string,
age:number
}
//定义User类型的变量toms
let toms:User = {
name:'Toms',
age:20,
}
console.log(toms.name)
console.log(toms.age)
2、typeof 和 keyof 的使用
2.1、typeof
在 TypeScript 中, typeof 操作符可以用来获取一个变量或对象的类型
type User = {
name:string,
age:number
}
let toms:User = {
name:'Toms',
age:20,
}
console.log(toms.name)
console.log(toms.age)
//typeof使用
//通过typeof获取变量toms的类型,赋值给Toms
type Toms = typeof toms;
//使用Toms
let tm : Toms = {
name:'Tm',
age:18
}
//获取对象类型
const infos = {
name:'张三',
age:18,
adress:{
city:'北京'
}
}
type infoType = typeof infos
2.2、keyof
TypeScript 通过 keyof 操作符提取其属性的名称
interface IkeyOf{
name:string,
age:number
}
// key1 通过 keyof 获取到 IkeyOf 的属性 name 和 age
type key1 = keyof IkeyOf;
type keyOfper = {
name:string,
age:number
}
// key2 通过 keyof 获取到 keyOfper 的属性 name 和 age
type key2 = keyof keyOfper
const user ={
name:"",
sex:''
}
// 不能直接获取 const 的对象
type key3 = keyof user
// 应该是这样
type key3 = keyof typeof user
3、泛型和泛型约束
3.1、泛型
1、什么是泛型: 我们可以理解为泛型就是在编译期间不确定方法的类型(广泛之意思),在方法调用时,由程 序员指定泛型具体指向什么类型;
2、泛型作用: 通常解决类,接口,方法的复用性,以及对非特定数据类型的支持
//这里编译期间不确定 getMsg 就先定义一个范型 T
function getMsg<T>(msg:T):T{
return msg;
}
let msg = getMsg<string>('这里确定了是 string 类型');
console.log(msg)
//定义一个对象
const userInfo = {
name:'张三',
age:18
}
//获取userInfo对象里面属性的值
//'string' can't be used to index type '{}'.
// function getVal(obj:object,name:string){
// return obj[name]
// }
function getVal(obj:any,name:string){
return obj[name]
}
const name = getVal(userInfo,'name')
console.log(name)
const age = getVal(userInfo,'age')
console.log(age)
//泛型约束
//上面也可以获取数据,但是获取到的值也变为 any了
// 通过 K extends keyof T 确保参数 key 一定是对象中含有的键
function getProperty<T,K extends keyof T>(obj:T,key:K){
return obj[key]
}
// 这里继续用上面的 userInfo 为例子
const names = getProperty(userInfo ,"name") // 这里就会有提示,只有 name 和 age 可以填写
3.2、泛型条件
T 如果属于 U 类型的,就输出 X 否则输出 Y 注:这里extends 不是继承的意思
T extends U? X: Y
//
type Fas<T> = T extends {name: infer Test} ? Test : unknown;
type FasTest = Fas<{name:string}> // 可以获取到 name
type FasTest1 = Fas<{age:number}> // 获取不到任何东西,输出 unknown,结果如下图
4、模板字符串
type world = "World";
type show = `Hello ${world}`;
5、交叉类型 &
1、交叉类型:把几个类型的成员合并,形成一个拥有这几个类型所有成员的新类型,可以理解为合并
2、注意:交叉类型不是取交集,是取并
3、基本类型是不会存在交叉的,一个类型不会既是string又是number类型
// 1、交叉类型:把几个类型的成员合并,形成一个拥有这几个类型所有成员的新类型,可以理解为合并
type t1 = string & number;
// 下面 以 user 为例 把Iname 和 Iage 合并,形成了一个新的类型 user,然后使用这个新类型
interface Iname{
name:string
}
interface Iage{
age:number
}
type users = Iname & Iage;
type ss = keyof users // 可以看到 ss 获取了 users 的类型的属性
// 使用合并后的 users 类型
let d:users = {
name:'张三',
age:18
}
//比较常见的一个案例:列表分页及查询
interface IPage{
pageSize:number;
currentPage:number;
}
interface IParms {
searchKey:string;
}
type Tparms = IPage & IParms;
let parms:Tparms = {
pageSize:10,
currentPage:1,
searchKey:''
}
6、联合类型 |
联合类型: 表示取值可以为多种类型中的一种
function add(parm1:string | number,parm2:string | number){
if(typeof parm1 === 'string' || typeof parm2 === 'string'){
return `${parm1}${parm2}`
}
return parm1 + parm2
}
// 很简单的例子,是 string 就输出链接结果。是数字就输出相加结果
let adds = add('Hello','World');
console.log(adds)
let adds1 = add(1,1)
console.log(adds1)
7、Omit使用
Omit<K,T> : 用于从指定类型中,排除指定的属性,返回一个新的类型
K:是对象类型名称,T:是剔除K类型中的属性名称
// Omit<K,T> : 用于从指定类型中,排除指定的属性,返回一个新的类型
//K:是对象类型名称,T:是剔除K类型中的属性名称
type OmitUser = {
name:string;
age:number;
sex:string;
}
type NewOmitUser = Omit<OmitUser,'sex'>
//等价于
type OmitUser1 = {
name:string;
age:number;
}
8、Pick使用
Pick : 从一个类型中,取出几个想要的属性
//Pick使用: 从一个类型中取出想要的属性
interface IUser{
name:string,
age:number
sex:string
}
选择 IUser中的 age
type IUser= Pick<ITest,'age'>;