[!Typescript] Tips: Access deeper parts of objects and arrays

Accessing object values and array members is MUCH more powerful in the type world than it is in the runtime world.

Passing a union... RETURNS a union!

interface ColorVariants {
  primary: "blue";
  secondary: "red";
  tertiary: "green";
}

type PrimaryColor = ColorVariants["primary"]; // "blue"
type NonPrimaryColor = ColorVariants["secondary" | "tertiary"]; // "red" | "green"
type EveryColor = ColorVariants[keyof ColorVariants]; // "blue" | "red" | "green"

type Letters = ["a", "b", "c"];
type AOrB = Letters[0 | 1]; // "a" | "b"
type Letter = Letters[number]; // "a" | "b" | "c"

interface UserRoleConig {
  user: ["view", "create", "update"];
  superAdmin: ["view", "create", "update", "delete"];
}

type Role = UserRoleConig[keyof UserRoleConig][number] // "view" | "create" | "update" | "delete"

 

posted @   Zhentiw  阅读(14)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2020-10-18 [Kotlin Unit test] Spek & Mock
2019-10-18 [Flutter & Dart] Await a Future void function
2017-10-18 [AngularFire] Resolve snapshotChanges doesn't emit value when data is empty
2016-10-18 [CSS] Use CSS Counters to Create Pure CSS Dynamic Lists
2016-10-18 [CSS] Target empty elements using the :empty pseudo-class
2016-10-18 [Angular2 Animation] Basic animation
2016-10-18 [Angular2 Router] Auxiliary Routes bit by bit
点击右上角即可分享
微信分享提示