TypeScript中 typeof ArrayInstance[number] 剖析

最新推荐文章于 2024-07-24 21:49:41 发布

泡泡机不冒泡了

最新推荐文章于 2024-07-24 21:49:41 发布

阅读量556

点赞数

分类专栏： # TypeScript 文章标签： typescript javascript es6

本文链接：https://blog.youkuaiyun.com/D_reamW_eaver/article/details/113409954

版权

本文探讨了在TypeScript中如何使用typeof ArrayInstance[number]来获取数组实例的元素类型，解决类型约束和同步问题。通过分析，揭示了这是一种从数组值获取对应类型的方法，避免了冗余和潜在风险。内容包括typeof操作符、keyof关键字的解析规则，并通过示例加深理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假设这样一个场景，目前业务上仅对接了三方支付 'Alipay', 'Wxpay', 'PayPal', 实际业务 getPaymentMode 会根据不同支付方式进行不同的付款/结算流程。

const PAYMENT_MODE = ['Alipay', 'Wxpay', 'PayPal'];

function getPaymentMode(paymode: string) {
   
  return PAYMENT_MODE.find(thirdPay => thirdPay === paymode)
}

 getPaymentMode('Alipay')      //  ✔️
 getPaymentMode('Wxpay')      // ✔️
 getPaymentMode('PayPal')    // ✔️
 getPaymentMode('unknow') // ✔️ 正常编译，但可能引发运行时逻辑错误

由于声明仅约束了入参 string 类型，无法避免由于手误或上层业务处理传参不当引起的运行时逻辑错误。

可以通过声明字面量联合类型来解决上述问题。

const PAYMENT_MODE = ['Alipay', 'Wxpay', 'PayPal'];
type mode = 'Alipay' | 'Wxpay' | 'PayPal';

function getPaymentMode(paymode: mode) {
   
  return PAYMENT_MODE.find(thirdPay => thirdPay === paymode)
}

 getPaymentMode('Alipay')      // ✔️
 getPaymentMode('Wxpay')      // ✔️
 getPaymentMode

最低0.47元/天解锁文章