当前位置：首页 > news >正文

游戏开发的TypeScript(5)TypeScript的类型转换

news 来源：原创 2025/5/6 11:48:54

TypeScript的类型转换

游戏开发中，事件经常会携带一些数据，而这些数据会做类型上的转化，在这种情况下，类型转换（Type Assertion）能够让你手动把某个值指定为特定类型。这在 TypeScript 无法自动推断出正确类型时非常有用。

类型断言（Type Assertion）

类型断言有两种表达方式：

尖括号语法：<类型>值
as 语法：值 as 类型

下面是具体示例：

let someValue: any = "这是一个字符串";
// 使用尖括号语法进行类型断言
let strLength1: number = (<string>someValue).length;
// 使用 as 语法进行类型断言
let strLength2: number = (someValue as string).length;

非空断言操作符（Non-null Assertion Operator）

非空断言操作符 ! 可以用来断言某个表达式的值不为 null 或 undefined。示例如下：

function printLength(something: string | null | undefined) {// 使用 ! 断言 something 不为 null 或 undefinedconsole.log((something!).length);
}
printLength("hello"); // 输出 5
printLength(null); // 运行时会报错

类型守卫（Type Guards）

类型守卫能够在运行时对某个值的类型进行检查，进而缩小类型范围。常见的类型守卫方式有以下几种：

typeof 类型守卫

function printValue(x: string | number) {if (typeof x === 'string') {console.log(x.toUpperCase()); // 此时 x 的类型被缩小为 string} else {console.log(x.toFixed(2));    // 此时 x 的类型被缩小为 number}
}

instanceof 类型守卫

class Car {drive() { console.log("开车..."); }
}
class Bike {ride() { console.log("骑车..."); }
}
function move(vehicle: Car | Bike) {if (vehicle instanceof Car) {vehicle.drive(); // 此时 vehicle 的类型被缩小为 Car} else {vehicle.ride();  // 此时 vehicle 的类型被缩小为 Bike}
}

自定义类型守卫

function isString(x: any): x is string {return typeof x === 'string';
}
function printIfString(x: any) {if (isString(x)) {console.log(x.toUpperCase()); // 此时 x 的类型被缩小为 string}
}

类型兼容与转换

子类到父类的转换：这种转换是自动完成的。

class Animal {}
class Dog extends Animal {}
let dog: Dog = new Dog();
let animal: Animal = dog; // 自动转换，无需断言

父类到子类的转换：需要进行类型断言。

let animal: Animal = new Dog();
let dog: Dog = animal as Dog; // 需要断言

类型转换的风险

类型断言实际上是把类型检查的责任从编译器转移到了开发者身上。如果使用不当，可能会引发运行时错误。

let x: any = 123;
let y = x as string;
console.log(y.toUpperCase()); // 运行时会报错，因为 x 实际上是 number 类型

总结

类型断言有 <类型>值 和 值 as 类型 这两种语法形式。
非空断言操作符 ! 可以断言某个值不为 null 或 undefined。
类型守卫能够在运行时缩小类型范围。
要谨慎使用类型断言，避免引发运行时错误。

在开发时，有必要才使用类型转换，优先考虑使用类型守卫和泛型等更安全的类型操作方式。

与Javascript类型转换的比较

TypeScript 和 JavaScript 的类型转换在本质上有很大不同，主要体现在类型系统的严格性、转换方式以及转换时机上。

1. 类型系统基础

JavaScript：
是动态类型语言，变量的类型在运行时确定，没有编译阶段的类型检查。类型转换通常是隐式的（自动转换）或通过内置函数（如 String()、Number()）显式进行。
TypeScript：
是静态类型语言，在编译阶段进行类型检查。类型转换主要通过类型断言、类型守卫或类型兼容规则实现，不会改变值的实际类型（仅影响编译器的类型推断）。

2. 转换方式对比

JavaScript 的类型转换

JavaScript 的类型转换分为隐式转换和显式转换：

隐式转换：由操作符或函数自动触发。

const num = 10;
const str = "5";
console.log(num + str); // 隐式转换为字符串："105"
console.log(num - str); // 隐式转换为数字：5

显式转换：通过内置函数手动转换。

const num = Number("42");       // 字符串 → 数字
const str = String(42);         // 数字 → 字符串
const bool = Boolean(0);        // 数字 → 布尔值
const arr = Array.from("hello"); // 字符串 → 数组

TypeScript 的类型转换

TypeScript 的类型转换是静态的，仅在编译阶段生效，不会改变值的实际类型：

类型断言：手动指定类型。

let value: any = "hello";
let length: number = (value as string).length; // 断言为 string 类型

类型守卫：在运行时检查类型。

function printLength(x: string | number) {if (typeof x === "string") {console.log(x.length); // 类型守卫确保 x 是 string} else {console.log(x.toString()); // 类型守卫确保 x 是 number}
}

非空断言：断言值不为 null 或 undefined。

const element = document.getElementById("my-element")!; // 断言元素存在

3. 安全性差异

JavaScript：
类型转换完全依赖开发者的运行时逻辑，错误的转换会导致运行时错误（如 undefined 调用方法）。
```
const value = null;
console.log(value.length); // 运行时错误：Cannot read property 'length' of null
```
TypeScript：
类型断言仅影响编译时的类型检查，若断言错误，运行时仍会出错，但编译器不会报错。
```
let value: any = null;
let length: number = (value as string).length; // 编译通过，但运行时错误
```
因此，TypeScript 的类型转换需要开发者自行确保断言的正确性。

4. 应用场景

JavaScript：
主要用于处理动态数据（如用户输入、API 返回值），或解决类型不匹配的问题。

TypeScript：

处理第三方库或 DOM API 的类型不明确问题。
断言联合类型的具体分支。
与 JavaScript 交互时（如 any 类型转换）。

// 示例：处理 DOM 元素
const element = document.getElementById("my-input") as HTMLInputElement;
console.log(element.value); // 断言为 HTMLInputElement 类型

5. 总结对比表

特性	JavaScript	TypeScript
类型系统	动态类型，运行时确定类型	静态类型，编译时检查类型
转换方式	隐式转换（自动）和显式转换（内置函数）	类型断言、类型守卫、类型兼容规则
转换时机	运行时	编译时（仅影响类型推断）
安全性	无编译时检查，错误转换导致运行时错误	编译时检查，但断言错误仍可能导致运行时错误
常见工具	`String()`、`Number()`、`Boolean()` 等	`as`、`<类型>`、`typeof`、`instanceof`