装饰器打字稿

Decorator Typescript

提问人:user19280128 提问时间:1/11/2023 更新时间:1/11/2023 访问量:33

问:

为什么 typescript 的函数装饰器不打印它修饰方法的类的这个?

interface IUserService {
    users: number;
    get(): void;
}

class UserService implements IUserService {
    users: number = 100;

    @methodDecorator()
    get() {
        console.log(this.users) // output underfined
        console.log(1); // all id okey, output is 1
    }
}

function methodDecorator(throwError?: boolean) {
    return (target: Object, propertyKey: string | symbol, decriptor: TypedPropertyDescriptor<(...args: any[]) => any>) => {
        const oldFunc = decriptor.value;
        decriptor.value = async () => {
            try {
                await oldFunc?.apply(target);
            } catch (err) {
                if (throwError) {
                    console.log('кидаем дальше!');
                    throw err;
                } else {
                    if (err instanceof Error) {
                        console.log('Попалась ошибка!');
                        console.log(err.message);
                    } else {
                        console.log(err);
                    }
                }
            }
        };
    return decriptor
    };
}

function methodDecorator(throwError?: boolean) {
    return (target: Object, propertyKey: string | symbol, decriptor: TypedPropertyDescriptor<(...args: any[]) => any>) => {
        const oldFunc = decriptor.value as ()=>any;
        decriptor.value = async () => {
      console.log('I am decorator!')
      await oldFunc.apply(target)
        };
    return decriptor
    };
}

new UserService().get()

这是输出: // 为什么??我用了 .apply !//I am decorator!undefined1 `

我不明白为什么它不输出this.users ??我使用应用并通过目标,一切都如指南中所示,但最终它给出了 ungerfined......拥有修饰方法的对象必须传递给目标

TypeScript 方法 装饰器

评论


答:

0赞 Titian Cernicova-Dragomir 1/11/2023 #1

target装饰器内部将是类本身,而不是实例。您需要将替换函数定义为正则表达式而不是箭头函数,并使用该函数的调用:functionthis

interface IUserService {
    users: number;
    get(): void;
}

class UserService implements IUserService {
    users: number = 100;

    @methodDecorator()
    get() {
        console.log(this.users) // output underfined
        console.log(1); // all id okey, output is 1
    }
}


function methodDecorator(throwError?: boolean) {
    return (target: Object, propertyKey: string | symbol, decriptor: TypedPropertyDescriptor<(...args: any[]) => any>) => {
        const oldFunc = decriptor.value as () => any;
        
        decriptor.value = async function () {  // Not an arrow function 
            console.log('I am decorator!')
            await oldFunc.apply(this) // use the this
        };
        return decriptor
    };
}

new UserService().get()

Playground 链接