Next.js使用装饰器decorator 解决[作为表达式调用时,无法解析类修饰器的签名。]-Toy模板网

这篇具有很好参考价值的文章主要介绍了Next.js使用装饰器decorator 解决[作为表达式调用时,无法解析类修饰器的签名。]。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Next.js 会自动检测 jsconfig.json 或 tsconfig.json 中的experimentalDecorators。
tsconfig.json

{
  "compilerOptions": {
   //...
    "experimentalDecorators": true
  }
}

然后重启服务否则装饰器无法识别
不声明的话vscode 执行 ts检测也会报错作为表达式调用时,无法解析类修饰器的签名。

支持的四种装饰器

declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;
declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;
declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
declare type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number) => void;

类装饰器

function cameraDecorator<T extends { new (...args: any[]): {} }>(
    constructor: T
) {
    return class extends constructor {
        camera = ThreeHelper.instance.camera;
        cameraWrapper = ThreeHelper.instance.camera.parent;
    };
}

@cameraDecorator<typeof Asteroids>
class Asteroids {
    private camera!: THREE.PerspectiveCamera;
    private cameraWrapper!: THREE.Object3D;
}

也可以这样写下方写法可以将属性写在当前class上

export function UnrealBloomEffect<T extends { new (...args: any[]): {} }>(
    constructor: T
) {
    return class extends constructor {
        name: string;
        constructor(...rest: any[]) {
            super(...rest);
            this.name = "deo";
        }
        render() {
            throw new Error("先执行initEffect");
        }
	}
}