Typescript

1. 泛型

泛型代表的是泛指某一类型，更像是一个类型变量。由尖括号包裹<T>。

主要作用是创建逻辑可复用的组件。

泛型可以作用在函数、类、接口上。

• 函数：

function greet<T>(name: T) {

}

• 类：

class createObj<T> {

name: T

}

• 接口：

interface IF<T> {

name: T

}

• 泛型约束:

interface TIF {

length: number

}

function test<T extends TIF>(params: T) {

}

2. ES6 新增class

代码语言：javascript复制

// 父类
class Father {
    name() {
    }
}

// 子类
class Son extends Father {
    constructor() {
        // 继承父类this
        super();
    }
    
    // 重写父级方法
    name() {
        super.name();
    }
}

3. 装饰器

装饰器本身是一个函数，通过 @ 符号来使用。

• 类的装饰器

代码语言：javascript复制

function testDecorator() {
    // 类的属性上，添加方法
    return function(constructor: any) {
        constructor.prototype.getName = () => {
            console.log('dell');
        }
    }
}

// 多个装饰器，执行顺序：从下往上，从右到左
// 类创建时执行，非实例化时
@testDecorator
class Test {
}

代码语言：javascript复制

function testDecorator(){
    // 类的属性上，添加方法
    return function<T extends new (...args: any[ ]) => any>(constructor: T) {         
        return class extends constructor {
            name = 'lee';
            getName() {
                this.name = name;
            }
        }
    }
}

// 先执行装饰器方法，实例化时，可以获取装饰器方法里添加的属性
@testDecorator 
const Test = testDecorator()(
    class {
        name: string;
        constructor(name: string) {
            this.name = name;
        }
    }
)

const test = new Test('dell');
console.log(test.getName());

• 方法的装饰器

代码语言：javascript复制

// 普通方法，target 对应的是类的 prototype
// 静态方法，target 对应的是类的 构造函数
// 类创建时执行
function getNameDecorator(target: any, key: string，descriptor: PropertyDescriptor) {
    console.log(target);
    
    // descriptor类似于object.defineProperty()的第三个参数
    descriptor.writable = true;
    // 修改对应方法的值
    descriptor.value = function() {
        return 'Decorator';
    }
}

class {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    
    @getNameDecorator
    getName() {
        return this.name;
    }
}

const test = new Test('dell');
console.log(test.getName());

• 访问器的装饰器

代码语言：javascript复制

// 不能在get set 方法上添加同一个装饰器
function visitDecorator(target: any, key: string，descriptor: PropertyDescriptor) {
    console.log(target);
    descriptor.writable = false;
}

class {
    private _name: string;
    constructor(name: string) {
        this._name = name;
    }
    
    get name() {
        return this._name;
    }
    
    @visitDecorator
    set name(name: string) {
        this._name = name;
    }
}

const test = new Test('dell');
console.log(test.getName());

• 属性的装饰器

代码语言：javascript复制

function nameDecorator(target: any, key: string): any {
    // 修改的为原型上(__proto__)的name
    target[key] = 'lee';

    console.log(target, key);
    const descriptor: PropertyDescriptor = {
        writable: false
    }
    
    return descriptor;
}

class {
    @nameDecorator
    name = 'Dell';
}

const test = new Test();
console.log(test.name);

• 参数的装饰器

代码语言：javascript复制

// params：原型  方法名  参数所在的位置
function paramsDecorator(target: any, method: string, paramsIndex: number): any {
    console.log(target, key, paramsIndex);
}

class {
    getInfo(@paramsDecorator name: string, age: number) {
        console.log(name, age);
    }
}

const test = new Test();
console.log(test.getInfo());

class function interface 泛型 装饰器

0 人点赞