今天学接口补充、泛型、工具类型
一、接口补充
1.1 接口继承
基本语法
interface 接口1{
属性1：=类型
}
interface 接口2 extends 接口1{
属性2=类型
}
参考代码
interface IFood {
name: string
}
interface IVegetable extends IFood {
color: string
}
const flower: IVegetable = {
name: '西兰花',
color: '黄绿色'
}
1.2 接口实现（类来实现接口）
基本语法
interface 接口{
属性：类型
方法：方法类型
}
class 类 implements interface 接口{
// 必须实现 接口中定义的 属性、方法，否则会报错
}
二、泛型
作用：
泛型在保证类型安全（不丢失类型信息）的同时，可以让函数等与多种不同的类型一起工作，灵活可复用。通俗一点就是类型是可变的。
小案例
// 1. 字符串
function getStr(arg: string) {
return [arg] // 返回 string[]类型数组
}
// 2. 数字
function getNum(arg: number) {
return [arg] // 返回 number[]类型数组
}
// 3. 布尔
function getBoolean(arg: boolean) {
return [arg] // 返回 boolean[]类型数组
}
2.1 泛型函数
Type 是泛型参数的名字，类似于之前的形参，
- 可以自行定义，有意义即可
- 首字母大写
- 参见泛型参数名 T、Type
2.1.1基础语法
代码示例
// 定义泛型参数 Type,后续可以使用类型的位置均可以使用比如: 形参、函数内部、返回值
// 1. 参数类型
function 函数名<Type>(形参:Type){
}
// 2. 返回值类型
function 函数名<Type>(形参:Type):Type{
} //我们一般用return 返回值
使用泛型函数改写上面的小案例
// 1、定义泛型函数
function getdata<t>(args:t){
return [args]
}
// 2、调用泛型函数，注意：要传入具体类型
let num =getdata<number>(100)
console.log('',num)
getdata<string>('100')
getdata<boolean>(true)
getdata<string[]>(['100','200']])
//
总结：泛型函数的使用步骤
1. 泛型函数定义（类型使用T来占位）
2. 泛型函数调用（传入具体类型）
2.2 泛型约束
作用：
如果开发中不希望任何类型都能传递给类型参数，那么可以通过泛型约束来完成。
基础语法
代码示例:
function 函数名<t extends 约束类型>（）{}
小案例：联合类型的约束（常用）
function getdata<t extends number|string >(args:t){
return [args]
}
getdata(100) // √
getdata('100') // √
getdata(true) // x
2.3 多个泛型参数
作用：
在开发中如果有需要可以添加多个类型变量，只需要定义并使用多个类型变量即可。
基础语法
代码示例：
// 1、多个参数语法：
function getdata<t1,t2,...>(参数1:T1,参数2:T2,...) {}
// 2、多个参数类型约束语法：
函数名<T1 extends 类型,T2 extends 类型,....>(){}
类型可以是：基本类型和复杂类型，联合类型，枚举
小案例
function funA<t1 extends string,t2 extends number>(name:t1,age:t2){
console.log(name,'',age)
}
funA<string,number>('小明'，22)
2.4 泛型接口
作用：
定义接口时结合泛型。
基础语法
代码示例：
interface 接口<t>{
//内部使用type
}
小案例：
interface getdata<t>{
code:number
msg:string
data:t
}
let obj: getdata<number[]> = {
code: 200,
msg: 'ok',
data:[1,2] // ✔️
//data:['1','2'] // ❌
}
2.5 泛型类
作用：
定义类的时候结合泛型。
基础语法：
代码示例
class 类名<type>{
//内部可以使用type
}
小案例:
class person<t>{
id:t
constructor (id:t){
this.id=id
}
getid(){
return this.id
}
}
三、工具类型
3.1 Partial< type>
作用：
基于传入的Type类型构造一个【新类型】，将Type的所有属性设置为可选。
基础语法：
代码示例
type 新类型 = Partial<接口>
type 新类型 = Partial<类>
//后续使用新类型即可
小案例：
interface dog{
name:string
}
type newinterface = Partial<dog>
let ndog:newinterface={}
console.log(ndog.name)
3.2. Required< Type>
作用：
基于传入的Type类型构造一个【新类型】，将Type的所有属性设置为必填。
基础语法：
代码示例
type 新类型 = Required<接口>
type 新类型 = Required<类>
//后续使用新类型即可
小案例：
interface dog{
name:string
}
type newdog = Required<dog>
let ndog:newdog={name:''}
class idog{
name?:string
age?:number
}
type newidog= Required<idog>
let nidog:newidog= {name:'',age:5}
3.3. Readonly< Type>
作用：
基于 Type构造一个【新类型】，并将Type 的所有属性设置为readonly
基础语法：
代码示例
type 新类型 = Readonly<接口>
type 新类型 = Readonly<类>
//后续使用新类型即可
小案例：
class Person {
name: string = ''
age: number = 0
}
type ReadonlyIPerson = Readonly<Person>
const p: ReadonlyIPerson = {
name: 'jack',
age: 10
}
p.name = 'rose' // 报错 属性全部变成只读
3.4. Record<Keys，Type>
作用：
构造一个对象类型，其属性键为Keys，属性值为Type。该实用程序可用于将一种类型的属性映射到另一种类型。
语法举例：
代码示例
@State person = {'name':'张三'} // ❌这样定义报错 -> 因为没有使用interface指定对象类型
// 如果不想定义interface，就可以直接使用Record<Key,Value>来指定对象类型即可
@State person:Record<string,string> = {'name':'张三'} // ✔️
✨✨注意：{}对象的属性名类型要对应Record<Key类型,value类型> 中的Key类型，属性值对应value类型
今天就学到这，希望能帮到大家。
