TypeScript 如何做类型转换
在前端开发里，很多新手都踩过“类型坑”：比如把字符串'5'和数字3加起来，结果会变成'53'；或者以为数组里存的全是数字，实际却混进了字符串，导致计算时出bug。TypeScript的类型系统，核心就是帮我们提前发现这类问题，而类型转换就是它处理不同类型值的关键工具。
先搞懂：TypeScript里的类型转换分两种
咱们可以把类型转换想象成“换衣服”——一种是自动换（隐式转换），TypeScript偷偷帮你换；另一种是主动换（显式转换），你明确告诉它“我要把这个值换成别的类型”，两种场景完全不同。
举个生活例子：隐式转换就像外卖小哥帮你把外卖从袋子里拿出来递到你手里，不用你额外动手；显式转换就像你主动把外卖从袋子倒进自己的餐盘，是明确的动作。
隐式转换：别让“偷偷换”坑了代码
隐式转换是TypeScript自动触发的，大多发生在运算或判断时，核心规则是尽量把值转成能满足当前操作的类型，但很多时候会出意外。
比如你写代码想计算“购物车总价”，把商品价格都存在字符串类型里：
`typescript
// 错误示例：价格用字符串存了
const price1: string = '10';
const price2: string = '20';
// 你以为会得到30，实际是'1020'（字符串拼接）
const total = price1 + price2;
`
这里TypeScript不是故意坑你，而是看到两个+左右都是字符串，就自动触发了隐式转换，把数字10、20转成了字符串。如果遇到-、*这类数学运算符，它又会自动转成数字：
`typescript
// 结果是10，自动把'20'转成了数字
const diff = price2 - price1;
`
新手很容易踩的坑，就是没注意TypeScript的隐式转换规则，写代码时尽量给变量标对类型，比如价格就明确用number，别用字符串，就能避开大部分这类问题。
显式转换：主动控制，避免“意外”
显式转换是咱们手动指定类型，最常用的有3种方式，都是前端开发里的高频操作，用生活化例子说就是“你明确把外卖倒进餐盘，不会弄错”。
第一种：用类型()函数直接转，比如想把字符串转成数字，或者把数字转成字符串：
`typescript
// 把字符串'5'转成数字5，方便计算
const strNum: string = '5';
const num: number = Number(strNum); // 结果是5，数字类型
// 把数字8转成字符串，方便拼接
const count: number = 8;
const strCount: string = String(count); // 结果是'8'，字符串类型
`
第二种：用as关键字，适合咱们明确知道某个值的实际类型，TypeScript识别不出来的情况。比如你从接口拿了一个可能是任意类型的值，实际它确实是数字，就可以用as告诉TypeScript：
`typescript
// 假设接口返回的data类型是any，实际是数字100
const data: any = '100';
// 主动告诉TypeScript，这个data实际是数字，用来计算
const realNum = data as number;
console.log(realNum + 20); // 输出120，不会报错
`
第三种：用!!转布尔值，这是前端常用的小技巧，就像判断“杯子有没有水”：有就是true，空就是false。只要值是“非空、非0、非空字符串”，转成布尔值就是true，反之是false：
`typescript
// 判断用户有没有输入用户名，用!!转成布尔值
const username: string = ''; // 用户没输入
const hasInput = !!username; // 结果是false，说明没输入
`
什么时候该用哪种转换？
简单总结：如果是运算、判断这类场景，优先用显式转换，别依赖隐式转换——就像你做饭时，别让别人帮你换食材，自己确认好类型再操作，能少出80%的bug。只有在明确知道TypeScript会自动转对，比如用-做减法时，偶尔用隐式转换也可以，但新手尽量先从显式转换练手，慢慢就能摸透规则了。