TypeScript如何实现string | null到可空number类型的简洁转换

你现有代码的问题出在+!的错误用法：!是逻辑非运算符，会先把输入值转为布尔值再取反，+再把布尔值转为数字，因此非空字符串（真值）取反为false转数字得0，null（假值）取反为true转数字得1，完全不符合转数字的需求。

正确实现方案 #

方案1：封装通用转换函数（推荐） #

先封装一个可复用的类型转换函数，类型安全且逻辑清晰：

class Service {
  getNullValue() : string | null {
    return null;
  }
  getStringValue() : string | null {
    return "20";
  }
} 

class Book {
  code?: number;
}

// 通用转换函数：输入string|null，返回有效数字或undefined
const toOptionalNumber = (input: string | null): number | undefined => {
  if (input === null) return undefined
  const num = Number(input)
  // 若需要解析带非数字后缀的字符串（如"20px"），可将上一行替换为 const num = parseInt(input, 10) 或 parseFloat(input)
  return Number.isNaN(num) ? undefined : num
}

let service: Service = new Service();

let book1: Book = { code: toOptionalNumber(service.getStringValue()) };
console.log(book1); // 输出 { code: 20 }

let book2: Book = { code: toOptionalNumber(service.getNullValue()) };
console.log(book2); // 输出 {} 即code为undefined

方案2：单行内联写法（不需要复用的场景） #

如果不想单独封装函数，可以直接内联写逻辑：

let book1: Book = { code: (n => Number.isNaN(n) ? undefined : n)(Number(service.getStringValue())) };
let book2: Book = { code: (n => Number.isNaN(n) ? undefined : n)(Number(service.getNullValue())) };

内容的提问来源于stack exchange，提问作者Miguel Moura