异常教程

TypeScript Number（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在编程的世界里，数字类型（Number）如同构建程序的“建筑材料”，无论是计算、逻辑判断还是数据处理，都离不开它的身影。而 TypeScript 通过静态类型检查，为开发者提供了一层安全保障。本文将围绕 TypeScript Number 展开，从基础概念到高级用法，结合实际案例，帮助读者理解如何高效、安全地使用数字类型，同时避免常见陷阱。

一、TypeScript Number 的基础概念

1.1 什么是 Number 类型？

在 TypeScript 中，Number 类型用于表示数值，包括整数、浮点数和科学计数法表示的数值。例如：

let age: number = 25;  
let temperature: number = 25.5;  
let distance: number = 1.6e3; // 等价于 1600

与 JavaScript 不同，TypeScript 通过类型注解强制要求变量在声明时明确类型。例如，若尝试将字符串赋值给 number 类型的变量，编译器会直接报错：

let count: number = "100"; // 报错：Type 'string' is not assignable to type 'number'.

1.2 Number 类型的范围与精度

JavaScript 的 Number 类型基于 IEEE 754 标准，所有数字都以 64 位浮点数存储。这意味着：

  • 最大安全整数：Number.MAX_SAFE_INTEGER（2^53 - 1），超过此值的整数可能丢失精度。
  • 最小安全整数：Number.MIN_SAFE_INTEGER（-2^53 + 1）。
  • 浮点数精度问题：例如，0.1 + 0.2 的结果可能不是 0.3，而是 0.30000000000000004。

比喻：想象一个只能装 50 升水的容器，超过这个容量，水就会溢出并导致混乱。类似地，超过安全范围的整数或浮点数运算可能导致不可预测的结果。

二、TypeScript 中的类型转换与操作

2.1 显式类型转换

当需要将其他类型转换为 number 时，TypeScript 提供了三种方法：

// 字符串转数字  
const strToNum1 = Number("123"); // 123  
const strToNum2 = parseInt("456px"); // 456（忽略非数字字符）  

// 布尔值转数字  
const boolToNum = Number(true); // 1  
const boolToNumFalse = Number(false); // 0  

// 其他类型转换（如 null/undefined）  
const nullToNum = Number(null); // 0  
const undefinedToNum = Number(undefined); // NaN

2.2 隐式类型转换的陷阱

TypeScript 的类型系统虽然严格，但在某些情况下仍会发生隐式类型转换。例如：

function calculate(a: number, b: string): number {  
  return a + b; // 编译器允许，但实际结果为字符串拼接（如 10 + "5" → "105"）  
}

为了避免此类问题，开发者需明确类型约束或使用类型守卫（Type Guards）。

三、类型守卫与联合类型

3.1 联合类型（Union Types）中的 Number

当变量可能接收 number 或其他类型时，可以使用联合类型：

let value: number | string;  

value = 100; // 合法  
value = "100"; // 合法  
value = true; // 报错：Type 'boolean' is not assignable to type 'number | string'.

3.2 类型守卫的使用场景

通过类型守卫（Type Guards），可以动态判断变量的实际类型：

function processValue(input: number | string): void {  
  if (typeof input === "number") {  
    console.log(`数值类型：${input}`);  
  } else {  
    console.log(`字符串类型：${input}`);  
  }  
}  

processValue(42); // 输出：数值类型：42  
processValue("42"); // 输出：字符串类型：42

比喻：类型守卫就像“身份验证员”，确保代码在安全的前提下处理数据。

四、进阶用法与最佳实践

4.1 使用字面量类型（Literal Types）限制数值范围

通过字面量类型，可以精确限制数字的取值范围：

type Age = 18 | 19 | 20;  
let userAge: Age = 18; // 合法  
userAge = 21; // 报错：Type '21' is not assignable to type '18 | 19 | 20'.

此方法适用于需要严格控制数值的场景，例如年龄验证或枚举值。

4.2 处理浮点数精度问题

对于需要高精度计算的场景（如金融计算），建议使用第三方库（如 decimal.js）或手动调整数值：

// 通过乘法和取整避免精度丢失  
function preciseAdd(a: number, b: number): number {  
  const scale = Math.pow(10, 2); // 保留两位小数  
  return Math.round((a * scale + b * scale) / scale);  
}  

console.log(preciseAdd(0.1, 0.2)); // 输出：0.3

4.3 类型断言与类型推断

当编译器无法推断类型时，可以使用类型断言：

const numString: unknown = "100";  
const num: number = Number(numString as string); // 安全地转换类型

五、常见问题与解决方案

5.1 NaN 的处理

NaN（Not a Number）是 JavaScript 的特殊值，需通过 Number.isNaN() 判断：

function checkValue(input: any): boolean {  
  return Number.isNaN(Number(input)); // 避免使用全局 isNaN()  
}  

console.log(checkValue("abc")); // true  
console.log(checkValue(0)); // false

5.2 类型兼容性问题

TypeScript 的类型系统允许子类型赋值给父类型，但需注意联合类型的兼容性：

type Coordinate = { x: number; y: number };  
type Point3D = Coordinate & { z: number };  

const point2D: Coordinate = { x: 1, y: 2 };  
const point3D: Point3D = point2D as Point3D; // 报错：类型缺少 'z' 属性

结论

通过本文的讲解，读者可以掌握 TypeScript Number 类型的核心概念、转换技巧以及进阶用法。无论是基础的类型注解、联合类型的应用，还是处理浮点数精度问题，TypeScript 都提供了丰富的工具和最佳实践。开发者需始终遵循“类型先行”的原则，结合类型守卫和类型断言，构建更健壮的代码。

后续学习建议：

  • 探索 bigint 类型在处理超大整数时的应用。
  • 学习 TypeScript 的泛型（Generics）与数字类型结合的场景。
  • 实践使用类型守卫解决复杂联合类型的问题。

通过持续实践，开发者将逐步掌握 TypeScript Number 的精髓，让代码在安全与性能之间取得平衡。

最新发布

查看更多文章