typescript高级

typeof获取类型:

class T1 {
    num?: number
}
const a: T1 = { num: 1 }
const aa = { count: 1 }
console.log(typeof a) // 获取a的类型
function logNumber(number: typeof aa) { // 获取aa的类型当作number的类型
    console.log(number.count)
}
logNumber(aa)

typeof只能查询变量或对象属性的类型,不能查询函数调用后的类型

class类成员的可见性修饰符:

public: 公开的,没有访问限制

protected:受保护的,只有本类和子类可访问

private:私有的,只有本类自己能访问

class类成员的只读修饰符(接口和对象的属性也能用readonly修饰):

在属性上加上readonly除了初始化赋值,不允许再赋值修改

类型兼容(类,接口,函数都遵循类型多的可以兼容少的,但是当函数参数为复杂类型时(比如对象)就反之):

交叉类型(&):

将多个类型合并为一个类型,同时拥有他们的所有类型,类似继承extends的功能

// 在ProgressEvent上合并一个对象类型,使其扩展一个percent属性的类型
type Result = progress: ProgressEvent & { percent: number }

当使用继承时有类型冲突导致报错,可以使用交叉类型来兼容:

keyof:遍历一个对象的所有key然后生成一个联合类型

泛型函数:

// 泛型函数
function id<Type>(value: Type): Type {
    return value
}
console.log(id<number>(1))
console.log(id(1))// 可以不传类型,因为ts可以根据传入参数的类型推断Type 如果不传类型得到的结果类型会显示是字面量类型
console.log(id<string>('字符串'))
console.log(id<boolean>(true))
console.log(id<string[]>(['字符串1', '字符串2']))

对泛型函数添加约束,缩小泛型类型取值范围:

interface ILength {
    length: number
}
// 给泛型添加约束,必须满足ILength接口,对象要有一个length属性
// 这里的extends不是继承的意思,是左边的泛型Type要满足右边的泛型约束的意思
function id<Type extends ILength>(value: Type): Type {
    return value
}
console.log(id('1'))
console.log(id([1]))
console.log(id({ length: 1 }))
// 错误 没有length属性不满足ILength
console.log(id(1)) // 报错

对泛型函数多个参数进行约束:

// 写一个函数根据对象的key获取对象的属性值
// 这里的keyof就是获取Type对象的所有key组成联合类型,然后Key要满足联合类型其中的一个,也就是 name | age
function getProp<Type, Key extends keyof Type>(obj: Type, key: Key): unknown {
    return obj[key];
}
const user = { name: 'Suk', age: 18 }
// 这里的key参数就受user对象的所有key约束,必须是其中的一个 否则报错
const res = getProp(user, 'name')
console.log(res)

泛型接口:

// 定义一个泛型接口约束对象
interface IdFunc<Type> {
    value: Type;
    id: (value: Type) => Type;
    ids: (values: Type[]) => Type[]
}
const idFun: IdFunc<number> = {
    value: 1,
    id: (value) => value,
    ids: (values) => values
}

泛型类:

class GenericNum<NumType extends number> {
    public defaultValue: NumType | undefined;
    constructor(num?: NumType) {
        this.defaultValue = num;
    }
    public add(num1: NumType, num2: NumType): number {
        return num1 + num2
    }
}
// 泛型类在使用时如果有构造函数,泛型尖括号里的类型变量是可以省略不写的 他会根据构造的形参推断类型  但是接口必须要写不能省略
const g1 = new GenericNum();
const g2 = new GenericNum<number>();
console.log(g1.add(1, 2));