如何判断TypeScript类属性是否为readonly/private以控制组件可编辑性

首先得明确一个核心点：TypeScript的readonly修饰符只是编译时的约束，编译成JavaScript后这个标记会被完全移除，所以直接在运行时通过对象或原型没法判断某个属性原本是不是readonly的。不过我们有几个简便的方案来实现你的需求：

方案一：手动维护只读属性集合（最简单） #

如果你的类属性不多、变动不频繁，直接创建一个集合来记录哪些属性是readonly，这是最直接且零额外配置的方式：

1. 在组件或工具文件里定义只读属性集合：

// 记录ItemType类的只读属性
const ITEM_TYPE_READONLY_PROPS = new Set(['itemtype_id']);

2. 模板里直接用这个集合判断：

<!-- 只读属性：isEditable设为false -->
<app-editable-field 
  [isEditable]="!ITEM_TYPE_READONLY_PROPS.has('itemtype_id')" 
  label="Item Type ID" 
  [required]="true" 
  type="text"
></app-editable-field>

<!-- 可编辑属性：isEditable设为true -->
<app-editable-field 
  [isEditable]="!ITEM_TYPE_READONLY_PROPS.has('name')" 
  label="Name" 
  [required]="true" 
  type="text"
></app-editable-field>

这个方案的优点是易理解、成本低，适合小型项目或属性稳定的场景。

方案二：使用装饰器+反射元数据（更灵活） #

如果你的项目规模较大，类属性可能频繁变动，或者需要统一管理属性的可编辑规则，可以用TypeScript的装饰器和反射元数据实现自动化判断：

步骤1：配置TypeScript编译选项 #

在tsconfig.json里开启装饰器和元数据支持：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

步骤2：创建自定义装饰器和工具函数 #

import 'reflect-metadata';

// 定义唯一的元数据标识键
const READONLY_METADATA_KEY = Symbol('readonly');

// 自定义@Readonly装饰器，标记只读属性
export function Readonly() {
  return (target: any, propertyKey: string) => {
    Reflect.defineMetadata(READONLY_METADATA_KEY, true, target, propertyKey);
  };
}

// 工具函数：判断类属性是否为只读
export function isPropertyReadonly(target: any, propertyKey: string): boolean {
  return Reflect.getMetadata(READONLY_METADATA_KEY, target, propertyKey) ?? false;
}

步骤3：给类属性添加装饰器 #

修改你的ItemType类，给readonly属性加上装饰器：

export class ItemType{ 
  @Readonly()
  readonly itemtype_id: number; 
  public name :string; 

  constructor(itemtype_id: number, name: string) { 
    this.itemtype_id = itemtype_id; 
    this.name = name; 
  } 
}

步骤4：在组件里使用工具函数判断 #

在组件类里添加一个方法，用来判断属性是否只读：

import { isPropertyReadonly } from './path-to-your-utils';

export class YourComponent {
  // 示例实例
  itemType = new ItemType(1, 'Test Type');

  // 判断属性是否只读的方法
  isPropReadonly(propName: string) {
    return isPropertyReadonly(ItemType.prototype, propName);
  }
}

然后在模板里调用这个方法：

<app-editable-field 
  [isEditable]="!isPropReadonly('itemtype_id')" 
  label="Item Type ID" 
  [required]="true" 
  type="text"
></app-editable-field>

<app-editable-field 
  [isEditable]="!isPropReadonly('name')" 
  label="Name" 
  [required]="true" 
  type="text"
></app-editable-field>

关于private属性的判断 #

如果是TypeScript的private修饰符（非ES6私有字段#），编译后同样会被移除，无法直接在运行时判断。如果是ES6的私有字段（比如#itemtype_id），可以通过Reflect.ownKeys(target)来检测，但需要在tsconfig.json里设置target: ES2022或更高版本。

内容的提问来源于stack exchange，提问作者Daanv z