Typescript 类装饰器之 属性装饰器

2023-12-29 21:39:56
type ClassFieldDecorator = (
  value: undefined,
  context: {
    kind: 'field';
    name: string | symbol;
    static: boolean;
    private: boolean;
    access: { get: () => unknown, set: (value: unknown) => void };
    addInitializer(initializer: () => void): void;
  }
) => (initialValue: unknown) => unknown | void;

特点:

/**

* 属性装饰器要么不返回值,要么返回一个函数,

* 该函数会自动执行,用来对所装饰属性进行初始化。

* 该函数的参数是所装饰属性的初始值,

* 该函数的返回值是该属性的最终值

*/

class FieldDecorator {
  @setField()
  name: string = "88";
}

function setField() {
  return function (value: undefined, context: ClassFieldDecoratorContext) {
    return function (initialLetter: string) {
      console.log(initialLetter, "initialLetter"); //88 initialLetter
      return "7777";
    };
  };
}
let fieldIns = new FieldDecorator();
console.log(fieldIns.name, "fieldIns.name"); // 7777 fieldIns.name

对赋值进行重写:

class FieldDecorator {
  @countNum
  num: number = 333;
}
function countNum(value: undefined, context: ClassFieldDecoratorContext) {
  return (initValue: number) => initValue * 2;
}

console.log(fieldIns.num); //666

属性装饰器中的 access:{ get: () => unknown, set: (value: unknown) => void };

let acc: any;
function countNum(value: undefined, context: ClassFieldDecoratorContext) {
  acc = context.access;
  return (initValue: number) => initValue * 2;
}
let fieldIns = new FieldDecorator();
console.log(acc.get(fieldIns));//666

acc.set(fieldIns,999)//999

tips: undefined 和 null 可以赋值为任何类型,以下可以运行。

type ClassFieldDecorator = () => () => string; /** function */
let c: ClassFieldDecorator = () => null || undefined;

TypeScript 的类型系统 - TypeScript 教程 - 网道

undefinednull既是值,又是类型。

作为值,它们有一个特殊的地方:任何其他类型的变量都可以赋值为undefinednull

这并不是因为undefinednull包含在number类型里面,而是故意这样设计,

任何类型的变量都可以赋值为undefinednull,以便跟 JavaScript 的行为保持一致。

JavaScript 的行为是,变量如果等于undefined就表示还没有赋值,

如果等于null就表示值为空。所以,TypeScript 就允许了任何类型的变量都可以赋值为这两个值。

为了避免这种情况,及早发现错误,TypeScript 提供了一个编译选项strictNullChecks。只要打开这个选项,undefinednull就不能赋值给其他类型的变量(除了any类型和unknown类型)。

解决方式:

 "strict": true, or  "strictNullChecks": true,

文章来源:https://blog.csdn.net/gu2022_3_5_21_23/article/details/135296851
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。