TypeScript中 typeof ArrayInstance[number] 剖析

假设这样一个场景，目前业务上仅对接了三方支付 '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