使用属性装饰器对属性类型进行严格类型检查

2023-12-09

有没有办法验证 Typescript 中修饰的属性的类型?我想要一个只适用于boolean类属性,但不是例如string(下面的例子)。这可能吗?

(注意:我不想通过反射元数据进行运行时验证,只是使用 Typescript 进行编译类型警告。)

function booleanProperty<T extends HTMLElement>(target: T, prop: string) {
  // `target` will be the class' prototype
  Reflect.defineProperty(target, prop, {
    get(this: T): boolean {
      return this.hasAttribute(prop);
    },
    set(this: T, value: boolean): void {
      if (value) {
        this.setAttribute(prop, '');
      } else {
        this.removeAttribute(prop);
      }
    }
  });
}

class MyElement extends HTMLElement {
  @booleanProperty
  foo: boolean;

  @booleanProperty
  bar: string; // TS compile error
}
customElements.define('my-element', MyElement);

那这个呢?

function booleanProperty<
  T extends HTMLElement & Record<K, boolean>,
  K extends string>(target: T, prop: K) {
    // ... impl here
}

传入的target需要是一个HTMLElement其中有一个boolean财产是关键K, where K是传入的类型prop。让我们看看它是否有效:

class MyElement extends HTMLElement {
  @booleanProperty // okay
  foo: boolean;

  @booleanProperty // error
  bar: string;
}

在我看来很好。那对你有用吗?

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用属性装饰器对属性类型进行严格类型检查 的相关文章

  • TypeScript 代码上的 JSlint - 它还能教我编写更好的代码吗?

    在 TypeScript 生成的代码上使用 JSlint 还能教我编写更好的代码吗 如果是 您能提供一两个例子吗 Thanks 没有 由于生成的 javascript 在不良打字稿 良好打字稿之间是一致的 例如缺少分号 对于打字稿 有一个
  • D3、TS 和 Angular 2

    我正在尝试将 D3 v4 与 Angular 2 Typescript 一起使用 我目前正在研究 D3 v4 我能够遵循 stackoverflow 中类似问题的一些答案 但没有成功 我已经导入了大部分 D3 库及其类型 我使用的是 TS
  • 如何使自定义 Web 组件可聚焦?

    我正在写一个自定义网络组件 https github com denilsonsa html5 knob这意味着是互动的 我如何告诉浏览器这个自定义组件应该获得焦点 我希望我的自定义元素 可以聚焦 通过选项卡导航 集中注意力时可以接收按键信
  • 从回调中访问状态

    我在从回调访问组件状态时遇到问题 国家的价值num更改正确 但此类更改对于加载时定义的回调函数不可见 import React useState from react class MyObject callback gt void cons
  • 在 Typescript 中隐式创建一个元组

    有没有一种方法无需类型提示即可在 Typescript 中创建元组 如果我只是这样做 const tuple 1 2 元组的类型number 我能得到的最接近的单线是 const tuple number number 1 2 我错过了什么
  • 如何声明具有可变数量属性的 TypeScript 接口?

    这是一个简单的问题 令我惊讶的是我在任何地方都找不到明确的答案 我正在制作一个 API 需要定义一个可以具有多个 字符串 属性的接口 但没有设置属性数量 也没有设置它们的名称 但它们都必须具有字符串值 因此以下所有对象都将与该类型匹配 sl
  • Angular 2 和 TypeScript 的承诺

    我正在尝试使用routerCanDeactivate我的应用程序中的组件的函数 简单的使用方法如下 routerCanDeactivate return confirm Are you sure you want to leave this
  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • React.memo 与反应中的打字稿

    我在 tsx 文件 React typescript 中使用 React memo 现在我已经将 Props 的接口声明为 interface Props type string 我的组件看起来像 const Component React
  • Typescript 从 CDN 导入 .js

    在我的 ts 文件中 我想引用 js 由第三方托管 并使用 js 文件中的一些函数 到目前为止 我发现如何做到这一点的唯一方法是修改 html 页面并插入 ts 本身的标签 除了修改 html 页面之外 还有其他更优雅的方法吗 听起来您正在
  • Next.js TypeScript 错误:您没有安装所需的软件包[重复]

    这个问题在这里已经有答案了 我目前正在他们方便的 typescript starter 的帮助下构建一个基本的 nextjs 网站 使用开发时一切都运行顺利yarn dev直到大约 20 分钟前 每当我尝试运行时 我都会随机收到一条错误消息
  • Typescript 和 React:在组件之间传递 props 与默认 props

    我对 Typescript 和使用 Typescript 创建 React 应用程序相当陌生 我在将道具从一个组件传递到另一个组件时遇到了一些麻烦 我在下面提供了一个示例 我的问题是围绕组件的默认道具 当我在父组件中调用子组件时 出现错误
  • Typescript 生成带有“#private;”字段的声明 d.ts 文件

    我有一个用 Typescript 编写的库 它分布在 2 个文件中 一个已编译的 ECMAScript 2015 兼容 Javascript 文件index js和一个 Typescript 声明文件index d ts 我的目标是让 Ja
  • 表单提交后 Angular2 更新视图

    我正在使用 Angular2 创建一个简单的 CRUD 应用程序 该应用程序由一个列出当前记录的表格和一个用于提交新记录的表格组成 提交表单后更新表格以反映新记录的正确方法是什么 这是我到目前为止所拥有的 export class Pers
  • 纠正装饰器模式的一个大缺点

    不久前 我在重构一些游戏战斗代码时决定尝试装饰器模式 战斗者可以拥有各种被动能力 也可能是不同类型的生物 我认为装饰器可以让我在运行时以各种组合添加行为 因此我不需要数百个子类 我几乎已经完成了 15 个左右的被动能力装饰器 在测试中我发现
  • TypeScript 中的类型安全谓词函数

    我的目标是编写谓词函数 isNull and isUndefined例如 在 TypeScript 中满足以下条件 可以独立使用 array filter isNull 可以逻辑组合 array filter and not isNull
  • Angular 2访问组件内的ng-内容

    我怎样才能访问 content 来自组件类本身的组件 我想做这样的事情
  • Angular 2 中的变更检测

    我正在将角度 1 和角度 2 集成在一起 因此我有角度 1 控制器和服务以及角度 2 组件 这些对于数据检索和存储来说工作得很好 反之亦然 下面是我的 html 页面 h3 Angular 1 service h3 div div
  • 打字稿中的递归未定义

    我在组件内使用画布对象来生成图表 为了使其动画化 我递归地调用该方法 我不断收到错误消息 指出该方法未定义 不确定我需要如何构建它 任何帮助表示赞赏 Animate function protected animate draw to Cl
  • TypeScript:增强内置类型

    如何增强其中一种 内置 类型 例如数组 在 JS 中 我会做类似的事情 Array prototype shuffle function TypeScript 中的等价物是什么 TypeScript 中的类型是 开放式 的 所以你可以这样写

随机推荐