一、类型混入(Mixins)
对象混入
可以使用 es6 的 Object.assign 合并多个对象
此时 people 会被推断成一个交差类型 Name & Age & sex;
interface Name {
name: string;
}
interface Age {
age: number;
}
interface Sex {
sex: number;
}
let people1: Name = { name: "小满" };
let people2: Age = { age: 20 };
let people3: Sex = { sex: 1 };
const people = Object.assign(people1, people2, people3);类的混入
首先声明两个 mixins 类 （严格模式要关闭不然编译不过）
class A {
type: boolean = false;
changeType() {
this.type = !this.type;
}
}
class B {
name: string = "张三";
getName(): string {
return this.name;
}
}下面创建一个类，结合了这两个 mixins
首先应该注意到的是，没使用 extends 而是使用 implements。 把类当成了接口
我们可以这么做来达到目的，为将要 mixin 进来的属性方法创建出占位属性。 这告诉编译器这些成员在运行时是可用的。 这样就能使用 mixin 带来的便利，虽说需要提前定义一些占位属性
class C implements A, B {
type: boolean;
changeType: () => void;
name: string;
getName: () => string;
}最后，创建这个帮助函数，帮我们做混入操作。 它会遍历 mixins 上的所有属性，并复制到目标上去，把之前的占位属性替换成真正的实现代码
Object.getOwnPropertyNames()可以获取对象自身的属性，除去他继承来的属性， 对它所有的属性遍历，它是一个数组，遍历一下它所有的属性名
Mixins(C, [A, B]);
function Mixins(curCls: any, itemCls: any[]) {
itemCls.forEach((item) => {
Object.getOwnPropertyNames(item.prototype).forEach((name) => {
curCls.prototype[name] = item.prototype[name];
});
});
}二、装饰器(Decorator)
它们不仅增加了代码的可读性，清晰地表达了意图，而且提供一种方便的手段，增加或修改类的功能
若要启用实验性的装饰器特性，你必须在命令行或tsconfig.json里启用编译器选项
experimentalDecorator: true装饰器
装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。
首先定义一个类
class A {
constructor() {}
}定义一个类装饰器函数 他会把 ClassA 的构造函数传入你的 watcher 函数当做第一个参数
const watcher: ClassDecorator = (target: Function) => {
target.prototype.getParams = <T>(params: T): T => {
return params;
};
};使用的时候 直接通过@函数名使用
@watcher
class A {
constructor() {}
}验证
const a = new A();
console.log((a as any).getParams("123"));装饰器工厂
其实也就是一个高阶函数 外层的函数接受值 里层的函数最终接受类的构造函数
const watcher = (name: string): ClassDecorator => {
return (target: Function) => {
target.prototype.getParams = <T>(params: T): T => {
return params;
};
target.prototype.getOptions = (): string => {
return name;
};
};
};
@watcher("name")
class A {
constructor() {}
}
const a = new A();
console.log((a as any).getParams("123"));装饰器组合
就是可以使用多个装饰器
const watcher = (name: string): ClassDecorator => {
return (target: Function) => {
target.prototype.getParams = <T>(params: T): T => {
return params;
};
target.prototype.getOptions = (): string => {
return name;
};
};
};
const watcher2 = (name: string): ClassDecorator => {
return (target: Function) => {
target.prototype.getNames = (): string => {
return name;
};
};
};
@watcher2("name2")
@watcher("name")
class A {
constructor() {}
}
const a = new A();
console.log((a as any).getOptions());
console.log((a as any).getNames());方法装饰器
返回三个参数
对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。 成员的名字。 成员的属性描述符。
[
{},
'setParasm',
{
value: [Function: setParasm],
writable: true,
enumerable: false,
configurable: true
}
]
const met:MethodDecorator = (...args) => {
console.log(args);
}
class A {
constructor() {
}
@met
getName ():string {
return '小满'
}
}
const a = new A();属性装饰器
返回两个参数
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
- 属性的名字。
[ {}, 'name', undefined ]
const met: PropertyDecorator = (...args) => {
console.log(args);
};
class A {
@met
name: string;
constructor() {}
}
const a = new A();参数装饰器
返回三个参数
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
- 成员的名字。
- 参数在函数参数列表中的索引。
[ {}, 'setParasm', 0 ]
const met: ParameterDecorator = (...args) => {
console.log(args);
};
class A {
constructor() {}
setParasm(@met name: string = "213") {}
}
const a = new A();三、类型兼容
协变
interface A {
name: string;
age: number;
}
interface B {
name: string;
age: number;
sex: string;
}
let a: A = {
name: "老墨我想吃鱼了",
age: 33,
};
let b: B = {
name: "老墨我不想吃鱼",
age: 33,
sex: "女",
};
a = b;A B 两个类型完全不同但是竟然可以赋值并无报错 B 类型充当 A 类型的子类型，当子类型里面的属性满足 A 类型就可以进行赋值，也就是说不能少可以多，这就是协变。
逆变
逆变一般发生于函数
interface A {
name: string;
age: number;
}
interface B {
name: string;
age: number;
sex: string;
}
let a: A = {
name: "老墨我想吃鱼了",
age: 33,
};
let b: B = {
name: "老墨我不想吃鱼",
age: 33,
sex: "女",
};
a = b;
let fna = (params: A) => {};
let fnb = (params: B) => {};
fna = fnb; //错误
fnb = fna; //正确这里比较绕，注意看 fna 赋值 给 fnb 其实最后执行的还是 fna 而 fnb 的类型能够完全覆盖 fna 所以这一定是安全的，相反 fna 的类型不能完全覆盖 fnb 少一个 sex 所以是不安全的。
双向协变
tsconfig 中的 strictFunctionTypes 属性 设置为 false 便可以支持支持双向协变 fna fnb 随便可以来回赋值