如何禁止为HTMLDataset属性赋值undefined但允许删除该属性

编译时限制（TypeScript） #

要实现编译时禁止给someProp赋值undefined，同时允许删除该属性，可结合TypeScript的exactOptionalPropertyTypes编译选项和自定义接口：

1. 在tsconfig.json中开启编译选项：

{
  "compilerOptions": {
    "exactOptionalPropertyTypes": true,
    // 其他配置项...
  }
}

2. 自定义元素的dataset类型：

interface MyCustomDataset extends DOMStringMap {
  // 标记someProp为可选，但仅允许指定的合法值，不允许undefined
  someProp?: "LegitVal";
}

class MyCustomElement extends HTMLElement {
  get dataset(): MyCustomDataset {
    return super.dataset as MyCustomDataset;
  }
}

此时编译时执行MyCustomElement.dataset.someProp = undefined会直接报错，而delete MyCustomElement.dataset.someProp属于合法操作。

运行时限制（JavaScript/TypeScript） #

如果需要在运行时也拦截赋值undefined的操作（避免默认转成字符串"undefined"），可以用Proxy包装原始dataset：

class MyCustomElement extends HTMLElement {
  get dataset() {
    const originalDataset = super.dataset;
    return new Proxy(originalDataset, {
      set(target, prop, value) {
        // 针对特定属性做赋值检查
        if (prop === 'someProp' && value === undefined) {
          throw new Error('禁止给dataset.someProp赋值undefined，请使用delete删除该属性');
        }
        // 其他属性保持默认行为
        target[prop] = value;
        return true;
      }
    });
  }
}

这样当代码尝试给someProp赋值undefined时会直接抛出错误，而delete操作不受影响，依然可以正常移除属性。

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