在TypeScript和/或JSDoc中,如何指示记录类型中的某些属性名称是同一类型中同级属性的别名?

如何解决在TypeScript和/或JSDoc中,如何指示记录类型中的某些属性名称是同一类型中同级属性的别名?

在TS中建模对象属性包类型(又称“记录”)的正确方法是什么,其中某些属性名是其他属性的替代名(又称“别名”)?特别是,我们希望使VSCode知道别名,以便它仅建议(在IntelliSense自动完成列表中)“主要”属性名称,而不是别名,但是我们也不想让TS编译器在用户手动键入时失败别名。

这里有更多背景知识:我们正在为JS库开发一个.d.ts,其中包括接受诸如{hour: 12,minute: 30,second: 0}之类的时间常量的函数。该库还接受这些文字属性的多种变体,例如{hours: 12,minutes: 30,seconds: 0}。使用复数变体不是最佳实践(可能仅在允许的情况下简要记录下来)。但是使用这些复数字符串也不会崩溃。

在两个变体中指定相同单位的情况下,将会崩溃: {hour: 12,hours: 12}

我们应该如何在TS中为这种类型建模?

我们的目标:

  • 从IDE自动完成中隐藏“错误的”变体。我以为我假设JSDoc ignore标签可用于此目的,但在TS文档的supported tags list中未列出,并且在VSCode中似乎没有任何作用。
  • 允许“错误的”变体而不会出现TS编译器错误。
  • 如果同一对象文字中包含相同属性的单数和复数变体,则会产生TS编译器错误。
  • 理想地,如果存在一个较小的单元而没有相应的较大单元,则理想情况下也会产生编译器错误。例如,{hour: 10,second: 30}应该产生错误。就是说,由于并集类型的工作原理,我不确定TS中是否可以做到这一点。 理想情况下,即使不存在属性的别名,单数和复数变体的混合也应产生编译器错误。 {hours: 10,minute: 5}。如果TS未标出此错误,也可以,因为与上述“同一单元的2个变体”情况相比,这是一个罕见的错误。
  • 理想情况下(这是可选的,因为我怀疑它不可能),复数形式将显示信息级别的IDE警告(VSCode中的淡蓝色波浪线),以鼓励用户选择正确的形式而不是错误的,但是没有破坏编译。

在TypeScript和/或JSDoc中为这些文字建模的推荐方法是什么,以实现这种期望的行为,或者至少实现其中的一部分?

这是包括两个变体在内的普通类型。该声明不具有上述任何期望的行为。

type Time = {
  hour?: number;
  minute?: number;
  second?: number;
  hours?: number;
  minutes?: number;
  seconds?: number;
};

JSDoc的@alias标签似乎最接近我们的意图,但是它似乎在VSCode中没有做任何事情,并且没有免除自动完成的复数形式。我也不确定@alias是否打算处理别名指向同级成员的情况。上面链接的JSDoc手册中的所有示例均指的是用一个名称定义成员但在运行时以另一个名称使用成员的情况,例如与类名前缀一起使用的静态类函数。我没有看到使用@alias来镜像另一个现有同级属性的示例。

我们可以使用JSDoc @deprecated,但这意味着该值过去可以,但现在还不行,这不是真的。但是它确实提供了一条消息,提醒用户使用其他变体。这似乎很有用。

JSDoc的@ignore标记似乎也可能有所帮助,但是它似乎在VSCode中没有任何作用,并且也没有免除自动完成的复数形式。

解决方法

  • 从IDE自动完成中隐藏“错误的”变体。
  • 允许“错误的”变体而不会出现TS编译器错误。

为此,我能想到的最接近的是new support for /** @deprecated */ in typescript 4.0.。这不会使它们无法自动完成,但是会在一行中标记它们以阻止其使用。

认为可以根据类型系统从自动完成中隐藏也是有效属性的任何内容。您最好得到的是标记为不鼓励使用。

是的,这不是@deprecated的完美用法,但是如果您想要IDE级别的提示,那将是最好的。

type Time = {
  hour?: number;
  minute?: number;
  second?: number;
  
  /** @deprecated */
  hours?: number;

  /** @deprecated */
  minutes?: number;

  /** @deprecated */
  seconds?: number;
};

enter image description here

enter image description here


对于其他情况,听起来好像不需要在这里使用单个界面。相反,您希望结合可能的组合。我认为解决此问题的唯一合理方法是为每个允许的组合创建一个类型。

但是您也想禁止某些组合中的某些属性,可以使用{ foo?: undefined }之类的方法来实现。

所以您可以将类似的东西放在一起:

// Singular Components
type Hour = { hour: number }
type Minute = { minute: number }
type Second = { second: number }

type NoHour = { hour?: undefined }
type NoMinute = { minute?: undefined }
type NoSecond = { second?: undefined }
type NoSingular = NoHour & NoMinute & NoSecond

// Plural Components
type Hours = { hours: number }
type Minutes = { minutes: number }
type Seconds = { seconds: number }

type NoHours = { hours?: undefined }
type NoMinutes = { minutes?: undefined }
type NoSeconds = { seconds?: undefined }
type NoPlural = NoHours & NoMinutes & NoSeconds

// Singular time type
type SingularTime = NoPlural & (
  | (Hour & NoMinute & NoSecond)
  | (Hour & Minute & NoSecond)
  | (Hour & Minute & Second)
)

// Plural time type
type PluralTime = NoSingular & (
  | (Hours & NoMinutes & NoSeconds)
  | (Hours & Minutes & NoSeconds)
  | (Hours & Minutes & Seconds)
)

// Final time type
type Time = SingularTime | PluralTime

(为简便起见,我省略了/** @deprecated */,但您必须在出现复数属性的所有时间中都添加它)

可以像这样使用:

// Good
const singular: Time = { hour: 1,minute: 2,second: 3 }
const plural: Time = { hours: 1,minutes: 2,seconds: 3 }

// Errors:
const samePropMix: Time = { hour: 1,hours: 2,minute: 3,second: 4 }
const diffPropMix: Time = { hour: 1,second: 3 }
const missingMinutes: Time = { hour: 1,second: 3 }

Playground

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 <select id="xxx"> SELECT di.id, di.name, di.work_type, di.updated... <where> <if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 <property name="dynamic.classpath" value="tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams['font.sans-serif'] = ['SimHei'] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -> systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping("/hires") public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate<String
使用vite构建项目报错 C:\Users\ychen\work>npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-