TypeScript 高级类型：类型断言与类型转换的区别

类型断言：概念与用途

在 TypeScript 前端开发中，类型断言是一种开发者手动指定一个值的类型的方式。它允许我们告诉编译器，某个值应该被视为特定的类型，尽管编译器可能无法从上下文推断出该类型。

类型断言主要用于两种场景：一是当你比 TypeScript 编译器更了解某个值的类型时，例如在处理第三方库返回的数据，编译器可能无法准确推断其类型，但你通过阅读文档或实际测试知道它的确切类型；二是在联合类型中，当你确定某个值属于联合类型中的某一个具体类型时。

语法形式

TypeScript 提供了两种语法来进行类型断言。

尖括号语法：

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

在这个例子中，someValue 被声明为 any 类型，通过 <string> 断言，我们告诉编译器 someValue 实际上是一个字符串，这样就可以安全地访问其 length 属性。

as 语法：

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

as 语法和尖括号语法功能相同，只是写法不同。在 TypeScript 中，当在 JSX 环境下，必须使用 as 语法进行类型断言，因为尖括号语法会和 JSX 语法产生冲突。

类型断言的本质

从本质上讲，类型断言并不会改变值的实际类型，它只是给编译器提供一个提示，让编译器在类型检查阶段按照我们指定的类型进行检查。在运行时，JavaScript 引擎并不会执行任何与类型断言相关的操作，因为 JavaScript 本身是弱类型语言，不进行类型检查。

例如：

class Animal {}
class Dog extends Animal {}

let animal: Animal = new Animal();
// 虽然这里断言为 Dog 类型，但实际上 animal 仍然是 Animal 类型的实例
let dogAsserted: Dog = animal as Dog; 

// 运行时会报错，因为 animal 实际不是 Dog 类型的实例
dogAsserted.bark(); 

在这个例子中，尽管我们通过类型断言将 animal 断言为 Dog 类型，但 animal 在运行时仍然是 Animal 类型的实例，当我们调用 Dog 特有的 bark 方法时就会报错。这表明类型断言只是在编译阶段起作用，帮助我们进行类型检查，而不会改变值的运行时类型。

类型转换：概念与用途

类型转换在 TypeScript 中是指通过特定的方法或操作将一个值从一种类型转换为另一种类型。与类型断言不同，类型转换会实际改变值的表现形式或存储方式，以符合目标类型的要求。

在前端开发中，类型转换常用于处理用户输入、数据格式化以及与不同 API 交互时的数据类型适配。例如，从表单获取的用户输入通常是字符串类型，而我们可能需要将其转换为数字类型进行计算。

基本类型转换

字符串与数字的转换

将字符串转换为数字是常见的操作。TypeScript 提供了 Number() 函数来实现这一转换。

let strNumber: string = "123";
let num: number = Number(strNumber); 
console.log(num + 1); // 输出 124

如果字符串不能被解析为有效的数字，Number() 函数会返回 NaN。

let invalidStr: string = "abc";
let result: number = Number(invalidStr); 
console.log(result); // 输出 NaN

反之，将数字转换为字符串可以使用 toString() 方法。

let numValue: number = 456;
let str: string = numValue.toString(); 
console.log(str.length); // 输出 3

布尔值与其他类型的转换

在 TypeScript 中，布尔值与其他类型的转换也有明确的规则。任何非空字符串、非零数字、非 null、非 undefined 和非 NaN 的值在转换为布尔值时都为 true，反之则为 false。

let truthyStr: string = "hello";
let truthyBool: boolean = Boolean(truthyStr); 
console.log(truthyBool); // 输出 true

let falsyStr: string = "";
let falsyBool: boolean = Boolean(falsyStr); 
console.log(falsyBool); // 输出 false

将布尔值转换为数字时，true 会转换为 1，false 会转换为 0。

let trueValue: boolean = true;
let numFromTrue: number = Number(trueValue); 
console.log(numFromTrue); // 输出 1

let falseValue: boolean = false;
let numFromFalse: number = Number(falseValue); 
console.log(numFromFalse); // 输出 0

复杂类型转换

对象类型转换

在 TypeScript 中，对象类型转换相对复杂一些。当我们需要将一个对象转换为另一个具有不同属性结构的对象时，通常需要手动创建新对象并进行属性映射。

例如，假设我们有一个简单的用户对象：

interface User {
  name: string;
  age: number;
}

interface UserDTO {
  username: string;
  userAge: number;
}

let user: User = { name: "John", age: 30 };

// 将 User 对象转换为 UserDTO 对象
let userDTO: UserDTO = {
  username: user.name,
  userAge: user.age
};

在这个例子中，我们手动创建了一个新的 UserDTO 对象，并将 User 对象的属性映射到 UserDTO 对象的相应属性上。

数组类型转换

数组类型转换也有多种情况。比如将字符串数组转换为数字数组，可以使用 map 方法结合类型转换函数。

let strArray: string[] = ["1", "2", "3"];
let numArray: number[] = strArray.map(str => Number(str)); 
console.log(numArray); // 输出 [1, 2, 3]

如果数组元素类型需要更复杂的转换，例如从一个包含对象的数组转换为另一种包含不同属性对象的数组，也需要手动遍历数组并进行属性映射。

interface Item {
  id: number;
  value: string;
}

interface TransformedItem {
  itemId: number;
  itemText: string;
}

let items: Item[] = [
  { id: 1, value: "a" },
  { id: 2, value: "b" }
];

let transformedItems: TransformedItem[] = items.map(item => ({
  itemId: item.id,
  itemText: item.value
}));

类型转换的本质

类型转换是在运行时实际改变值的表示形式或存储方式。例如，将字符串 "123" 转换为数字 123 时，JavaScript 引擎会按照特定的解析规则将字符串解析为数字，并在内存中以数字的存储格式来表示这个值。这与类型断言仅在编译阶段给编译器提供类型提示有本质区别。

在对象类型转换中，虽然我们没有改变对象在内存中的物理结构，但通过创建新对象并进行属性映射，我们改变了对象的逻辑结构，使其符合目标类型的要求。这同样是在运行时进行的实际操作，与类型断言的编译时性质不同。

类型断言与类型转换的区别

作用阶段不同

类型断言主要作用于编译阶段。它的目的是帮助编译器在类型检查时按照开发者指定的类型进行分析，以避免类型错误。在运行时，类型断言不会对代码产生任何实际影响，因为 JavaScript 引擎不执行类型检查。

而类型转换是在运行时进行的操作。它会实际改变值的类型表示或存储方式，以满足程序在运行时对数据类型的需求。例如，将字符串转换为数字，这个转换过程是在代码执行到相关语句时发生的。

对值的影响不同

类型断言不会改变值的实际类型。它只是给编译器一个提示，让编译器相信某个值具有特定的类型。即使断言的类型与值的实际类型不符，在编译阶段也不会报错（除非开启了严格的类型检查选项），但在运行时可能会导致错误。

类型转换则会真正改变值的类型。无论是基本类型之间的转换，如字符串与数字的转换，还是复杂类型的转换，如对象类型转换，都会生成一个新的符合目标类型的值。例如，将字符串转换为数字后，值在内存中的存储方式和操作方法都发生了改变。

适用场景不同

类型断言适用于以下场景：

1. 处理第三方库：当使用第三方库时，编译器可能无法准确推断返回值的类型，但开发者通过文档或经验知道其确切类型，此时可以使用类型断言。例如，使用 document.getElementById 方法获取 DOM 元素时，返回值类型为 HTMLElement | null，如果我们确定该元素存在，可以使用类型断言：

let myElement = document.getElementById('my - element') as HTMLElement;
myElement.style.color = 'red';

2. 联合类型处理：在联合类型中，当确定某个值属于联合类型中的某一个具体类型时，可以使用类型断言。例如：

let value: string | number;
value = "hello";
let length: number = (value as string).length; 

类型转换适用于以下场景：

1. 数据处理与格式化：当需要对用户输入、API 返回数据等进行处理和格式化时，通常需要进行类型转换。例如，将表单输入的字符串转换为数字进行计算：

let input = document.getElementById('number - input') as HTMLInputElement;
let num: number = Number(input.value);
let result = num * 2;

2. 不同类型 API 交互：当与不同类型要求的 API 进行交互时，需要将数据转换为合适的类型。比如，某个 API 要求传入的参数是字符串形式的 JSON，而我们有一个对象，就需要将对象转换为字符串：

let data = { name: "John", age: 30 };
let jsonStr: string = JSON.stringify(data);
// 这里假设存在一个需要字符串形式 JSON 的 API 调用
// someAPI(jsonStr);

语法与操作方式不同

类型断言通过尖括号语法（<Type>）或 as 语法来指定值的类型，它只是在代码中表明开发者对值类型的一种假设，不涉及实际的值转换操作。

类型转换则通过特定的函数（如 Number()、String()、Boolean() 等）或对象的方法（如 toString()）来实现。对于复杂类型转换，通常需要手动创建新对象并进行属性映射等操作。

例如，类型断言：

let someValue: any = "test";
let length: number = (someValue as string).length;

类型转换：

let str: string = "123";
let num: number = Number(str);

潜在风险不同

类型断言如果使用不当，可能会在运行时导致错误。因为编译器只是按照开发者的断言进行类型检查，不会验证断言的正确性。如果断言的类型与实际类型不符，在访问不存在的属性或方法时就会出错。

类型转换也有风险，特别是在转换失败的情况下。例如，将无法解析为数字的字符串转换为数字会得到 NaN，这可能会影响后续的计算逻辑。在对象类型转换中，如果属性映射不正确，也会导致数据错误。但相比之下，类型转换的错误通常更容易在运行时被发现，因为它涉及实际的值操作，而类型断言的错误可能隐藏得更深，直到运行时访问特定属性或方法时才会暴露。

实际应用中的注意事项

类型断言的注意事项

1. 避免过度使用：虽然类型断言在某些情况下很有用，但过度使用会削弱 TypeScript 的类型检查优势。尽量让编译器能够自动推断类型，只有在确实必要时才使用类型断言。
2. 确保断言准确性：在进行类型断言时，要确保断言的类型是正确的。可以通过添加额外的运行时检查来验证断言的准确性，例如在断言为 HTMLElement 后，可以检查该元素是否为 null。

let myElement = document.getElementById('my - element');
if (myElement) {
  let element = myElement as HTMLElement;
  element.style.color = 'red';
}

3. 注意类型兼容性：在联合类型中进行类型断言时，要确保断言的类型是联合类型中的一个可能类型，否则会导致运行时错误。

类型转换的注意事项

1. 处理转换失败情况：在进行类型转换时，要考虑转换失败的可能性。例如，在将字符串转换为数字时，要检查是否返回 NaN，并进行相应处理。

let input = document.getElementById('number - input') as HTMLInputElement;
let num: number = Number(input.value);
if (isNaN(num)) {
  console.error('Invalid number input');
} else {
  let result = num * 2;
}

2. 复杂类型转换的准确性：在进行复杂类型转换，如对象类型转换时，要仔细检查属性映射是否准确，确保转换后的数据符合预期。
3. 性能影响：某些类型转换操作可能会对性能产生影响，特别是在循环或频繁调用的代码中。例如，多次将字符串转换为数字可能会消耗一定的性能，要根据实际情况进行优化。

结合使用类型断言与类型转换

在实际的前端开发项目中，类型断言和类型转换通常会结合使用。

例如，在处理用户输入并与后端 API 交互时，我们可能首先通过类型断言来明确输入元素的类型，然后进行类型转换以将数据格式化为符合 API 要求的形式。

// 获取用户输入的年龄
let ageInput = document.getElementById('age - input') as HTMLInputElement;
// 将输入的字符串转换为数字
let age: number = Number(ageInput.value);
// 假设后端 API 要求年龄以字符串形式发送
let ageStr: string = age.toString();
// 这里假设存在一个发送数据到后端的函数
// sendDataToBackend({ age: ageStr });

在这个例子中，我们先使用类型断言确定 ageInput 是 HTMLInputElement 类型，然后将其 value 属性转换为数字，最后又将数字转换为字符串以满足后端 API 的要求。

再比如，在处理从后端获取的 JSON 数据时，我们可能会先使用类型断言将 JSON 数据解析后的结果断言为特定的对象类型，然后根据业务需求对对象中的某些属性进行类型转换。

interface User {
  name: string;
  age: string;
}

// 假设从后端获取的 JSON 数据
let jsonData = '{"name":"John","age":"30"}';
let user = JSON.parse(jsonData) as User;
// 将字符串类型的年龄转换为数字类型
let numericAge: number = Number(user.age);

通过结合使用类型断言和类型转换，我们可以在前端开发中更灵活、准确地处理各种数据类型，确保代码的类型安全性和运行时的正确性。同时，合理运用这两种技术也有助于提高代码的可读性和可维护性，使代码逻辑更加清晰。

总之，深入理解类型断言与类型转换的区别，并在实际项目中正确使用它们，是 TypeScript 前端开发者必备的技能之一。通过不断实践和总结经验，我们能够更好地利用 TypeScript 的类型系统，编写出高质量、健壮的前端代码。