TypeScript中类型转换函数报ts(2345)参数类型错误如何解决

问题场景 #

我编写了一个可检测值是否能转为数字的函数，若满足转换条件则将值转为Float类型，该函数在处理CSV转JSON生成的全字符串化数据时实用性很强，初始实现代码如下：

const possibleNum: string | number = '3'

export const changeType = (entry: string | number) => {
  return !isNaN(parseFloat(entry)) ? parseFloat(entry) : entry
}

const res = changeType(possibleNum)

console.log(typeof res)
// number

上述逻辑在原生JavaScript中可正常运行，但在TypeScript环境中无法通过类型校验，抛出的报错信息如下：

Argument of type 'string | number' is not assignable to parameter of type 'string'.
  Type 'number' is not assignable to type 'string'.ts(2345)

报错根因 #

parseFloat的原生类型签名只接受string类型入参，当传入string | number联合类型参数时，TypeScript会检测到联合类型中的number类型不符合入参要求，直接抛出类型错误。

修复方案 #

最稳妥的修复方式是在调用parseFloat前先将入参统一转为字符串，既满足TS类型校验要求，也不会改变原有运行逻辑，适配CSV转JSON的混合类型数据处理场景：

const possibleNum: string | number = '3'

export const changeType = (entry: string | number): string | number => {
  const parsedVal = parseFloat(String(entry))
  return !isNaN(parsedVal) ? parsedVal : entry
}

const res = changeType(possibleNum)

console.log(typeof res)
// 输出：number

方案说明 #

• 入参为数字时，String(数字)会生成对应的数字字符串，parseFloat解析后可正确返回原数值，不会出现精度或逻辑错误
• 入参为可转数字的字符串时，解析逻辑和原写法完全一致
• 入参为不可转数字的字符串时，会直接返回原入参，符合函数设计预期
• 不推荐使用entry as string这类类型断言绕开校验，该方式仅在编译阶段跳过类型检查，无法覆盖运行时的边界场景

内容的提问来源于stack exchange，提问作者Álvaro